@likable-hair/svelte 0.0.37 → 0.0.40

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/forms/Textfield.svelte

@@ -168,6 +168,9 @@ $: if (!!labelElement) {
               on:focus
               on:blur={handleBlur}
               on:blur
+              on:keydown
+              on:keypress
+              on:keyup
             />
           {:else if type == 'text'}
             <input 
@@ -185,6 +188,9 @@ $: if (!!labelElement) {
               on:focus
               on:blur={handleBlur}
               on:blur
+              on:keydown
+              on:keypress
+              on:keyup
             />
           {/if}
           <div>
@@ -214,6 +220,9 @@ $: if (!!labelElement) {
             on:focus
             on:blur={handleBlur}
             on:blur
+            on:keydown
+              on:keypress
+              on:keyup
           />
         {:else if type == 'text'}
           <input
@@ -231,6 +240,9 @@ $: if (!!labelElement) {
             on:focus
             on:blur={handleBlur}
             on:blur
+            on:keydown
+            on:keypress
+            on:keyup
           />
         {/if}
         <div>

package/forms/Textfield.svelte.d.ts

@@ -27,6 +27,9 @@ declare const __propDef: {
         input: Event;
         focus: FocusEvent;
         blur: FocusEvent;
+        keydown: KeyboardEvent;
+        keypress: KeyboardEvent;
+        keyup: KeyboardEvent;
     } & {
         [evt: string]: CustomEvent<any>;
     };

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.37",
+  "version": "0.0.40",
   "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",