flowbite-svelte 0.26.5 → 0.26.6

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 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.6](https://github.com/themesberg/flowbite-svelte/compare/v0.26.5...v0.26.6) (2022-09-02)
+
+
+### Features
+
+* add highlight to Span component and update heading page ([d47121b](https://github.com/themesberg/flowbite-svelte/commit/d47121ba47e6c6e3dfdd366128f51da77a966e0f))
+* add Text decoration examples to text page ([fe074cd](https://github.com/themesberg/flowbite-svelte/commit/fe074cd2a36d780333444f276de69edec51649d5))
+* add underline and decoratio class to Span ([f3b11a9](https://github.com/themesberg/flowbite-svelte/commit/f3b11a92b3782c27e09f25c894a81402661b73d3))
+
+
+### Bug Fixes
+
+* header blocking anchor links ([af6d2d6](https://github.com/themesberg/flowbite-svelte/commit/af6d2d6eb9bb630e58e76fd214f8a14f0435dc2f))
+* remove TextGradient and Underline ([cb7b2d7](https://github.com/themesberg/flowbite-svelte/commit/cb7b2d753f110cad4677f990d60a11154e38ac93))
+
 ### [0.26.5](https://github.com/themesberg/flowbite-svelte/compare/v0.26.4...v0.26.5) (2022-09-02)
 
 

package/index.d.ts

@@ -110,7 +110,6 @@ export { default as A } from './typography/A.svelte';
 export { default as Blockquote } from './typography/Blockquote.svelte';
 export { default as DescriptionList } from './typography/DescriptionList.svelte';
 export { default as Heading } from './typography/Heading.svelte';
-export { default as Highlight } from './typography/Highlight.svelte';
 export { default as Hr } from './typography/Hr.svelte';
 export { default as Img } from './typography/Img.svelte';
 export { default as Li } from './typography/Li.svelte';
@@ -119,8 +118,6 @@ export { default as List } from './typography/List.svelte';
 export { default as P } from './typography/P.svelte';
 export { default as Secondary } from './typography/Secondary.svelte';
 export { default as Span } from './typography/Span.svelte';
-export { default as TextGradient } from './typography/TextGradient.svelte';
-export { default as Underline } from './typography/Underline.svelte';
 export { default as CloseButton } from './utils/CloseButton.svelte';
 export { default as ChevronDown } from './utils/ChevronDown.svelte';
 export { default as ChevronLeft } from './utils/ChevronLeft.svelte';

package/index.js

@@ -143,7 +143,6 @@ export { default as A } from './typography/A.svelte';
 export { default as Blockquote } from './typography/Blockquote.svelte';
 export { default as DescriptionList } from './typography/DescriptionList.svelte';
 export { default as Heading } from './typography/Heading.svelte';
-export { default as Highlight } from './typography/Highlight.svelte';
 export { default as Hr } from './typography/Hr.svelte';
 export { default as Img } from './typography/Img.svelte';
 export { default as Li } from './typography/Li.svelte';
@@ -152,8 +151,6 @@ export { default as List } from './typography/List.svelte';
 export { default as P } from './typography/P.svelte';
 export { default as Secondary } from './typography/Secondary.svelte';
 export { default as Span } from './typography/Span.svelte';
-export { default as TextGradient } from './typography/TextGradient.svelte';
-export { default as Underline } from './typography/Underline.svelte';
 // utils
 export { default as CloseButton } from './utils/CloseButton.svelte';
 export { default as ChevronDown } from './utils/ChevronDown.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowbite-svelte",
-  "version": "0.26.5",
+  "version": "0.26.6",
   "description": "Flowbite components for Svelte",
   "main": "index.js",
   "author": {
@@ -222,7 +222,6 @@
     "./typography/Blockquote.svelte": "./typography/Blockquote.svelte",
     "./typography/DescriptionList.svelte": "./typography/DescriptionList.svelte",
     "./typography/Heading.svelte": "./typography/Heading.svelte",
-    "./typography/Highlight.svelte": "./typography/Highlight.svelte",
     "./typography/Hr.svelte": "./typography/Hr.svelte",
     "./typography/Img.svelte": "./typography/Img.svelte",
     "./typography/Li.svelte": "./typography/Li.svelte",
@@ -231,7 +230,6 @@
     "./typography/P.svelte": "./typography/P.svelte",
     "./typography/Secondary.svelte": "./typography/Secondary.svelte",
     "./typography/Span.svelte": "./typography/Span.svelte",
-    "./typography/TextGradient.svelte": "./typography/TextGradient.svelte",
     "./typography/Ul.svelte": "./typography/Ul.svelte",
     "./typography/Underline.svelte": "./typography/Underline.svelte",
     "./utils/ChevronDown.svelte": "./utils/ChevronDown.svelte",

package/typography/Blockquote.svelte

@@ -11,24 +11,33 @@ let alignmentClasses = {
     center: 'text-center',
     right: 'text-right'
 };
-export let size = 'xl';
-let sizeClasses = {
+export let size = 'lg';
+const sizes = {
+    xs: 'text-xs',
+    sm: 'text-sm',
+    base: 'text-base',
     lg: 'text-lg',
     xl: 'text-xl',
-    xxl: 'text-2xl'
+    '2xl': 'text-2xl',
+    '3xl': 'text-3xl',
+    '4xl': 'text-4xl',
+    '5xl': 'text-5xl',
+    '6xl': 'text-6xl',
+    '7xl': 'text-7xl',
+    '8xl': 'text-8xl',
+    '9xl': 'text-9xl'
 };
 </script>
 
 <blockquote
-	class={classNames(
-		baseClass,
-		alignmentClasses[alignment],
-		sizeClasses[size],
-		bg && bgClass,
-		border && borderClass,
-		italic && 'italic',
-		$$props.class
-	)}
->
-	<slot />
+  class={classNames(
+    baseClass,
+    alignmentClasses[alignment],
+    sizes[size],
+    bg && bgClass,
+    border && borderClass,
+    italic && 'italic',
+    $$props.class
+  )}>
+  <slot />
 </blockquote>

package/typography/Blockquote.svelte.d.ts

@@ -9,7 +9,7 @@ declare const __propDef: {
         bg?: boolean;
         baseClass?: string;
         alignment?: 'left' | 'center' | 'right';
-        size?: 'lg' | 'xl' | 'xxl';
+        size?: 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl' | '8xl' | '9xl';
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/typography/P.svelte

@@ -1,9 +1,75 @@
 <script>import classNames from 'classnames';
-export let textColor = 'text-gray-500 dark:text-gray-400';
-export let size = 'text-lg';
-export let pClass = 'font-normal';
+export let color = 'text-gray-900 dark:text-white';
+export let height = 'normal';
+export let align = 'left';
+export let justify = false;
+export let italic = false;
+export let opacity = 100;
+export let whitespace = 'normal';
+export let size = 'lg';
+export let space;
+export let weight;
+const sizes = {
+    xs: 'text-xs',
+    sm: 'text-sm',
+    base: 'text-base',
+    lg: 'text-lg',
+    xl: 'text-xl',
+    '2xl': 'text-2xl',
+    '3xl': 'text-3xl',
+    '4xl': 'text-4xl',
+    '5xl': 'text-5xl',
+    '6xl': 'text-6xl',
+    '7xl': 'text-7xl',
+    '8xl': 'text-8xl',
+    '9xl': 'text-9xl'
+};
+const weights = {
+    thin: 'font-thin',
+    extralight: 'font-extralight',
+    light: 'font-light',
+    normal: 'font-normal',
+    medium: 'font-medium',
+    semibold: 'font-semibold',
+    bold: 'font-bold',
+    extrabold: 'font-extrabold',
+    black: 'font-black'
+};
+const spaces = {
+    tighter: 'tracking-tighter',
+    tight: 'tracking-tight',
+    normal: 'tracking-normal',
+    wide: 'tracking-wide',
+    wider: 'tracking-wider',
+    widest: 'tracking-widest'
+};
+const heights = {
+    normal: 'leading-normal',
+    relaxed: 'leading-relaxed',
+    loose: 'leading-loose'
+};
+const aligns = {
+    left: 'text-left',
+    center: 'text-center',
+    right: 'text-right'
+};
+const whitespaces = {
+    normal: 'whitespace-normal',
+    nowrap: 'whitespace-nowrap',
+    pre: 'whitespace-pre',
+    preline: 'whitespace-pre-line',
+    prewrap: 'whitespace-pre-wrap'
+};
+let colorAndopacity = color
+    .split(' ')
+    .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', whitespace && whitespaces[whitespace], $$props.class);
 </script>
 
-<p class={classNames(pClass, size, textColor, $$props.class)}>
-	<slot />
+<p class={classP}>
+  <slot />
 </p>

package/typography/P.svelte.d.ts

@@ -2,9 +2,16 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        textColor?: string;
-        size?: string;
-        pClass?: string;
+        color?: string;
+        height?: 'normal' | 'relaxed' | 'loose';
+        align?: 'left' | 'center' | 'right';
+        justify?: boolean;
+        italic?: boolean;
+        opacity?: number;
+        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';
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/typography/Span.svelte

@@ -1,5 +1,15 @@
 <script>import classNames from 'classnames';
-export let classSpan = classNames('font-semibold text-gray-900 dark:text-white', $$props.class);
+export let italic = false;
+export let underline = false;
+export let linethrough = false;
+export let uppercase = false;
+export let gradient = false;
+export let highlight = false;
+export let highlightClass = 'text-blue-600 dark:text-blue-500';
+export let decorationClass = 'decoration-2 decoration-blue-400 dark:decoration-blue-600';
+export let gradientClass = 'text-transparent bg-clip-text bg-gradient-to-r to-emerald-600 from-sky-400';
+let underlineClass = classNames('underline', decorationClass);
+let classSpan = classNames(italic && 'italic', underline && underlineClass, linethrough && 'line-through', uppercase && 'uppercase', gradient ? gradientClass : 'font-semibold text-gray-900 dark:text-white', highlight && highlightClass, $$props.class);
 </script>
 
 <span class={classSpan}>

package/typography/Span.svelte.d.ts

@@ -2,7 +2,15 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        classSpan?: string;
+        italic?: boolean;
+        underline?: boolean;
+        linethrough?: boolean;
+        uppercase?: boolean;
+        gradient?: boolean;
+        highlight?: boolean;
+        highlightClass?: string;
+        decorationClass?: string;
+        gradientClass?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/typography/Underline.svelte

@@ -1,7 +1,7 @@
 <script>import classNames from 'classnames';
-export let underlineClass = 'underline underline-offset-3 decoration-8 decoration-blue-400 dark:decoration-blue-600';
+export let underlineClass = 'underline decoration-8 decoration-blue-400 dark:decoration-blue-600';
 </script>
 
 <span class={classNames(underlineClass, $$props.class)}>
-	<slot />
+  <slot />
 </span>

package/typography/Highlight.svelte

@@ -1,7 +0,0 @@
-<script>import classNames from 'classnames';
-export let textColor = 'text-blue-600 dark:text-blue-500';
-</script>
-
-<span class={classNames(textColor, $$props.class)}>
-	<slot />
-</span>

package/typography/Highlight.svelte.d.ts

@@ -1,19 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        textColor?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export declare type HighlightProps = typeof __propDef.props;
-export declare type HighlightEvents = typeof __propDef.events;
-export declare type HighlightSlots = typeof __propDef.slots;
-export default class Highlight extends SvelteComponentTyped<HighlightProps, HighlightEvents, HighlightSlots> {
-}
-export {};

package/typography/TextGradient.svelte

@@ -1,7 +0,0 @@
-<script>import classNames from 'classnames';
-export let gradientClass = 'text-transparent bg-clip-text bg-gradient-to-r to-emerald-600 from-sky-400';
-</script>
-
-<span class={classNames(gradientClass, $$props.class)}>
-	<slot />
-</span>

package/typography/TextGradient.svelte.d.ts

@@ -1,19 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        gradientClass?: string;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export declare type TextGradientProps = typeof __propDef.props;
-export declare type TextGradientEvents = typeof __propDef.events;
-export declare type TextGradientSlots = typeof __propDef.slots;
-export default class TextGradient extends SvelteComponentTyped<TextGradientProps, TextGradientEvents, TextGradientSlots> {
-}
-export {};