@likable-hair/svelte 0.0.38 → 0.0.41

package/buttons/Button.svelte

@@ -1,4 +1,4 @@
-<script >export let type = 'default', active = false, 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, display = undefined, justifyContent = undefined, alignItems = undefined, backgroundColor = undefined, hoverBackgroundColor = '#88888847', activeBackgroundColor = hoverBackgroundColor, borderRadius = undefined, boxShadow = undefined;
+<script >export let type = 'default', active = false, 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, display = undefined, justifyContent = undefined, alignItems = undefined, backgroundColor = undefined, hoverBackgroundColor = '#88888847', activeBackgroundColor = hoverBackgroundColor, borderRadius = undefined, border = undefined, boxShadow = undefined;
 export { clazz as class };
 import { createEventDispatcher } from 'svelte';
 const dispatch = createEventDispatcher();
@@ -29,6 +29,7 @@ import CircularLoader from '../loaders/CircularLoader.svelte';
   style:display={display}
   style:justify-content={justifyContent}
   style:align-items={alignItems}
+  style:--button-border={border}
   style:--button-border-radius={!!borderRadius ? borderRadius : defaultBorderRadius}
   style:--button-background-color={active ? activeBackgroundColor : backgroundColor}
   style:--button-hover-background-color={hoverBackgroundColor}
@@ -76,7 +77,8 @@ import CircularLoader from '../loaders/CircularLoader.svelte';
     transition: background-color 200ms;
     background-color: var(--button-background-color);
     outline: 0;
-    border: 0;
+    border: var(--button-border);
+    border-color: var(--button-border-color);
     border-radius: var(--button-border-radius, 0.25rem);
     box-shadow: var(--button-box-shadow, 0 0 0.5rem rgba(0, 0, 0, 0.3));
   }
@@ -90,7 +92,7 @@ import CircularLoader from '../loaders/CircularLoader.svelte';
     text-transform: uppercase;
     font-weight: 600;
     outline: 0;
-    border: 0;
+    border: var(--button-border);
     border-radius: var(--button-border-radius, 0.25rem);
   }
 
@@ -101,7 +103,7 @@ import CircularLoader from '../loaders/CircularLoader.svelte';
   .button-icon {
     transition: background-color 200ms;
     outline: 0;
-    border: 0;
+    border: var(--button-border);
     border-radius: var(--button-border-radius, 50%);
     height: var(--button-icon-height) !important;
     width: var(--button-icon-width) !important;

package/buttons/Button.svelte.d.ts

@@ -25,6 +25,7 @@ declare const __propDef: {
         hoverBackgroundColor?: string;
         activeBackgroundColor?: string;
         borderRadius?: string;
+        border?: string;
         boxShadow?: string;
     };
     events: {

package/forms/Checkbox.svelte

@@ -0,0 +1,101 @@
+<script >export let value = false, id = undefined, disabled = false, activeColor = "#275efe", activeInnerColor = "#fff", focusShadow = "2px rgba(39, 94, 254, 0.3)", borderColor = "#bbc1e1", borderHoverColor = "#275efe", backgroundColor = "#fff", disabledColor = "#f6f8ff", disabledInnerColor = "#e1e6f9";
+</script>
+
+<input 
+  style:--checkbox-active-color={activeColor}
+  style:--checkbox-active-inner-color={activeInnerColor}
+  style:--checkbox-focus-shadow={focusShadow}
+  style:--checkbox-border-color={borderColor}
+  style:--checkbox-border-hover-color={borderHoverColor}
+  style:--checkbox-background-color={backgroundColor}
+  style:--checkbox-disabled-color={disabledColor}
+  style:--checkbox-disabled-inner-color={disabledInnerColor}
+  id={id}
+  type="checkbox"
+  checked={value}
+  disabled={disabled}
+>
+
+<style>
+  @supports (-webkit-appearance: none) or (-moz-appearance: none) {
+    input[type="checkbox"] {
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      height: 21px;
+      outline: none;
+      display: inline-block;
+      vertical-align: top;
+      position: relative;
+      margin: 0;
+      cursor: pointer;
+      border: 1px solid var(--bc, var(--checkbox-border-color));
+      background: var(--b, var(--checkbox-background-color));
+      transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
+      width: 21px;
+      border-radius: 7px;
+    }
+
+    input[type="checkbox"]:after {
+      content: "";
+      display: block;
+      position: absolute;
+      opacity: var(--o, 0);
+      transition: transform var(--d-t, 0.3s) var(--d-t-e, ease),
+        opacity var(--d-o, 0.2s);
+      width: 5px;
+      height: 9px;
+      border: 2px solid var(--checkbox-active-inner-color);
+      border-top: 0;
+      border-left: 0;
+      left: 7px;
+      top: 4px;
+      transform: rotate(var(--r, 20deg));
+      box-sizing: border-box;
+    }
+
+    input[type="checkbox"]:checked {
+      --b: var(--checkbox-active-color);
+      --bc: var(--checkbox-active-color);
+      --d-o: 0.3s;
+      --d-t: 0.6s;
+      --d-t-e: cubic-bezier(0.2, 0.85, 0.32, 1.2);
+      --o: 1;
+      --r: 43deg;
+    }
+
+    input[type="checkbox"]:disabled {
+      --b: var(--checkbox-disabled-color);
+      cursor: not-allowed;
+      opacity: 0.9;
+    }
+
+    input[type="checkbox"]:disabled:checked {
+      --b: var(--checkbox-disabled-inner-color);
+      --bc: var(--checkbox-border-color);
+      --r: 43deg;
+    }
+
+    input[type="checkbox"]:disabled + label {
+      cursor: not-allowed;
+    }
+
+    input[type="checkbox"]:hover:not(:checked):not(:disabled) {
+      --bc: var(--checkbox-border-hover-color);
+    }
+    input[type="checkbox"]:focus {
+      box-shadow: 0 0 0 var(--checkbox-focus-shadow);
+    }
+
+    input[type="checkbox"]:not(.switch):after {
+      width: 5px;
+      height: 9px;
+      border: 2px solid var(--checkbox-active-inner-color);
+      border-top: 0;
+      border-left: 0;
+      left: 7px;
+      top: 4px;
+      transform: rotate(var(--r, 20deg));
+    }
+    
+  }
+</style>

package/forms/Checkbox.svelte.d.ts

@@ -0,0 +1,26 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        value?: boolean;
+        id?: string;
+        disabled?: boolean;
+        activeColor?: string;
+        activeInnerColor?: string;
+        focusShadow?: string;
+        borderColor?: string;
+        borderHoverColor?: string;
+        backgroundColor?: string;
+        disabledColor?: string;
+        disabledInnerColor?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type CheckboxProps = typeof __propDef.props;
+export declare type CheckboxEvents = typeof __propDef.events;
+export declare type CheckboxSlots = typeof __propDef.slots;
+export default class Checkbox extends SvelteComponentTyped<CheckboxProps, CheckboxEvents, CheckboxSlots> {
+}
+export {};

package/forms/Switch.svelte

@@ -1,7 +1,7 @@
 <script >export let value = false, height = "20px", width = "40px", padding = "6px", borderRadius = "10px", toggleActiveColor = "#5c5c5c", toggleDeactiveColor = "#5c5c5c", backgroundActiveColor = "#e6e6e6", backgroundDeactiveColor = "#e6e6e6", animationDuration = "0.1s";
 </script>
 
-<span 
+<div 
   style:--switch-toggle-active-color={toggleActiveColor}
   style:--switch-toggle-deactive-color={toggleDeactiveColor}
   style:--switch-animation-duration={animationDuration}
@@ -19,12 +19,13 @@
     <input 
       bind:checked={value}
       type="checkbox"
+      on:change
     >
     <span
       class="slider"
     ></span>
   </div>
-</span>
+</div>
 
 <style>
   .container {

package/forms/Switch.svelte.d.ts

@@ -13,6 +13,8 @@ declare const __propDef: {
         animationDuration?: string;
     };
     events: {
+        change: Event;
+    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

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 Switch } from './forms/Switch.svelte';
+export { default as Checkbox } from './forms/Checkbox.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';

package/index.js

@@ -10,6 +10,7 @@ export { default as Dialog } from './dialogs/Dialog.svelte';
 // forms
 export { default as TextField } from './forms/Textfield.svelte';
 export { default as Switch } from './forms/Switch.svelte';
+export { default as Checkbox } from './forms/Checkbox.svelte';
 // loaders
 export { default as Skeleton } from './loaders/Skeleton.svelte';
 export { default as CircularLoader } from './loaders/CircularLoader.svelte';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@likable-hair/svelte",
   "description": "A Svelte component for likablehair",
-  "version": "0.0.38",
+  "version": "0.0.41",
   "devDependencies": {
     "@sveltejs/adapter-auto": "next",
     "@sveltejs/kit": "next",
@@ -37,6 +37,7 @@
     "./dates/YearSelector.svelte": "./dates/YearSelector.svelte",
     "./dates/utils": "./dates/utils.js",
     "./dialogs/Dialog.svelte": "./dialogs/Dialog.svelte",
+    "./forms/Checkbox.svelte": "./forms/Checkbox.svelte",
     "./forms/Switch.svelte": "./forms/Switch.svelte",
     "./forms/Textfield.svelte": "./forms/Textfield.svelte",
     ".": "./index.js",