flowbite-svelte 0.27.13 → 0.27.15

package/src/lib/footer/FooterBrand.svelte

@@ -0,0 +1,21 @@
+<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

@@ -0,0 +1,21 @@
+<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

@@ -0,0 +1,15 @@
+<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

@@ -0,0 +1,14 @@
+<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

@@ -0,0 +1,8 @@
+<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

@@ -0,0 +1,58 @@
+<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

@@ -0,0 +1,28 @@
+<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

@@ -0,0 +1,29 @@
+<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

@@ -0,0 +1,124 @@
+<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

@@ -0,0 +1,15 @@
+<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

@@ -0,0 +1,86 @@
+<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

@@ -0,0 +1,110 @@
+<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

@@ -0,0 +1,50 @@
+<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>

package/src/lib/forms/Label.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import classNames from 'classnames';
+
+  export let color: 'gray' | 'green' | 'red' | 'disabled' = 'gray';
+  export let defaultClass: string = 'text-sm font-medium block';
+  export let show: boolean = true;
+
+  let node: HTMLLabelElement;
+
+  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'
+  };
+
+  // function checkDisabled(node: HTMLLabelElement) {
+  $: {
+    const control: HTMLInputElement = node?.control as HTMLInputElement;
+    color = control?.disabled ? 'disabled' : color;
+  }
+
+  $: labelClass = classNames(defaultClass, colorClasses[color], $$props.class);
+</script>
+
+{#if show}
+  <!-- svelte-ignore a11y-label-has-associated-control -->
+  <label bind:this={node} {...$$restProps} class={labelClass}><slot /></label>
+{:else}
+  <slot />
+{/if}

package/src/lib/forms/NumberInput.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import Input from './Input.svelte';
+
+  export let value: number = 0;
+</script>
+
+<Input let:props {...$$restProps}>
+  <input {...props} type="number" bind:value />
+</Input>