@likable-hair/svelte 0.0.59 → 0.0.62

package/forms/Checkbox.svelte

@@ -13,6 +13,7 @@
   id={id}
   type="checkbox"
   bind:checked={value}
+  on:change
   disabled={disabled}
 >
 

package/forms/Checkbox.svelte.d.ts

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

package/forms/Textfield.svelte

@@ -1,6 +1,6 @@
 <script  context="module"></script>
 
-<script >export let label = "", placeholder = "", color = null, value = "", disabled = false, variant = 'outlined', width = "100%", height = "50px", maxWidth = undefined, minWidth = undefined, textColor = "black", borderWeight = "2px", borderRadius = "5px", borderColor = null, focusBorderColor = null, focusedBoxShadow = undefined, backgroundColor = null, padding = undefined, paddingLeft = undefined, paddingRight = undefined, paddingBottom = undefined, paddingTop = undefined, fontSize = undefined, type = 'text', inputElement = undefined;
+<script >export let label = "", placeholder = "", color = null, value = "", disabled = false, variant = 'outlined', width = "100%", height = "50px", maxWidth = undefined, minWidth = undefined, textColor = "black", borderWeight = "2px", borderRadius = "5px", borderColor = null, focusBorderColor = null, focusedBoxShadow = undefined, backgroundColor = null, padding = undefined, paddingLeft = undefined, paddingRight = undefined, paddingBottom = undefined, paddingTop = undefined, fontSize = undefined, type = 'text', readonly = false, inputElement = undefined;
 import { v4 as uuidv4 } from 'uuid';
 import { onMount } from 'svelte';
 let inputId = uuidv4(), focused = false, legendWidth = 0, labelElement = undefined;
@@ -166,6 +166,7 @@ $: if (!!labelElement) {
               type="password"
               placeholder={placeholder}
               disabled={disabled}
+              readonly={readonly}
               bind:value={value}
               on:change
               on:input
@@ -188,6 +189,7 @@ $: if (!!labelElement) {
               type="text"
               placeholder={placeholder}
               disabled={disabled}
+              readonly={readonly}
               bind:value={value}
               on:change
               on:input
@@ -222,6 +224,7 @@ $: if (!!labelElement) {
             type="password"
             placeholder={placeholder || label}
             disabled={disabled}
+            readonly={readonly}
             bind:value={value}
             on:change
             on:input
@@ -244,6 +247,7 @@ $: if (!!labelElement) {
             type="text"
             placeholder={placeholder || label}
             disabled={disabled}
+            readonly={readonly}
             bind:value={value}
             on:change
             on:input

package/forms/Textfield.svelte.d.ts

@@ -26,6 +26,7 @@ declare const __propDef: {
         paddingTop?: string;
         fontSize?: string;
         type?: 'text' | 'password';
+        readonly?: boolean;
         inputElement?: HTMLElement;
     };
     events: {

package/media/Gallery.svelte

@@ -1,5 +1,3 @@
-<script  context="module"></script>
-
 <script >export let images = [], columns = undefined, imageMaxWidth = undefined, imageMinWidth = undefined, imageMaxHeight = undefined, imageMinHeight = undefined, imageHeight = undefined, imageWidth = undefined, disableHover = false, dark = false;
 let selectedIndex = undefined, selectedImage = undefined;
 function handleImageClick(e) {
@@ -8,12 +6,12 @@ function handleImageClick(e) {
 $: if (selectedIndex !== undefined && selectedIndex !== null) {
     selectedImage = images[selectedIndex];
 }
-function switchNext() {
+function switchPrevious() {
     if (selectedIndex < (images.length - 1)) {
         selectedIndex++;
     }
 }
-function switchPrevious() {
+function switchNext() {
     if (selectedIndex > 0) {
         selectedIndex--;
     }

package/navigation/TabSwitcher.svelte

@@ -1,6 +1,6 @@
 <script  context="module"></script>
 
-<script >import { onMount } from 'svelte';
+<script >import { afterUpdate, onMount } from 'svelte';
 export let tabs = [], selected = undefined, mandatory = true, width = undefined, color = "rgb(51 65 85)", bookmarkColor = undefined, horizontalGuideColor = "rgb(51 65 85)", margin = "12px";
 let tabButtons = {};
 onMount(() => {
@@ -10,6 +10,9 @@ onMount(() => {
         setBookmarkPosition();
     }
 });
+afterUpdate(() => {
+    setBookmarkPosition();
+});
 import { createEventDispatcher } from 'svelte';
 const dispatch = createEventDispatcher();
 let bookmarkWidth = 0, bookmarkLeft = 0;
@@ -28,8 +31,6 @@ function setBookmarkPosition() {
         bookmarkLeft = tabButton.offsetLeft + 5;
     }
 }
-$: if (!!selected)
-    setBookmarkPosition();
 </script>
 
 <div 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@likable-hair/svelte",
   "description": "A Svelte component for likablehair",
-  "version": "0.0.59",
+  "version": "0.0.62",
   "devDependencies": {
     "@sveltejs/adapter-auto": "next",
     "@sveltejs/kit": "next",