flowbite-svelte 0.27.15 → 0.27.16

package/src/lib/dropdowns/DropdownHeader.svelte

@@ -1,14 +0,0 @@
-<script lang="ts">
-	import classNames from 'classnames';
-	import DropdownDivider from './DropdownDivider.svelte';
-	export let divClass: string = 'py-2 px-4 text-gray-700 dark:text-white';
-	// 'block py-2 px-4 text-sm text-gray-700 dark:text-gray-200';
-	export let divider: boolean = true;
-</script>
-
-<div {...$$restProps} class={classNames(divClass, $$props.class)}>
-	<slot />
-</div>
-{#if divider}
-	<DropdownDivider />
-{/if}

package/src/lib/dropdowns/DropdownItem.svelte

@@ -1,34 +0,0 @@
-<script lang="ts">
-  import Wrapper from '$lib/utils/Wrapper.svelte';
-  import classNames from 'classnames';
-
-  export let defaultClass: string =
-    'font-medium py-2 px-4 text-sm hover:bg-gray-100 dark:hover:bg-gray-600';
-  export let href: string | undefined = undefined;
-
-  let liClass: string;
-  $: liClass = classNames(defaultClass, href ? 'block' : 'w-full text-left', $$props.class);
-
-  let wrap: boolean = true;
-  function init(node: HTMLElement) {
-    wrap = node.parentElement?.tagName === 'UL';
-  }
-</script>
-
-<Wrapper tag="li" show={wrap} use={init}>
-  <svelte:element
-    this={href ? 'a' : 'button'}
-    {href}
-    {...$$restProps}
-    class={liClass}
-    on:click
-    on:change
-    on:keydown
-    on:keyup
-    on:focus
-    on:blur
-    on:mouseenter
-    on:mouseleave>
-    <slot />
-  </svelte:element>
-</Wrapper>

package/src/lib/footer/Footer.svelte

@@ -1,22 +0,0 @@
-<script lang="ts">
-  import classNames from 'classnames';
-  export let customClass: string = '';
-  export let footerType: 'custom' | 'sitemap' | 'default' | 'logo' | 'socialmedia' = 'default';
-  // using classNames dynamic class names, https://github.com/JedWatson/classnames#dynamic-class-names-with-es2015
-</script>
-
-<footer
-  {...$$restProps}
-  class={classNames(
-    {
-      'bg-gray-800': footerType === 'sitemap',
-      'p-4 bg-white sm:p-6 dark:bg-gray-800': footerType === 'socialmedia',
-      'p-4 bg-white rounded-lg shadow md:px-6 md:py-8 dark:bg-gray-800': footerType === 'logo',
-      'p-4 bg-white rounded-lg shadow md:flex md:items-center md:justify-between md:p-6 dark:bg-gray-800':
-        footerType === 'default',
-      [`${customClass}`]: footerType === 'custom'
-    },
-    $$props.class
-  )}>
-  <slot />
-</footer>

package/src/lib/footer/FooterBrand.svelte

@@ -1,21 +0,0 @@
-<script lang="ts">
-  import classNames from 'classnames';
-  export let aClass: string = 'flex items-center';
-  export let spanClass: string = 'self-center text-2xl font-semibold whitespace-nowrap dark:text-white';
-  export let imgClass: string = 'mr-3 h-8';
-  export let href: string = '';
-  export let src: string = '';
-  export let alt: string = '';
-  export let name: string = '';
-  export let target: string | undefined = undefined;
-</script>
-
-{#if href}
-  <a {...$$restProps} {href} {target} class={classNames(aClass, $$props.class)}>
-    <img {src} class={imgClass} {alt} />
-    <span class={spanClass}>{name}</span>
-    <slot />
-  </a>
-{:else}
-  <img {...$$restProps} {src} class={imgClass} {alt} />
-{/if}

package/src/lib/footer/FooterCopyright.svelte

@@ -1,21 +0,0 @@
-<script lang="ts">
-  import classNames from 'classnames';
-  export let spanClass: string = 'block text-sm text-gray-500 sm:text-center dark:text-gray-400';
-  export let aClass: string = 'hover:underline';
-  export let year: number = new Date().getFullYear();
-  export let href: string = '';
-  export let by: string = '';
-  export let target: string | undefined = undefined;
-</script>
-
-<span class={classNames(spanClass, $$props.class)}>
-  &copy; {year}
-  {#if href}
-    <a {...$$restProps} {href} {target} class={aClass}>
-      {by}
-    </a>
-  {:else}
-    <span class="ml-1">{by}</span>
-  {/if}
-  . All Rights Reserved.
-</span>

package/src/lib/footer/FooterIcon.svelte

@@ -1,15 +0,0 @@
-<script lang="ts">
-  import classNames from 'classnames';
-  export let href: string = '';
-  export let ariaLabel: string = '';
-  export let aClass: string = 'text-gray-500 hover:text-gray-900 dark:hover:text-white';
-  export let target: string | undefined = undefined;
-</script>
-
-{#if href}
-  <a {...$$restProps} {href} {target} aria-label={ariaLabel} class={classNames(aClass, $$props.class)}>
-    <slot />
-  </a>
-{:else}
-  <slot />
-{/if}

package/src/lib/footer/FooterLink.svelte

@@ -1,14 +0,0 @@
-<script lang="ts">
-  import A from '$lib/typography/A.svelte';
-  import classNames from 'classnames';
-  export let liClass: string = 'mr-4 last:mr-0 md:mr-6';
-  export let aClass: string = 'hover:underline';
-  export let href: string = '';
-  export let target: string | undefined = undefined;
-</script>
-
-<li class={classNames(liClass, $$props.class)}>
-  <a {...$$restProps} {href} class={aClass} {target}>
-    <slot />
-  </a>
-</li>

package/src/lib/footer/FooterLinkGroup.svelte

@@ -1,8 +0,0 @@
-<script lang="ts">
-	import classNames from 'classnames';
-	export let ulClass: string = 'text-gray-600 dark:text-gray-400';
-</script>
-
-<ul class={classNames(ulClass, $$props.class)}>
-	<slot />
-</ul>

package/src/lib/forms/Checkbox.svelte

@@ -1,58 +0,0 @@
-<script lang="ts">
-  import { getContext } from 'svelte';
-  import type { FormColorType } from '../types';
-  import Radio, { labelClass, inputClass } from './Radio.svelte';
-  import Label from './Label.svelte';
-
-  // properties forwarding
-  export let color: FormColorType = 'blue';
-  export let custom: boolean = false;
-  export let inline: boolean = false;
-
-  export let group: string[] = [];
-  export let value: string = '';
-  export let checked: boolean = false;
-
-  // tinted if put in component having its own background
-  let background: boolean = getContext('background');
-
-  $: {
-    // There's a bug in Svelte and bind:group is not working with wrapped checkbox
-    // This workaround is taken from:
-    // https://svelte.dev/repl/de117399559f4e7e9e14e2fc9ab243cc?version=3.12.1
-    const index = group.indexOf(value);
-
-    if (checked === undefined) checked = index >= 0;
-
-    if (checked) {
-      if (index < 0) {
-        group.push(value);
-        group = group;
-      }
-    } else {
-      if (index >= 0) {
-        group.splice(index, 1);
-        group = group;
-      }
-    }
-  }
-</script>
-
-<Label class={labelClass(inline, $$props.class)} show={!!$$slots.default}>
-  <input
-    type="checkbox"
-    bind:checked
-    on:keyup
-    on:keydown
-    on:keypress
-    on:focus
-    on:blur
-    on:click
-    on:mouseover
-    on:mouseenter
-    on:mouseleave
-    on:paste
-    {value}
-    {...$$restProps}
-    class={inputClass(custom, color, true, background, $$slots.default || $$props.class)} /><slot />
-</Label>

package/src/lib/forms/Dropzone.svelte

@@ -1,28 +0,0 @@
-<script lang="ts">
-	export let value: string = '';
-	export let divClass: string = 'flex justify-center items-center w-full';
-	export let labelClass: string =
-		'flex flex-col justify-center items-center w-full h-64 bg-gray-50 rounded-lg border-2 border-gray-300 border-dashed cursor-pointer dark:hover:bg-bray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600';
-	export let innerDivClass: string = 'flex flex-col justify-center items-center pt-5 pb-6';
-</script>
-
-<div class={divClass}>
-	<label for="dropzone-file" class={labelClass}>
-		<div class={innerDivClass}>
-			<slot />
-		</div>
-		<input
-			{...$$restProps}
-			bind:value
-			type="file"
-			class="hidden"
-			on:click
-			on:change
-			on:focus
-			on:blur
-			on:mouseenter
-			on:mouseleave
-			on:mouseover
-		/>
-	</label>
-</div>

package/src/lib/forms/Fileupload.svelte

@@ -1,29 +0,0 @@
-<script lang="ts">
-	import classNames from 'classnames';
-	export let value: string = '';
-	export let size: 'xs' | 'sm' | 'lg' = 'sm';
-	export let inputClass: string =
-		'block w-full text-gray-900 bg-gray-50 rounded-lg border border-gray-300 cursor-pointer dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400';
-</script>
-
-<input
-	{...$$restProps}
-	on:change
-	on:keyup
-	on:keydown
-	on:keypress
-	on:focus
-	on:blur
-	on:click
-	on:mouseover
-	on:mouseenter
-	on:mouseleave
-	on:paste
-	bind:value
-	class={classNames(inputClass, {
-		'mb-5 text-xs': size === 'xs',
-		'mb-5 text-sm': size === 'sm',
-		'text-lg': size === 'lg'
-	})}
-	type="file"
-/>

package/src/lib/forms/FloatingLabelInput.svelte

@@ -1,124 +0,0 @@
-<script lang="ts">
-	import classNames from 'classnames';
-	import generateId from '../utils/generateId.js';
-	import type { InputType } from '../types';
-
-	export let id: string = generateId();
-	export let style: 'filled' | 'outlined' | 'standard' = 'standard';
-	export let type: InputType = 'text';
-	export let size: 'small' | 'default' = 'default';
-	export let color: 'base' | 'green' | 'red' = 'base';
-	export let value: string = '';
-	export let label: string = '';
-
-	const divClasses = {
-		filled: 'relative',
-		outlined: 'relative',
-		standard: 'relative z-0'
-	};
-
-	const inputSizes = {
-		filled: {
-			small: 'px-2.5 pb-1.5 pt-4',
-			default: 'px-2.5 pb-2.5 pt-5'
-		},
-		outlined: {
-			small: 'px-2.5 pb-1.5 pt-3',
-			default: 'px-2.5 pb-2.5 pt-4'
-		},
-		standard: {
-			small: 'py-2 px-0',
-			default: 'py-2.5 px-0'
-		}
-	};
-
-	const labelSizes = {
-		filled: {
-			small: 'top-3',
-			default: 'top-4'
-		},
-		outlined: {
-			small: 'top-1',
-			default: 'top-2'
-		},
-		standard: {
-			small: 'top-3',
-			default: 'top-3'
-		}
-	};
-
-	const inputClasses = {
-		filled:
-			'block rounded-t-lg w-full text-sm text-gray-900 bg-gray-50 dark:bg-gray-700 border-0 border-b-2 appearance-none dark:text-white focus:outline-none focus:ring-0 peer',
-		outlined:
-			'block w-full text-sm text-gray-900 bg-transparent rounded-lg border-1 appearance-none dark:text-white  focus:outline-none focus:ring-0 peer',
-		standard:
-			'block w-full text-sm text-gray-900 bg-transparent border-0 border-b-2 appearance-none dark:text-white  focus:outline-none focus:ring-0 peer'
-	};
-
-	const labelClasses = {
-		filled:
-			'absolute text-sm duration-300 transform -translate-y-4 scale-75 top-4 z-10 origin-[0] left-2.5  peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4',
-		outlined:
-			'absolute text-sm duration-300 transform -translate-y-4 scale-75 top-2 z-10 origin-[0] bg-white dark:bg-gray-900 px-2 peer-focus:px-2  peer-placeholder-shown:scale-100 peer-placeholder-shown:-translate-y-1/2 peer-placeholder-shown:top-1/2 peer-focus:top-2 peer-focus:scale-75 peer-focus:-translate-y-4 left-1',
-		standard:
-			'absolute text-sm duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:left-0  peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6'
-	};
-
-	const inputColorClasses = {
-		base: 'border-gray-300 dark:border-gray-600 dark:focus:border-blue-500 focus:border-blue-600',
-		green:
-			'border-green-600 dark:border-green-500 dark:focus:border-green-500 focus:border-green-600',
-		red: 'border-red-600 dark:border-red-500 dark:focus:border-red-500  focus:border-red-600'
-	};
-
-	const labelColorClasses = {
-		base: 'text-gray-500 dark:text-gray-400 peer-focus:text-blue-600 peer-focus:dark:text-blue-500',
-		green: 'text-green-600 dark:text-green-500',
-		red: 'text-red-600 dark:text-red-500'
-	};
-
-	// you need to this to avoid 2-way binding
-	function setType(node) {
-		node.type = type;
-	}
-</script>
-
-<div class={divClasses[style]}>
-	<input
-		{id}
-		{...$$restProps}
-		bind:value
-		on:blur
-		on:change
-		on:click
-		on:focus
-		on:keydown
-		on:keypress
-		on:keyup
-		on:mouseenter
-		on:mouseleave
-		on:mouseover
-		on:paste
-		use:setType
-		placeholder=" "
-		class={classNames(
-			inputClasses[style],
-			inputColorClasses[color],
-			inputSizes[style][size],
-			$$props.class
-		)}
-	/>
-
-	<label
-		for={id}
-		class={classNames(
-			labelClasses[style],
-			labelColorClasses[color],
-			labelSizes[style][size],
-			$$props.labelClass
-		)}
-	>
-		{label}
-	</label>
-</div>

package/src/lib/forms/Helper.svelte

@@ -1,15 +0,0 @@
-<script lang="ts">
-	import classNames from 'classnames';
-	export let helperClass: string = 'text-xs font-normal text-gray-500 dark:text-gray-300';
-	export let color: 'gray' | 'green' | 'red' | 'disabled' = 'gray';
-	const colorClasses = {
-		gray: 'text-gray-900 dark:text-gray-300',
-		green: 'text-green-700 dark:text-green-500',
-		red: 'text-red-700 dark:text-red-500',
-		disabled: 'text-gray-400 dark:text-gray-500'
-	};
-</script>
-
-<p {...$$restProps} class={classNames(helperClass, colorClasses[color], $$props.class)}>
-	<slot />
-</p>

package/src/lib/forms/Iconinput.svelte

@@ -1,86 +0,0 @@
-<script lang="ts">
-  import classNames from 'classnames';
-
-  export let value: string = '';
-  export let size: 'sm' | 'md' | 'lg' = 'md';
-  export let noBorder: boolean = false;
-  export let inputClass: string =
-    'rounded-none rounded-r-lg bg-gray-50 border border-gray-300 text-gray-900 focus:ring-blue-500 focus:border-blue-500 block flex-1 min-w-0 w-full border-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
-  export let spanClass: string =
-    'inline-flex items-center px-3 text-sm text-gray-900 bg-gray-200 rounded-l-md border border-r-0 border-gray-300 dark:bg-gray-600 dark:text-gray-400 dark:border-gray-600';
-  export let noBorderInputClass: string =
-    'bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full   dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500';
-  export let pointerEvent: boolean = false;
-  export let noBorderDivClass: string = 'flex absolute inset-y-0 left-0 items-center pl-3';
-</script>
-
-{#if noBorder}
-  <div class="relative">
-    <div
-      class={classNames(
-        noBorderDivClass,
-        {
-          'p-2 sm:text-xs': size === 'sm',
-          'p-2.5 text-sm': size === 'md',
-          'sm:text-md p-4': size === 'lg'
-        },
-        pointerEvent ? 'cursor-pointer' : 'pointer-events-none'
-      )}>
-      <slot />
-    </div>
-    <input
-      {...$$restProps}
-      bind:value
-      on:blur
-      on:change
-      on:click
-      on:focus
-      on:keydown
-      on:keypress
-      on:keyup
-      on:mouseover
-      on:mouseenter
-      on:mouseleave
-      on:paste
-      on:input
-      class={classNames(
-        noBorderInputClass,
-        {
-          'p-2 sm:text-xs pl-9': size === 'sm',
-          'p-2.5 text-sm pl-10': size === 'md',
-          'sm:text-md p-4 pl-11': size === 'lg'
-        },
-        $$props.class
-      )} />
-  </div>
-{:else}
-  <div class="flex">
-    <span class={spanClass}>
-      <slot />
-    </span>
-    <input
-      {...$$restProps}
-      bind:value
-      on:blur
-      on:change
-      on:click
-      on:focus
-      on:keydown
-      on:keypress
-      on:keyup
-      on:mouseover
-      on:mouseenter
-      on:mouseleave
-      on:paste
-      on:input
-      class={classNames(
-        inputClass,
-        {
-          'p-2 sm:text-xs': size === 'sm',
-          'p-2.5 text-sm': size === 'md',
-          'sm:text-md p-4': size === 'lg'
-        },
-        $$props.class
-      )} />
-  </div>
-{/if}

package/src/lib/forms/Input.svelte

@@ -1,110 +0,0 @@
-<script context="module" lang="ts">
-  import type { SizeType, FormSizeType } from '$lib/types';
-  export function clampSize(s: SizeType) {
-    return s && s === 'xs' ? 'sm' : s === 'xl' ? 'lg' : s;
-  }
-</script>
-
-<script lang="ts">
-  import Wrapper from '$lib/utils/Wrapper.svelte';
-  import classNames from 'classnames';
-  import { getContext } from 'svelte';
-  import type { InputType } from '../types';
-
-  export let type: InputType = 'text';
-  export let value: string | number = '';
-  export let size: FormSizeType | undefined = undefined;
-  export let defaultClass: string = 'block w-full disabled:cursor-not-allowed disabled:opacity-50';
-  export let color: 'base' | 'green' | 'red' = 'base';
-
-  const borderClasses = {
-    base: 'border-gray-300 dark:border-gray-600',
-    tinted: 'border-gray-300 dark:border-gray-500',
-    green: 'border-green-500 dark:border-green-400',
-    red: 'border-red-500 dark:border-red-400'
-  };
-
-  const ringClasses = {
-    base: 'focus:border-blue-500 focus:ring-blue-500 dark:focus:border-blue-500 dark:focus:ring-blue-500',
-    green:
-      'focus:ring-green-500 focus:border-green-500 dark:focus:border-green-500 dark:focus:ring-green-500',
-    red: 'focus:ring-red-500 focus:border-red-500 dark:focus:ring-red-500 dark:focus:border-red-500'
-  };
-
-  const colorClasses = {
-    base: 'bg-gray-50 text-gray-900 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400',
-    tinted: 'bg-gray-50 text-gray-900 dark:bg-gray-600 dark:text-white dark:placeholder-gray-400',
-    green: 'bg-green-50 text-green-900 placeholder-green-700 dark:bg-gray-700',
-    red: 'bg-red-50 text-red-900 placeholder-red-700 dark:bg-gray-700'
-  };
-
-  // tinted if put in component having its own background
-  let background: boolean = getContext('background');
-
-  let group: { size: SizeType } = getContext('group');
-
-  // you need to this to avoid 2-way binding
-  const setType = (node: HTMLInputElement, _type: string) => {
-    node.type = _type;
-    return {
-      update(_type: string) {
-        node.type = _type;
-      }
-    };
-  };
-
-  const textSizes = { sm: 'sm:text-xs', md: 'text-sm', lg: 'sm:text-base' };
-  const leftPadding = { sm: 'pl-9', md: 'pl-10', lg: 'pl-11' };
-  const rightPadding = { sm: 'pr-9', md: 'pr-10', lg: 'pr-11' };
-  const inputPadding = { sm: 'p-2', md: 'p-2.5', lg: 'p-4' };
-
-  $: _size = size || clampSize(group?.size) || 'md';
-  let inputClass: string;
-  $: {
-    const _color = color === 'base' && background ? 'tinted' : color;
-    inputClass = classNames(
-      defaultClass,
-      $$slots.left && leftPadding[_size],
-      $$slots.right && rightPadding[_size],
-      ringClasses[color],
-      colorClasses[_color],
-      borderClasses[_color],
-      inputPadding[_size],
-      textSizes[_size],
-      group || 'rounded-lg',
-      group && 'first:rounded-l-lg last:rounded-r-lg',
-      group && 'border-l-0 first:border-l last:border-r',
-      $$props.class
-    );
-  }
-  let floatClass =
-    'flex absolute inset-y-0 items-center pointer-events-none text-gray-500 dark:text-gray-400';
-</script>
-
-<Wrapper class="relative w-full" show={$$slots.left || $$slots.right}>
-  {#if $$slots.left}
-    <div class="{floatClass} left-0 pl-2.5"><slot name="left" /></div>
-  {/if}
-  <slot props={{ ...$$restProps, class: inputClass }}>
-    <input
-      {...$$restProps}
-      bind:value
-      on:blur
-      on:change
-      on:click
-      on:focus
-      on:keydown
-      on:keypress
-      on:keyup
-      on:mouseover
-      on:mouseenter
-      on:mouseleave
-      on:paste
-      on:input
-      use:setType={type}
-      class={inputClass} />
-  </slot>
-  {#if $$slots.right}
-    <div class="{floatClass} right-0 pr-2.5"><slot name="right" /></div>
-  {/if}
-</Wrapper>

package/src/lib/forms/InputAddon.svelte

@@ -1,50 +0,0 @@
-<script lang="ts">
-  import type { SizeType } from '$lib/types';
-  import classNames from 'classnames';
-  import { getContext } from 'svelte';
-  import { clampSize } from '$lib/forms/Input.svelte';
-
-  export let size: 'sm' | 'md' | 'lg' | undefined = undefined;
-
-  // tinted if put in component having its own background
-  let background: boolean = getContext('background');
-
-  let group: { size: SizeType } = getContext('group');
-
-  const borderClasses = {
-    base: 'border-gray-300 dark:border-gray-600',
-    tinted: 'border-gray-300 dark:border-gray-500'
-  };
-
-  const darkBgClasses = {
-    base: 'dark:bg-gray-600 dark:text-gray-400',
-    tinted: 'dark:bg-gray-500 dark:text-gray-300'
-  };
-
-  const divider = {
-    base: 'dark:border-r-gray-700 dark:last:border-r-gray-600',
-    tinted: 'dark:border-r-gray-600 dark:last:border-r-gray-500'
-  };
-
-  const textSizes = { sm: 'sm:text-xs', md: 'text-sm', lg: 'sm:text-base' };
-  const prefixPadding = { sm: 'px-2', md: 'px-3', lg: 'px-4' };
-
-  // size: explicit, inherited, default
-  $: _size = size || clampSize(group?.size) || 'md';
-
-  $: divClass = classNames(
-    textSizes[_size],
-    prefixPadding[_size],
-    background ? borderClasses['tinted'] : borderClasses['base'],
-    'text-gray-500 bg-gray-200',
-    background ? darkBgClasses.tinted : darkBgClasses.base,
-    background ? divider.tinted : divider.base,
-    'inline-flex items-center border-t border-b first:border-l border-r',
-    'first:rounded-l-lg last:rounded-r-lg',
-    $$props.class
-  );
-</script>
-
-<div {...$$restProps} class={divClass}>
-  <slot />
-</div>