@likable-hair/svelte 0.0.15 → 0.0.18

package/buttons/Button.svelte

@@ -1,27 +1,34 @@
-<script >export let type = 'default';
-export let icon = undefined;
-export let iconSize = 15;
-let clazz = '';
+<script >export let type = 'default', icon = undefined, iconSize = 15, clazz = '', maxWidth = undefined, maxHeight = undefined, minWidth = undefined, minHeight = undefined, width = undefined, height = undefined, textAlign = "center", cursor = "pointer", padding = "5px", fontSize = undefined, color = undefined, backgroundColor = undefined, hoverBackgroundColor = '#008f8f', borderRadius = undefined, boxShadow = undefined;
 export { clazz as class };
+$: defaultBorderRadius = type == 'icon' ? '50%' : '5px';
 $: position = !!$$slots.append ? 'relative' : undefined;
-$: cssVariables = Object.entries({
-    '--icon-button-height': (iconSize + 15) + 'pt',
-    '--icon-button-width': (iconSize + 15) + 'pt',
-    '--button-position': position
-}).filter(([key]) => key.startsWith('--'))
-    .reduce((css, [key, value]) => {
-    return `${css}${key}: ${value};`;
-}, '');
 import Icon from '../media/Icon.svelte';
 </script>
 
 <div 
+  style:width={width}
+  style:max-width={maxWidth}
+  style:min-width={minWidth}
+  style:height={height}
+  style:max-height={maxHeight}
+  style:min-height={minHeight}
+  style:text-align={textAlign}
+  style:position={position}
+  style:cursor={cursor}
+  style:padding={padding}
+  style:font-size={fontSize}
+  style:color={color}
+  style:button-border-radius={!!borderRadius ? borderRadius : defaultBorderRadius}
+  style:--button-background-color={backgroundColor}
+  style:--button-hover-background-color={hoverBackgroundColor}
+  style:--button-box-shadow={boxShadow}
+  style:--button-icon-height={(iconSize + 5) + 'pt'}
+  style:--button-icon-width={(iconSize + 5) + 'pt'}
   class="button {clazz}"
   class:button-default={type === 'default'}
   class:button-text={type === 'text'}
   class:button-icon={type === 'icon'}
   on:click
-  style={cssVariables}
 >
   {#if !!icon}
     <Icon name={icon} size={iconSize}></Icon>
@@ -31,7 +38,6 @@ import Icon from '../media/Icon.svelte';
   {#if $$slots.append}
     <span class="append-item">
       <slot name="append">
-        
       </slot>
     </span>
   {/if}
@@ -45,57 +51,47 @@ import Icon from '../media/Icon.svelte';
 
   .button {
     overflow: hidden;
-    position: var(--button-position);
-    width: var(--width, fit-content);
-    height: var(--height, fit-content);
-    text-align: var(--text-align, center);
-    cursor: var(--cursor, pointer);
-    padding: var(--padding, 5px);
-    font-size: var(--font-size);
   }
 
   .button-default {
     transition: background-color 200ms;
-    color: var(--color);
-    background-color: var(--background-color);
+    background-color: var(--button-background-color);
     outline: 0;
     border: 0;
-    border-radius: var(--border-radius, 0.25rem);
-    box-shadow: var(--box-shadow, 0 0 0.5rem rgba(0, 0, 0, 0.3));
+    border-radius: var(--button-border-radius, 0.25rem);
+    box-shadow: var(--button-box-shadow, 0 0 0.5rem rgba(0, 0, 0, 0.3));
   }
 
   .button-default:hover {
-    background-color: var(--hover-background-color, var(--background-color));
+    background-color: var(--button-hover-background-color, var(--button-background-color));
   }
 
   .button-text {
-    color: var(--color);
     transition: background-color 200ms;
     text-transform: uppercase;
     font-weight: 600;
     outline: 0;
     border: 0;
-    border-radius: var(--border-radius, 0.25rem);
+    border-radius: var(--button-border-radius, 0.25rem);
   }
 
   .button-text:hover {
-    background-color: var(--hover-background-color, transparent);
+    background-color: var(--button-hover-background-color, transparent);
   }
 
   .button-icon {
-    color: var(--color);
     transition: background-color 200ms;
     outline: 0;
     border: 0;
-    border-radius: var(--border-radius, 50%);
-    height: var(--icon-button-height) !important;
-    width: var(--icon-button-width) !important;
+    border-radius: var(--button-border-radius, 50%);
+    height: var(--button-icon-height) !important;
+    width: var(--button-icon-width) !important;
     display: flex;
     align-items: center;
     justify-content: center;
   }
 
   .button-icon:hover {
-    background-color: var(--hover-background-color, transparent);
+    background-color: var(--button-hover-background-color, transparent);
   }
 </style>

package/buttons/Button.svelte.d.ts

@@ -5,6 +5,21 @@ declare const __propDef: {
         icon?: string;
         iconSize?: number;
         class?: string;
+        maxWidth?: string;
+        maxHeight?: string;
+        minWidth?: string;
+        minHeight?: string;
+        width?: string;
+        height?: string;
+        textAlign?: string;
+        cursor?: string;
+        padding?: string;
+        fontSize?: string;
+        color?: string;
+        backgroundColor?: string;
+        hoverBackgroundColor?: string;
+        borderRadius?: string;
+        boxShadow?: string;
     };
     events: {
         click: MouseEvent;

package/common/Card.svelte

@@ -1,8 +1,12 @@
 <script >export let outlined = false, maxWidth = undefined, maxHeight = undefined, minWidth = undefined, minHeight = undefined, width = 'fit-content', height = undefined, padding = "5px", borderRadius = "5px", backgroundColor = "rgb(252, 252, 252)", color = undefined, borderColor = undefined, borderWidth = undefined, style = "";
-import './common/tailwind.css';
 </script>
 
 <style>
+  .shadow-lg {
+    --shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    --shadow-colored: 0 10px 15px -3px #000, 0 4px 6px -4px #000;
+    box-shadow: inset 0 0 0 calc(1px + 0px) rgb(255 255 255/0.1), 0 0 #0000, 0 0 #0000;
+  }
 </style>
 
 <div
@@ -19,16 +23,28 @@ import './common/tailwind.css';
   style:border-color={borderColor}
   style:border-width={borderWidth}
   style={style}
-  class="flex flex-col shadow-lg" 
+  style:display="flex"
+  style:flex-direction="column"
+  class="shadow-lg" 
   class:border-solid={outlined}
 >
-  <div class="header flex-none">
+  <div 
+    style:flex="none"
+    class="header"
+  >
     <slot name="header"></slot>
   </div>
-  <div class="body shrink overflow-y-auto">
+  <div
+    style:flex-shrink="1"
+    style:overflow-y="auto"
+    class="body"
+  >
     <slot></slot>
   </div>
-  <div class="footer flex-none">
+  <div 
+    style:flex="none"
+    class="footer flex-none"
+  >
     <slot name="footer"></slot>
   </div>
 </div>

package/common/Card.svelte.d.ts

@@ -1,5 +1,4 @@
 import { SvelteComponentTyped } from "svelte";
-import './common/tailwind.css';
 declare const __propDef: {
     props: {
         outlined?: boolean;

package/dates/Calendar.svelte

@@ -1,4 +1,3 @@
 <script >import { getDateRows } from './utils';
-import '$lib/common/tailwind.css';
 </script>
 

package/dates/Calendar.svelte.d.ts

@@ -1,5 +1,4 @@
 import { SvelteComponentTyped } from "svelte";
-import '$lib/common/tailwind.css';
 declare const __propDef: {
     props: {};
     events: {

package/forms/Textfield.svelte

@@ -1,4 +1,4 @@
-<script >export let label = "", placeholder = "", color = "", value = "", variant = 'outlined';
+<script >export let label = "", placeholder = "", color = "", value = "", variant = 'outlined', width = "100%", textColor = "balck", borderRadius = "5px", borderColor = undefined;
 import { v4 as uuidv4 } from 'uuid';
 import { onMount } from 'svelte';
 let inputId = uuidv4(), focused = false, legendWidth = 0, labelElement = undefined;
@@ -16,22 +16,13 @@ function handleBlur() {
 $: if (!!labelElement) {
     legendWidth = !value && !focused ? 0 : (labelElement.offsetWidth * 0.8) + 8;
 }
-$: cssVariables = Object.entries({
-    '--theme-color': color,
-    '--legend-width': legendWidth + 'px'
-}).filter(([key]) => key.startsWith('--'))
-    .reduce((css, [key, value]) => {
-    return `${css}${key}: ${value};`;
-}, '');
-import '$lib/common/tailwind.css';
 </script>
 
 <style>
   .input-container {
     height: 50px;
     position: relative;
-    width: var(--width, 100%);
-    --final-color: var(--theme-color, --border-color, rgb(88, 88, 88));
+    --textfield-final-color: var(--textfield-theme-color, --textfield-border-color, rgb(88, 88, 88));
   }
 
   /* outlined input */
@@ -39,7 +30,6 @@ import '$lib/common/tailwind.css';
   .input-outlined {
     border: 0px solid;
     box-sizing: border-box;
-    color: var(--color, black);
     font-size: 18px;
     height: 100%;
     outline: 0;
@@ -49,18 +39,17 @@ import '$lib/common/tailwind.css';
   }
 
   .fieldset-outlined {
-    border-radius: var(--border-radius, 5px);
     border: 1px solid rgb(122, 122, 122);
     padding-left: 4px;
   }
 
   .focused .fieldset-outlined {
-    border: 1px solid var(--final-color);
-    color: var(--final-color);
+    border: 1px solid var(--textfield-final-color);
+    color: var(--textfield-final-color);
   }
 
   .legend-outlined {
-    width: var(--legend-width);
+    width: var(--textfield-legend-width);
     padding: 0px;
     transition: width 0.3s, color 0.1s;
   }
@@ -85,9 +74,8 @@ import '$lib/common/tailwind.css';
   /* boxed input */
 
   .fieldset-boxed {
-    border: 2px solid var(--final-color);
+    border: 2px solid var(--textfield-final-color);
     padding: 5px;
-    border-radius: var(--border-radius, 0);
   }
 
   .input-boxed {
@@ -103,7 +91,7 @@ import '$lib/common/tailwind.css';
   }
 
   .input-boxed::placeholder {
-    color: var(--final-color);
+    color: var(--textfield-final-color);
     opacity: 60%;
   }
 
@@ -111,13 +99,18 @@ import '$lib/common/tailwind.css';
 
 
 <div 
+  style:width={width}
+  style:--textfield-theme-color={color}
+  style:--textfield-border-color={borderColor}
+  style:--textfield-legend-width={legendWidth + 'px'}
   class="input-container" 
-  style={cssVariables}
   class:focused={focused}
   class:texted={focused || !!value}
 >
   <fieldset 
-    aria-hidden="true" 
+    aria-hidden="true"
+    style:border-radius={borderRadius}
+    style:border-color={borderColor}
     class="fieldset"
     class:fieldset-outlined={variant == 'outlined'}
     class:fieldset-boxed={variant == 'boxed'}
@@ -129,11 +122,18 @@ import '$lib/common/tailwind.css';
           class="label-outlined"
           bind:this={labelElement}
         >{label}</label>
-        <div class="flex content-center relative bottom-2 ml-2 mr-2">
+        <div 
+          style:display="flex"
+          style:position="relative"
+          style:bottom="8px"
+          style:margin-left="8px"
+          style:margin-right="8px"
+        >
           <div>
             <slot name="prepend-inner"></slot>
           </div>
           <input 
+            style:color={textColor}
             id={inputId} 
             class="input-outlined"
             type="text"
@@ -151,11 +151,14 @@ import '$lib/common/tailwind.css';
           </div>
         </div>
     {:else if variant == 'boxed'}
-      <div class="flex">
+      <div 
+        style:display="flex"
+      >
         <div>
           <slot name="prepend-inner"></slot>
         </div>
         <input
+          style:color={textColor}
           id={inputId}
           class="input-boxed"
           type="text"

package/forms/{TextField.svelte.d.ts → Textfield.svelte.d.ts}

@@ -1,5 +1,4 @@
 import { SvelteComponentTyped } from "svelte";
-import '$lib/common/tailwind.css';
 declare const __propDef: {
     props: {
         label?: string;
@@ -7,6 +6,10 @@ declare const __propDef: {
         color?: string;
         value?: string;
         variant?: "outlined" | "boxed";
+        width?: string;
+        textColor?: string;
+        borderRadius?: string;
+        borderColor?: string;
     };
     events: {
         change: Event;
@@ -21,9 +24,9 @@ declare const __propDef: {
         'append-inner': {};
     };
 };
-export declare type TextFieldProps = typeof __propDef.props;
-export declare type TextFieldEvents = typeof __propDef.events;
-export declare type TextFieldSlots = typeof __propDef.slots;
-export default class TextField extends SvelteComponentTyped<TextFieldProps, TextFieldEvents, TextFieldSlots> {
+export declare type TextfieldProps = typeof __propDef.props;
+export declare type TextfieldEvents = typeof __propDef.events;
+export declare type TextfieldSlots = typeof __propDef.slots;
+export default class Textfield extends SvelteComponentTyped<TextfieldProps, TextfieldEvents, TextfieldSlots> {
 }
 export {};

package/index.d.ts

@@ -2,7 +2,7 @@ export { default as Button } from './buttons/Button.svelte';
 export { default as Card } from './common/Card.svelte';
 export { default as Gesture } from './common/Gesture.svelte';
 export { default as IntersectionObserver } from './common/IntersectionObserver.svelte';
-export { default as TextField } from './forms/TextField.svelte';
+export { default as TextField } from './forms/Textfield.svelte';
 export { default as Skeleton } from './loaders/Skeleton.svelte';
 export { default as AttachmentDownloader } from './media/AttachmentDownloader.svelte';
 export { default as Avatar } from './media/Avatar.svelte';

package/index.js

@@ -5,7 +5,7 @@ export { default as Card } from './common/Card.svelte';
 export { default as Gesture } from './common/Gesture.svelte';
 export { default as IntersectionObserver } from './common/IntersectionObserver.svelte';
 // forms
-export { default as TextField } from './forms/TextField.svelte';
+export { default as TextField } from './forms/Textfield.svelte';
 // loaders
 export { default as Skeleton } from './loaders/Skeleton.svelte';
 // media

package/loaders/Skeleton.svelte

@@ -1,28 +1,37 @@
-<script >export let sections = [], maxWidth = undefined, maxHeight = undefined, minWidth = undefined, minHeight = undefined, padding = '10px', width = undefined, height = undefined, dark = false;
-$: cssVariables = Object.entries({
-    '--max-width': maxWidth,
-    '--max-height': maxHeight,
-    '--min-width': minWidth,
-    '--min-height': minHeight,
-    '--width': width,
-    '--height': height,
-    '--padding': padding,
-    '--card-background': dark ? '#000000' : '#fff',
-    '--element-background': dark ? '#1a1a1a' : '#eee',
-    '--animation-color': dark ? '#000000e6' : '#ffffffe6',
-}).filter(([key]) => key.startsWith('--'))
-    .reduce((css, [key, value]) => {
-    return `${css}${key}: ${value};`;
-}, '');
-import '$lib/common/tailwind.css';
+<script  context="module">export {};
 </script>
 
-<div class="card" style={cssVariables}>
+<script >export let sections = [], maxWidth = undefined, maxHeight = undefined, minWidth = undefined, minHeight = undefined, width = "100%", height = "100%", padding = '10px', dark = false;
+$: widthLessPadding = `calc(${width} - (${padding} * 2))`;
+$: heightLessPadding = `calc(${height} - (${padding} * 2))`;
+$: maxWidthLessPadding = `calc(${maxWidth} - (${padding} * 2))`;
+$: maxHeightLessPadding = `calc(${maxHeight} - (${padding} * 2))`;
+$: minWidthLessPadding = `calc(${minWidth} - (${padding} * 2))`;
+$: minHeightLessPadding = `calc(${minHeight} - (${padding} * 2))`;
+$: elementBackground = dark ? '#1a1a1a' : '#eee';
+$: animationBackground = dark ? '#000000e6' : '#ffffffe6';
+$: cardBackground = dark ? '#000000' : '#fff';
+</script>
+
+
+<div 
+  style:--skeleton-card-background={cardBackground}
+  style:--skeleton-animation-color={animationBackground}
+  style:width={widthLessPadding}
+  style:height={heightLessPadding}
+  style:max-width={maxWidthLessPadding}
+  style:max-height={maxHeightLessPadding}
+  style:min-width={minWidthLessPadding}
+  style:min-height={minHeightLessPadding}
+  style:padding={padding}
+  class="card"
+>
   {#each sections as section}
     {#if section.type == 'image'}
       <div 
+        style:height={section.height}
+        style:background={elementBackground}
         class="skeleton-image"
-        style="height: {section.height}"
       ></div>
     {/if}
   {/each}
@@ -30,7 +39,6 @@ import '$lib/common/tailwind.css';
 
 <style>
   .skeleton-image {
-    background: var(--element-background);
     margin-bottom: 10px;
     border-radius: 5px;
     overflow: hidden;
@@ -38,17 +46,10 @@ import '$lib/common/tailwind.css';
   }
   
   .card {
-    background: var(--card-background);
+    background: var(--skeleton-card-background);
     position: relative;
-    padding: var(--padding);
     border-radius: 5px;
     box-shadow: 0 10px 100px rgba(0, 0, 0, 0.1);
-    width: calc(var(--width) - (var(--padding) * 2));
-    height: calc(var(--height) - (var(--padding) * 2));
-    max-width: calc(var(--max-width) - (var(--padding) * 2));
-    max-height: calc(var(--max-height) - (var(--padding) * 2));
-    min-width: calc(var(--min-width) - (var(--padding) * 2));
-    min-height: calc(var(--min-height) - (var(--padding) * 2));
     overflow: hidden;
   }
 
@@ -67,7 +68,7 @@ import '$lib/common/tailwind.css';
     background: linear-gradient(
       90deg,
       transparent,
-      var(--animation-color),
+      var(--skeleton-animation-color),
       transparent
     );
     width: 50%;

package/loaders/Skeleton.svelte.d.ts

@@ -1,6 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type { SectionType } from './sectionType';
-import '$lib/common/tailwind.css';
+export declare type SectionType = "image" | "text";
 declare const __propDef: {
     props: {
         sections?: {
@@ -11,9 +10,9 @@ declare const __propDef: {
         maxHeight?: string;
         minWidth?: string;
         minHeight?: string;
-        padding?: string;
         width?: string;
         height?: string;
+        padding?: string;
         dark?: boolean;
     };
     events: {

package/media/Carousel.svelte

@@ -1,18 +1,13 @@
 <script >import { onMount } from 'svelte';
-export let images = [];
-let container, width = '0px', height = '0px';
+export let images = [], maxWidth = undefined, maxHeight = undefined, minWidth = undefined, minHeight = undefined, width = "100%", height = "100%";
+let container, localWidth = '0px', localHeight = '0px';
 onMount(() => {
     calculateWidthAndHeight();
 });
 function calculateWidthAndHeight() {
-    width = container.offsetWidth + 'px';
-    height = container.offsetHeight + 'px';
+    localWidth = container.offsetWidth + 'px';
+    localHeight = container.offsetHeight + 'px';
 }
-$: cssVariables = Object.entries({}).filter(([key]) => key.startsWith('--'))
-    .reduce((css, [key, value]) => {
-    return `${css}${key}: ${value};`;
-}, '');
-import '$lib/common/tailwind.css';
 import Image from './Image.svelte';
 </script>
 
@@ -22,9 +17,16 @@ import Image from './Image.svelte';
 
 
 <div 
-  style={cssVariables} 
+  style:max-width={maxWidth}
+  style:max-height={maxHeight}
+  style:min-width={minWidth}
+  style:min-height={minHeight}
+  style:width={width}
+  style:height={height}
+  style:display="flex"
+  style:flex-wrap="no-wrap"
   bind:this={container}
-  class="container flex flex-nowrap"
+  class="container"
 >
   {#each images as image}
     <div class="image-container">
@@ -34,9 +36,9 @@ import Image from './Image.svelte';
         description={image.description}
         disableHover={true}
         showSkeletonLoader={false}
-        minWidth={width}
-        width={width}
-        height={height}
+        minWidth={localWidth}
+        width={localWidth}
+        height={localHeight}
         imageContain={true}
         imageCover={false}
       />
@@ -46,12 +48,6 @@ import Image from './Image.svelte';
 
 <style>
   .container {
-    height: var(--height);
-    width: var(--width);
-    max-height: var(--max-height);
-    max-width: var(--max-width);
-    min-height: var(--min-height);
-    min-width: var(--min-width);
     overflow-x: scroll;
     scroll-snap-type: x mandatory;
     -ms-overflow-style: none;  /* Internet Explorer 10+ */

package/media/Carousel.svelte.d.ts

@@ -1,5 +1,4 @@
 import { SvelteComponentTyped } from "svelte";
-import '$lib/common/tailwind.css';
 declare const __propDef: {
     props: {
         images?: {
@@ -7,6 +6,12 @@ declare const __propDef: {
             title: string;
             description: string;
         }[];
+        maxWidth?: string;
+        maxHeight?: string;
+        minWidth?: string;
+        minHeight?: string;
+        width?: string;
+        height?: string;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/media/Image.svelte

@@ -1,5 +1,4 @@
-<script >import { SectionType } from "../loaders/sectionType";
-import { browser } from '$app/env';
+<script >import { browser } from '$app/env';
 export let maxWidth = undefined, maxHeight = undefined, minWidth = undefined, minHeight = undefined, width = undefined, height = undefined, borderRadius = undefined, src = undefined, title = undefined, description = undefined, dark = false, disableHover = false, showSkeletonLoader = true, imageCover = true, imageContain = false;
 const load = (src) => {
     return new Promise(async (resolve, reject) => {
@@ -16,13 +15,8 @@ const load = (src) => {
         }
     });
 };
-$: cssVariables = Object.entries({}).filter(([key]) => key.startsWith('--'))
-    .reduce((css, [key, value]) => {
-    return `${css}${key}: ${value};`;
-}, '');
 import IntersectionObserver from '../common/IntersectionObserver.svelte';
 import Skeleton from "../loaders/Skeleton.svelte";
-import '$lib/common/tailwind.css';
 </script>
 
 <div 
@@ -33,7 +27,6 @@ import '$lib/common/tailwind.css';
   style:max-height={maxHeight}
   style:min-height={minHeight}
   style:border-radius={borderRadius}
-  style={cssVariables} 
   class="image-container"
 >
   <IntersectionObserver once={true} let:intersecting={intersecting}>
@@ -43,7 +36,7 @@ import '$lib/common/tailwind.css';
           <Skeleton
             sections={[
               {
-                type: SectionType.Image,
+                type: 'image',
                 height: `100%`
               }
             ]}
@@ -82,7 +75,7 @@ import '$lib/common/tailwind.css';
         <Skeleton
           sections={[
             {
-              type: SectionType.Image,
+              type: 'image',
               height: `100%`
             }
           ]}

package/media/Image.svelte.d.ts

@@ -1,5 +1,4 @@
 import { SvelteComponentTyped } from "svelte";
-import '$lib/common/tailwind.css';
 declare const __propDef: {
     props: {
         maxWidth?: string;