flowbite-svelte 0.26.11 → 0.26.14

package/CHANGELOG.md

@@ -2,6 +2,28 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.26.14](https://github.com/themesberg/flowbite-svelte/compare/v0.26.13...v0.26.14) (2022-09-06)
+
+
+### Bug Fixes
+
+* Heading and P update ([2313e3e](https://github.com/themesberg/flowbite-svelte/commit/2313e3e5ecb38ee69839a26b12b7c41cc099f75e))
+* toast transitions ([6659682](https://github.com/themesberg/flowbite-svelte/commit/6659682250ab9d2337f06c2b424431366cf9ced0))
+
+### [0.26.13](https://github.com/themesberg/flowbite-svelte/compare/v0.26.12...v0.26.13) (2022-09-05)
+
+
+### Bug Fixes
+
+* add track to video component for A11y ([ef69a83](https://github.com/themesberg/flowbite-svelte/commit/ef69a83325ab11e4d3548e5e28033ae9e02bfe40))
+
+### [0.26.12](https://github.com/themesberg/flowbite-svelte/compare/v0.26.11...v0.26.12) (2022-09-05)
+
+
+### Features
+
+* add labelInsideClass to progressbar component ([fe20cd7](https://github.com/themesberg/flowbite-svelte/commit/fe20cd7f693f21e052dc5adb3fd3eb4bcfa80b76))
+
 ### [0.26.11](https://github.com/themesberg/flowbite-svelte/compare/v0.26.10...v0.26.11) (2022-09-05)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.26.11",
+  "version": "0.26.14",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -49,11 +49,11 @@
     "accordion",
     "alert",
     "avatar",
-    "badges",
-    "breadcrumbs",
-    "button-groups",
-    "buttons",
-    "cards",
+    "badge",
+    "breadcrumb",
+    "button-group",
+    "button",
+    "card",
     "carousel",
     "darkmode",
     "dropdown",
@@ -61,19 +61,22 @@
     "forms",
     "kbd",
     "list group",
+    "mega menu",
     "modal",
     "navbar",
-    "paginations",
-    "progress bars",
+    "pagination",
+    "progressbar",
     "rating",
-    "sidebars",
+    "sidebar",
     "skeleton",
-    "spinners",
-    "tables",
-    "tabs",
-    "timelines",
-    "toasts",
-    "tooltip"
+    "spinner",
+    "table",
+    "tab",
+    "timeline",
+    "toast",
+    "tooltip",
+    "typography",
+    "video"
   ],
   "repository": {
     "type": "git",
@@ -93,7 +96,8 @@
     "Zoltán Szőgyényi <zoltan@themesberg.com>",
     "Robert Tanislav <robert@themesberg.com>",
     "Victor Cordos <victor@themesberg.com>",
-    "Shinichi Okada <okada.shin@gmail.com>"
+    "Shinichi Okada <okada.shin@gmail.com>",
+    "Jakub Jagielka <jjagielka@gmail.com>"
   ],
   "exports": {
     "./package.json": "./package.json",

package/progressbars/Progressbar.svelte

@@ -4,6 +4,7 @@ export let size = 'h-2.5';
 export let labelInside = false;
 export let labelOutside = '';
 export let color = 'blue';
+export let labelInsideClass = 'text-blue-100 text-xs font-medium text-center p-0.5 leading-none rounded-full';
 // let barColor: string;
 const barColors = {
     blue: 'bg-blue-600',
@@ -17,20 +18,17 @@ const barColors = {
 </script>
 
 {#if labelOutside}
-	<div class="flex justify-between mb-1">
-		<span class="text-base font-medium text-blue-700 dark:text-white">{labelOutside}</span>
-		<span class="text-sm font-medium text-blue-700 dark:text-white">{progress}%</span>
-	</div>
+  <div {...$$restProps} class={classNames('flex justify-between mb-1', $$props.class)}>
+    <span class="text-base font-medium text-blue-700 dark:text-white">{labelOutside}</span>
+    <span class="text-sm font-medium text-blue-700 dark:text-white">{progress}%</span>
+  </div>
 {/if}
-<div class="w-full bg-gray-200 rounded-full {size} dark:bg-gray-700">
-	{#if labelInside}
-		<div
-			class="bg-blue-600 text-xs font-medium text-blue-100 text-center p-0.5 leading-none rounded-full"
-			style="width: {progress}%"
-		>
-			{progress}%
-		</div>
-	{:else}
-		<div class={classNames(barColors[color], size, 'rounded-full')} style="width: {progress}%" />
-	{/if}
+<div class={classNames('w-full bg-gray-200 rounded-full dark:bg-gray-700', size, $$props.class)}>
+  {#if labelInside}
+    <div class={classNames(labelInsideClass, barColors[color])} style="width: {progress}%">
+      {progress}%
+    </div>
+  {:else}
+    <div class={classNames(barColors[color], size, 'rounded-full')} style="width: {progress}%" />
+  {/if}
 </div>

package/progressbars/Progressbar.svelte.d.ts

@@ -2,11 +2,13 @@ import { SvelteComponentTyped } from "svelte";
 import type { Colors } from '../types';
 declare const __propDef: {
     props: {
+        [x: string]: any;
         progress?: string;
         size?: string;
         labelInside?: boolean;
         labelOutside?: string;
         color?: Colors;
+        labelInsideClass?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/toasts/Toast.svelte

@@ -1,6 +1,7 @@
 <script>import Frame from '../utils/Frame.svelte';
 import classNames from 'classnames';
 import CloseButton from '../utils/CloseButton.svelte';
+import { fade } from 'svelte/transition';
 export let color = 'blue';
 export let simple = false;
 // Absolute position
@@ -18,19 +19,19 @@ $: iconClass = classNames('inline-flex items-center justify-center flex-shrink-0
 </script>
 
 {#if visible}
-	<Frame rounded border transition="fade" {...$$restProps} class={classDiv} role="alert">
-		<div class="flex {$$slots.extra ? 'items-start' : 'items-center'}">
-			{#if $$slots.icon}
-				<Frame {color} rounded class={iconClass}><slot name="icon" /></Frame>
-			{/if}
+  <Frame rounded border transition={fade} {...$$restProps} class={classDiv} role="alert">
+    <div class="flex {$$slots.extra ? 'items-start' : 'items-center'}">
+      {#if $$slots.icon}
+        <Frame {color} rounded class={iconClass}><slot name="icon" /></Frame>
+      {/if}
 
-			<div class="text-sm font-normal w-full">
-				<slot />
-				<slot name="extra" />
-			</div>
-			{#if !simple}
-				<CloseButton on:click={() => (visible = false)} />
-			{/if}
-		</div>
-	</Frame>
+      <div class="text-sm font-normal w-full">
+        <slot />
+        <slot name="extra" />
+      </div>
+      {#if !simple}
+        <CloseButton on:click={() => (visible = false)} />
+      {/if}
+    </div>
+  </Frame>
 {/if}

package/typography/Heading.svelte

@@ -1,7 +1,7 @@
 <script>import classNames from 'classnames';
 export let tag = 'h1';
 export let color = 'text-gray-900 dark:text-white';
-export let customSize;
+export let customSize = '';
 const textSizes = {
     h1: 'text-5xl font-extrabold',
     h2: 'text-4xl font-bold',

package/typography/Heading.svelte.d.ts

@@ -4,7 +4,7 @@ declare const __propDef: {
         [x: string]: any;
         tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
         color?: string;
-        customSize: string;
+        customSize?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/typography/P.svelte

@@ -10,7 +10,7 @@ export let opacity;
 export let whitespace = 'normal';
 export let size = 'base';
 export let space;
-export let weight;
+export let weight = 'normal';
 const sizes = {
     xs: 'text-xs',
     sm: 'text-sm',
@@ -67,8 +67,6 @@ let colorAndopacity = color
     .map((element) => element.trim())
     .map((element) => element + '/' + String(opacity))
     .join(' ');
-// console.log('colorArr', colorAndopacity);
-// console.log(typeof colorAndopacity);
 let classP = classNames(size && sizes[size], (opacity && colorAndopacity) || (color && color), height && heights[height], weight && weights[weight], space && spaces[space], align && aligns[align], justify && 'text-justify', italic && 'italic', firstupper && upperClass, whitespace && whitespaces[whitespace], $$props.class);
 </script>
 

package/typography/P.svelte.d.ts

@@ -13,7 +13,7 @@ declare const __propDef: {
         whitespace?: 'normal' | 'nowrap' | 'pre' | 'preline' | 'prewrap';
         size?: 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl';
         space: 'tighter' | 'tight' | 'normal' | 'wide' | 'wider' | 'widest';
-        weight: 'thin' | 'extralight' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black';
+        weight?: 'thin' | 'extralight' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black';
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/video/Video.svelte

@@ -4,6 +4,9 @@
 // export let autoplay: boolean = false;
 export let src;
 export let type = 'video/mp4';
+export let trackSrc = '';
+export let srclang = 'en';
+export let label = 'english_captions';
 // export let attribute = '';
 let videoClass = classNames($$props.class);
 // const setAttribute = (node, params) => {
@@ -14,5 +17,6 @@ let videoClass = classNames($$props.class);
 <video {...$$restProps} class={videoClass}>
   <source {src} {type} />
   <slot />
+  <track src={trackSrc} kind="captions" {srclang} {label} />
   Your browser does not support the video tag.
 </video>

package/video/Video.svelte.d.ts

@@ -4,6 +4,9 @@ declare const __propDef: {
         [x: string]: any;
         src: string;
         type?: string;
+        trackSrc?: string;
+        srclang?: string;
+        label?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;