@likable-hair/svelte 0.0.31 → 0.0.32

package/buttons/Button.svelte

@@ -1,8 +1,9 @@
-<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 = '#88888847', borderRadius = undefined, boxShadow = undefined;
+<script >export let type = 'default', loading = false, 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 = '#88888847', borderRadius = undefined, boxShadow = undefined;
 export { clazz as class };
 $: defaultBorderRadius = type == 'icon' ? '50%' : '5px';
 $: position = !!$$slots.append ? 'relative' : undefined;
 import Icon from '../media/Icon.svelte';
+import CircularLoader from '../loaders/CircularLoader.svelte';
 </script>
 
 <div 
@@ -30,17 +31,24 @@ import Icon from '../media/Icon.svelte';
   class:button-icon={type === 'icon'}
   on:click
 >
-  {#if !!icon}
-    <Icon name={icon} size={iconSize}></Icon>
+  {#if loading}
+    <CircularLoader
+      color={color}
+    ></CircularLoader>
   {:else}
-    <slot></slot>
-  {/if}
-  {#if $$slots.append}
-    <span class="append-item">
-      <slot name="append">
-      </slot>
-    </span>
+    {#if !!icon}
+      <Icon name={icon} size={iconSize}></Icon>
+    {:else}
+      <slot></slot>
+    {/if}
+    {#if $$slots.append}
+      <span class="append-item">
+        <slot name="append">
+        </slot>
+      </span>
+    {/if}
   {/if}
+
 </div>
 
 <style>

package/buttons/Button.svelte.d.ts

@@ -2,6 +2,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         type?: 'default' | 'text' | 'icon';
+        loading?: boolean;
         icon?: string;
         iconSize?: number;
         class?: string;

package/index.d.ts

@@ -6,6 +6,7 @@ export { default as MediaQuery } from './common/MediaQuery.svelte';
 export { default as Dialog } from './dialogs/Dialog.svelte';
 export { default as TextField } from './forms/Textfield.svelte';
 export { default as Skeleton } from './loaders/Skeleton.svelte';
+export { default as CircularLoader } from './loaders/CircularLoader.svelte';
 export { default as AttachmentDownloader } from './media/AttachmentDownloader.svelte';
 export { default as Avatar } from './media/Avatar.svelte';
 export { default as Carousel } from './media/Carousel.svelte';

package/index.js

@@ -11,6 +11,7 @@ export { default as Dialog } from './dialogs/Dialog.svelte';
 export { default as TextField } from './forms/Textfield.svelte';
 // loaders
 export { default as Skeleton } from './loaders/Skeleton.svelte';
+export { default as CircularLoader } from './loaders/CircularLoader.svelte';
 // media
 export { default as AttachmentDownloader } from './media/AttachmentDownloader.svelte';
 export { default as Avatar } from './media/Avatar.svelte';

package/loaders/CircularLoader.svelte

@@ -0,0 +1,68 @@
+<script >export let loading = true, height = "30px", width = "30px", color = "black";
+</script>
+
+<svg 
+  xmlns="http://www.w3.org/2000/svg" 
+  viewBox="21.904761904761905 21.904761904761905 43.80952380952381 43.80952380952381" 
+  style:color={color}
+  style:height={height}
+  style:width={width}
+  class:active={loading}
+>
+  <circle 
+    fill="transparent" 
+    cx="43.80952380952381" 
+    cy="43.80952380952381" 
+    r="20" 
+    stroke-width="3.8095238095238093" 
+    stroke-dasharray="125.664" 
+    stroke-dashoffset="125.66370614359172px"
+    style:stroke="currentColor"
+    class:active={loading}
+  ></circle>
+</svg>
+
+<style>
+  circle.active {
+    -webkit-animation: progress-circular-dash 1.4s ease-in-out infinite;
+    animation: progress-circular-dash 1.4s ease-in-out infinite;
+    stroke-linecap: round;
+    stroke-dasharray: 80,200;
+    stroke-dashoffset: 0px;
+  }
+
+  svg.active {
+    animation: progress-circular-rotate 1.4s linear infinite;
+  }
+
+  @keyframes progress-circular-dash {
+    0% {
+      stroke-dasharray:1,200;
+      stroke-dashoffset:0px
+    }
+    
+    50% {
+      stroke-dasharray:100,200;
+      stroke-dashoffset:-15px
+    }
+    
+    to {
+      stroke-dasharray:100,200;
+      stroke-dashoffset:-124px
+    }
+  }
+
+  @keyframes progress-circular-rotate {
+    0% {
+      transform: rotate(0deg);
+    }
+
+    50% {
+      transform: rotate(180deg);
+    }
+
+    to {
+      transform: rotate(360deg);
+    }
+  }
+</style>

package/loaders/CircularLoader.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        loading?: boolean;
+        height?: string;
+        width?: string;
+        color?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type CircularLoaderProps = typeof __propDef.props;
+export declare type CircularLoaderEvents = typeof __propDef.events;
+export declare type CircularLoaderSlots = typeof __propDef.slots;
+export default class CircularLoader extends SvelteComponentTyped<CircularLoaderProps, CircularLoaderEvents, CircularLoaderSlots> {
+}
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@likable-hair/svelte",
   "description": "A Svelte component for likablehair",
-  "version": "0.0.31",
+  "version": "0.0.32",
   "devDependencies": {
     "@sveltejs/adapter-auto": "next",
     "@sveltejs/kit": "next",
@@ -35,6 +35,7 @@
     "./dialogs/Dialog.svelte": "./dialogs/Dialog.svelte",
     "./forms/Textfield.svelte": "./forms/Textfield.svelte",
     ".": "./index.js",
+    "./loaders/CircularLoader.svelte": "./loaders/CircularLoader.svelte",
     "./loaders/Skeleton.svelte": "./loaders/Skeleton.svelte",
     "./loaders/sectionType": "./loaders/sectionType.js",
     "./media/AttachmentDownloader.svelte": "./media/AttachmentDownloader.svelte",