@vtmn/svelte - npm Package Compare versions

Comparing version 0.7.2 to 0.7.3

dist/VtmnTextInput.js

@@ -68,2 +68,6 @@ (function (global, factory) {
     }
+    function listen(node, event, handler, options) {
+        node.addEventListener(event, handler, options);
+        return () => node.removeEventListener(event, handler, options);
+    }
     function attr(node, attribute, value) {
@@ -104,2 +108,5 @@ if (value == null)
     }
+    function set_input_value(input, value) {
+        input.value = value == null ? '' : value;
+    }
     function toggle_class(element, name, toggle) {
@@ -353,5 +360,5 @@ element.classList[toggle ? 'add' : 'remove'](name);
     			label = element("label");
-    			t = text(/*labelText*/ ctx[1]);
+    			t = text(/*labelText*/ ctx[2]);
     			attr(label, "class", "vtmn-text-input_label");
-    			attr(label, "for", /*identifier*/ ctx[0]);
+    			attr(label, "for", /*identifier*/ ctx[1]);
     		},
@@ -363,6 +370,6 @@ m(target, anchor) {
     		p(ctx, dirty) {
-    			if (dirty & /*labelText*/ 2) set_data(t, /*labelText*/ ctx[1]);
+    			if (dirty & /*labelText*/ 4) set_data(t, /*labelText*/ ctx[2]);
 
-    			if (dirty & /*identifier*/ 1) {
-    				attr(label, "for", /*identifier*/ ctx[0]);
+    			if (dirty & /*identifier*/ 2) {
+    				attr(label, "for", /*identifier*/ ctx[1]);
     			}
@@ -376,3 +383,3 @@ },
 
-    // (74:0) {:else}
+    // (81:0) {:else}
     function create_else_block(ctx) {
@@ -384,2 +391,4 @@ let div;
     	let span_class_value;
+    	let mounted;
+    	let dispose;
 
@@ -389,6 +398,6 @@ let input_levels = [
     		{ type: "text" },
-    		{ id: /*identifier*/ ctx[0] },
-    		{ disabled: /*disabled*/ ctx[3] },
-    		{ placeholder: /*placeholder*/ ctx[2] },
-    		/*$$restProps*/ ctx[9]
+    		{ id: /*identifier*/ ctx[1] },
+    		{ disabled: /*disabled*/ ctx[4] },
+    		{ placeholder: /*placeholder*/ ctx[3] },
+    		/*$$restProps*/ ctx[10]
     	];
@@ -409,5 +418,5 @@
     			set_attributes(input, input_data);
-    			toggle_class(input, "vtmn-text-input--valid", /*valid*/ ctx[6]);
-    			toggle_class(input, "vtmn-text-input--error", /*error*/ ctx[7]);
-    			attr(span, "class", span_class_value = /*icon*/ ctx[8] && `vtmx-${/*icon*/ ctx[8]}`);
+    			toggle_class(input, "vtmn-text-input--valid", /*valid*/ ctx[7]);
+    			toggle_class(input, "vtmn-text-input--error", /*error*/ ctx[8]);
+    			attr(span, "class", span_class_value = /*icon*/ ctx[9] && `vtmx-${/*icon*/ ctx[9]}`);
     			attr(div, "class", "vtmn-text-input_container");
@@ -419,4 +428,10 @@ },
     			if (input.autofocus) input.focus();
+    			set_input_value(input, /*value*/ ctx[0]);
     			append(div, t);
     			append(div, span);
+
+    			if (!mounted) {
+    				dispose = listen(input, "input", /*input_input_handler*/ ctx[12]);
+    				mounted = true;
+    			}
     		},
@@ -427,12 +442,16 @@ p(ctx, dirty) {
     				{ type: "text" },
-    				dirty & /*identifier*/ 1 && { id: /*identifier*/ ctx[0] },
-    				dirty & /*disabled*/ 8 && { disabled: /*disabled*/ ctx[3] },
-    				dirty & /*placeholder*/ 4 && { placeholder: /*placeholder*/ ctx[2] },
-    				dirty & /*$$restProps*/ 512 && /*$$restProps*/ ctx[9]
+    				dirty & /*identifier*/ 2 && { id: /*identifier*/ ctx[1] },
+    				dirty & /*disabled*/ 16 && { disabled: /*disabled*/ ctx[4] },
+    				dirty & /*placeholder*/ 8 && { placeholder: /*placeholder*/ ctx[3] },
+    				dirty & /*$$restProps*/ 1024 && /*$$restProps*/ ctx[10]
     			]));
 
-    			toggle_class(input, "vtmn-text-input--valid", /*valid*/ ctx[6]);
-    			toggle_class(input, "vtmn-text-input--error", /*error*/ ctx[7]);
+    			if (dirty & /*value*/ 1 && input.value !== /*value*/ ctx[0]) {
+    				set_input_value(input, /*value*/ ctx[0]);
+    			}
 
-    			if (dirty & /*icon*/ 256 && span_class_value !== (span_class_value = /*icon*/ ctx[8] && `vtmx-${/*icon*/ ctx[8]}`)) {
+    			toggle_class(input, "vtmn-text-input--valid", /*valid*/ ctx[7]);
+    			toggle_class(input, "vtmn-text-input--error", /*error*/ ctx[8]);
+
+    			if (dirty & /*icon*/ 512 && span_class_value !== (span_class_value = /*icon*/ ctx[9] && `vtmx-${/*icon*/ ctx[9]}`)) {
     				attr(span, "class", span_class_value);
@@ -443,2 +462,4 @@ }
     			if (detaching) detach(div);
+    			mounted = false;
+    			dispose();
     		}
@@ -448,12 +469,14 @@ };
 
-    // (64:0) {#if multiline}
+    // (70:0) {#if multiline}
     function create_if_block_1(ctx) {
     	let textarea;
+    	let mounted;
+    	let dispose;
 
     	let textarea_levels = [
     		{ class: "vtmn-text-input" },
-    		{ id: /*identifier*/ ctx[0] },
-    		{ disabled: /*disabled*/ ctx[3] },
-    		{ placeholder: /*placeholder*/ ctx[2] },
-    		/*$$restProps*/ ctx[9]
+    		{ id: /*identifier*/ ctx[1] },
+    		{ disabled: /*disabled*/ ctx[4] },
+    		{ placeholder: /*placeholder*/ ctx[3] },
+    		/*$$restProps*/ ctx[10]
     	];
@@ -471,4 +494,4 @@
     			set_attributes(textarea, textarea_data);
-    			toggle_class(textarea, "vtmn-text-input--error", /*error*/ ctx[7]);
-    			toggle_class(textarea, "vtmn-text-input--valid", /*valid*/ ctx[6]);
+    			toggle_class(textarea, "vtmn-text-input--error", /*error*/ ctx[8]);
+    			toggle_class(textarea, "vtmn-text-input--valid", /*valid*/ ctx[7]);
     		},
@@ -478,2 +501,8 @@ m(target, anchor) {
     			if (textarea.autofocus) textarea.focus();
+    			set_input_value(textarea, /*value*/ ctx[0]);
+
+    			if (!mounted) {
+    				dispose = listen(textarea, "input", /*textarea_input_handler*/ ctx[11]);
+    				mounted = true;
+    			}
     		},
@@ -483,13 +512,19 @@ p(ctx, dirty) {
     				{ class: "vtmn-text-input" },
-    				dirty & /*identifier*/ 1 && { id: /*identifier*/ ctx[0] },
-    				dirty & /*disabled*/ 8 && { disabled: /*disabled*/ ctx[3] },
-    				dirty & /*placeholder*/ 4 && { placeholder: /*placeholder*/ ctx[2] },
-    				dirty & /*$$restProps*/ 512 && /*$$restProps*/ ctx[9]
+    				dirty & /*identifier*/ 2 && { id: /*identifier*/ ctx[1] },
+    				dirty & /*disabled*/ 16 && { disabled: /*disabled*/ ctx[4] },
+    				dirty & /*placeholder*/ 8 && { placeholder: /*placeholder*/ ctx[3] },
+    				dirty & /*$$restProps*/ 1024 && /*$$restProps*/ ctx[10]
     			]));
 
-    			toggle_class(textarea, "vtmn-text-input--error", /*error*/ ctx[7]);
-    			toggle_class(textarea, "vtmn-text-input--valid", /*valid*/ ctx[6]);
+    			if (dirty & /*value*/ 1) {
+    				set_input_value(textarea, /*value*/ ctx[0]);
+    			}
+
+    			toggle_class(textarea, "vtmn-text-input--error", /*error*/ ctx[8]);
+    			toggle_class(textarea, "vtmn-text-input--valid", /*valid*/ ctx[7]);
     		},
     		d(detaching) {
     			if (detaching) detach(textarea);
+    			mounted = false;
+    			dispose();
     		}
@@ -499,3 +534,3 @@ };
 
-    // (89:0) {#if helperText}
+    // (97:0) {#if helperText}
     function create_if_block(ctx) {
@@ -508,5 +543,5 @@ let p;
     			p = element("p");
-    			t = text(/*helperText*/ ctx[4]);
+    			t = text(/*helperText*/ ctx[5]);
     			attr(p, "class", "vtmn-text-input_helper-text");
-    			toggle_class(p, "vtmn-text-input_helper-text--error", /*error*/ ctx[7]);
+    			toggle_class(p, "vtmn-text-input_helper-text--error", /*error*/ ctx[8]);
     		},
@@ -518,6 +553,6 @@ m(target, anchor) {
     		p(ctx, dirty) {
-    			if (dirty & /*helperText*/ 16) set_data(t, /*helperText*/ ctx[4]);
+    			if (dirty & /*helperText*/ 32) set_data(t, /*helperText*/ ctx[5]);
 
-    			if (dirty & /*error*/ 128) {
-    				toggle_class(p, "vtmn-text-input_helper-text--error", /*error*/ ctx[7]);
+    			if (dirty & /*error*/ 256) {
+    				toggle_class(p, "vtmn-text-input_helper-text--error", /*error*/ ctx[8]);
     			}
@@ -535,6 +570,6 @@ },
     	let if_block2_anchor;
-    	let if_block0 = /*labelText*/ ctx[1] && create_if_block_2(ctx);
+    	let if_block0 = /*labelText*/ ctx[2] && create_if_block_2(ctx);
 
     	function select_block_type(ctx, dirty) {
-    		if (/*multiline*/ ctx[5]) return create_if_block_1;
+    		if (/*multiline*/ ctx[6]) return create_if_block_1;
     		return create_else_block;
@@ -545,3 +580,3 @@ }
     	let if_block1 = current_block_type(ctx);
-    	let if_block2 = /*helperText*/ ctx[4] && create_if_block(ctx);
+    	let if_block2 = /*helperText*/ ctx[5] && create_if_block(ctx);
 
@@ -566,3 +601,3 @@ return {
     		p(ctx, [dirty]) {
-    			if (/*labelText*/ ctx[1]) {
+    			if (/*labelText*/ ctx[2]) {
     				if (if_block0) {
@@ -592,3 +627,3 @@ if_block0.p(ctx, dirty);
 
-    			if (/*helperText*/ ctx[4]) {
+    			if (/*helperText*/ ctx[5]) {
     				if (if_block2) {
@@ -621,3 +656,3 @@ if_block2.p(ctx, dirty);
     	const omit_props_names = [
-    		"identifier","labelText","placeholder","disabled","helperText","multiline","valid","error","icon"
+    		"identifier","labelText","placeholder","disabled","helperText","multiline","valid","error","icon","value"
     	];
@@ -635,18 +670,31 @@
     	let { icon } = $$props;
+    	let { value } = $$props;
 
+    	function textarea_input_handler() {
+    		value = this.value;
+    		$$invalidate(0, value);
+    	}
+
+    	function input_input_handler() {
+    		value = this.value;
+    		$$invalidate(0, value);
+    	}
+
     	$$self.$$set = $$new_props => {
     		$$props = assign(assign({}, $$props), exclude_internal_props($$new_props));
-    		$$invalidate(9, $$restProps = compute_rest_props($$props, omit_props_names));
-    		if ('identifier' in $$new_props) $$invalidate(0, identifier = $$new_props.identifier);
-    		if ('labelText' in $$new_props) $$invalidate(1, labelText = $$new_props.labelText);
-    		if ('placeholder' in $$new_props) $$invalidate(2, placeholder = $$new_props.placeholder);
-    		if ('disabled' in $$new_props) $$invalidate(3, disabled = $$new_props.disabled);
-    		if ('helperText' in $$new_props) $$invalidate(4, helperText = $$new_props.helperText);
-    		if ('multiline' in $$new_props) $$invalidate(5, multiline = $$new_props.multiline);
-    		if ('valid' in $$new_props) $$invalidate(6, valid = $$new_props.valid);
-    		if ('error' in $$new_props) $$invalidate(7, error = $$new_props.error);
-    		if ('icon' in $$new_props) $$invalidate(8, icon = $$new_props.icon);
+    		$$invalidate(10, $$restProps = compute_rest_props($$props, omit_props_names));
+    		if ('identifier' in $$new_props) $$invalidate(1, identifier = $$new_props.identifier);
+    		if ('labelText' in $$new_props) $$invalidate(2, labelText = $$new_props.labelText);
+    		if ('placeholder' in $$new_props) $$invalidate(3, placeholder = $$new_props.placeholder);
+    		if ('disabled' in $$new_props) $$invalidate(4, disabled = $$new_props.disabled);
+    		if ('helperText' in $$new_props) $$invalidate(5, helperText = $$new_props.helperText);
+    		if ('multiline' in $$new_props) $$invalidate(6, multiline = $$new_props.multiline);
+    		if ('valid' in $$new_props) $$invalidate(7, valid = $$new_props.valid);
+    		if ('error' in $$new_props) $$invalidate(8, error = $$new_props.error);
+    		if ('icon' in $$new_props) $$invalidate(9, icon = $$new_props.icon);
+    		if ('value' in $$new_props) $$invalidate(0, value = $$new_props.value);
     	};
 
     	return [
+    		value,
     		identifier,
@@ -661,3 +709,5 @@ labelText,
     		icon,
-    		$$restProps
+    		$$restProps,
+    		textarea_input_handler,
+    		input_input_handler
     	];
@@ -671,11 +721,12 @@ }
     		init(this, options, instance, create_fragment, safe_not_equal, {
-    			identifier: 0,
-    			labelText: 1,
-    			placeholder: 2,
-    			disabled: 3,
-    			helperText: 4,
-    			multiline: 5,
-    			valid: 6,
-    			error: 7,
-    			icon: 8
+    			identifier: 1,
+    			labelText: 2,
+    			placeholder: 3,
+    			disabled: 4,
+    			helperText: 5,
+    			multiline: 6,
+    			valid: 7,
+    			error: 8,
+    			icon: 9,
+    			value: 0
     		});
@@ -682,0 +733,0 @@ }

dist/VtmnTextInput.mjs

@@ -62,2 +62,6 @@ function noop() { }
 }
+function listen(node, event, handler, options) {
+    node.addEventListener(event, handler, options);
+    return () => node.removeEventListener(event, handler, options);
+}
 function attr(node, attribute, value) {
@@ -98,2 +102,5 @@ if (value == null)
 }
+function set_input_value(input, value) {
+    input.value = value == null ? '' : value;
+}
 function toggle_class(element, name, toggle) {
@@ -347,5 +354,5 @@ element.classList[toggle ? 'add' : 'remove'](name);
 			label = element("label");
-			t = text(/*labelText*/ ctx[1]);
+			t = text(/*labelText*/ ctx[2]);
 			attr(label, "class", "vtmn-text-input_label");
-			attr(label, "for", /*identifier*/ ctx[0]);
+			attr(label, "for", /*identifier*/ ctx[1]);
 		},
@@ -357,6 +364,6 @@ m(target, anchor) {
 		p(ctx, dirty) {
-			if (dirty & /*labelText*/ 2) set_data(t, /*labelText*/ ctx[1]);
+			if (dirty & /*labelText*/ 4) set_data(t, /*labelText*/ ctx[2]);
 
-			if (dirty & /*identifier*/ 1) {
-				attr(label, "for", /*identifier*/ ctx[0]);
+			if (dirty & /*identifier*/ 2) {
+				attr(label, "for", /*identifier*/ ctx[1]);
 			}
@@ -370,3 +377,3 @@ },
 
-// (74:0) {:else}
+// (81:0) {:else}
 function create_else_block(ctx) {
@@ -378,2 +385,4 @@ let div;
 	let span_class_value;
+	let mounted;
+	let dispose;
 
@@ -383,6 +392,6 @@ let input_levels = [
 		{ type: "text" },
-		{ id: /*identifier*/ ctx[0] },
-		{ disabled: /*disabled*/ ctx[3] },
-		{ placeholder: /*placeholder*/ ctx[2] },
-		/*$$restProps*/ ctx[9]
+		{ id: /*identifier*/ ctx[1] },
+		{ disabled: /*disabled*/ ctx[4] },
+		{ placeholder: /*placeholder*/ ctx[3] },
+		/*$$restProps*/ ctx[10]
 	];
@@ -403,5 +412,5 @@
 			set_attributes(input, input_data);
-			toggle_class(input, "vtmn-text-input--valid", /*valid*/ ctx[6]);
-			toggle_class(input, "vtmn-text-input--error", /*error*/ ctx[7]);
-			attr(span, "class", span_class_value = /*icon*/ ctx[8] && `vtmx-${/*icon*/ ctx[8]}`);
+			toggle_class(input, "vtmn-text-input--valid", /*valid*/ ctx[7]);
+			toggle_class(input, "vtmn-text-input--error", /*error*/ ctx[8]);
+			attr(span, "class", span_class_value = /*icon*/ ctx[9] && `vtmx-${/*icon*/ ctx[9]}`);
 			attr(div, "class", "vtmn-text-input_container");
@@ -413,4 +422,10 @@ },
 			if (input.autofocus) input.focus();
+			set_input_value(input, /*value*/ ctx[0]);
 			append(div, t);
 			append(div, span);
+
+			if (!mounted) {
+				dispose = listen(input, "input", /*input_input_handler*/ ctx[12]);
+				mounted = true;
+			}
 		},
@@ -421,12 +436,16 @@ p(ctx, dirty) {
 				{ type: "text" },
-				dirty & /*identifier*/ 1 && { id: /*identifier*/ ctx[0] },
-				dirty & /*disabled*/ 8 && { disabled: /*disabled*/ ctx[3] },
-				dirty & /*placeholder*/ 4 && { placeholder: /*placeholder*/ ctx[2] },
-				dirty & /*$$restProps*/ 512 && /*$$restProps*/ ctx[9]
+				dirty & /*identifier*/ 2 && { id: /*identifier*/ ctx[1] },
+				dirty & /*disabled*/ 16 && { disabled: /*disabled*/ ctx[4] },
+				dirty & /*placeholder*/ 8 && { placeholder: /*placeholder*/ ctx[3] },
+				dirty & /*$$restProps*/ 1024 && /*$$restProps*/ ctx[10]
 			]));
 
-			toggle_class(input, "vtmn-text-input--valid", /*valid*/ ctx[6]);
-			toggle_class(input, "vtmn-text-input--error", /*error*/ ctx[7]);
+			if (dirty & /*value*/ 1 && input.value !== /*value*/ ctx[0]) {
+				set_input_value(input, /*value*/ ctx[0]);
+			}
 
-			if (dirty & /*icon*/ 256 && span_class_value !== (span_class_value = /*icon*/ ctx[8] && `vtmx-${/*icon*/ ctx[8]}`)) {
+			toggle_class(input, "vtmn-text-input--valid", /*valid*/ ctx[7]);
+			toggle_class(input, "vtmn-text-input--error", /*error*/ ctx[8]);
+
+			if (dirty & /*icon*/ 512 && span_class_value !== (span_class_value = /*icon*/ ctx[9] && `vtmx-${/*icon*/ ctx[9]}`)) {
 				attr(span, "class", span_class_value);
@@ -437,2 +456,4 @@ }
 			if (detaching) detach(div);
+			mounted = false;
+			dispose();
 		}
@@ -442,12 +463,14 @@ };
 
-// (64:0) {#if multiline}
+// (70:0) {#if multiline}
 function create_if_block_1(ctx) {
 	let textarea;
+	let mounted;
+	let dispose;
 
 	let textarea_levels = [
 		{ class: "vtmn-text-input" },
-		{ id: /*identifier*/ ctx[0] },
-		{ disabled: /*disabled*/ ctx[3] },
-		{ placeholder: /*placeholder*/ ctx[2] },
-		/*$$restProps*/ ctx[9]
+		{ id: /*identifier*/ ctx[1] },
+		{ disabled: /*disabled*/ ctx[4] },
+		{ placeholder: /*placeholder*/ ctx[3] },
+		/*$$restProps*/ ctx[10]
 	];
@@ -465,4 +488,4 @@
 			set_attributes(textarea, textarea_data);
-			toggle_class(textarea, "vtmn-text-input--error", /*error*/ ctx[7]);
-			toggle_class(textarea, "vtmn-text-input--valid", /*valid*/ ctx[6]);
+			toggle_class(textarea, "vtmn-text-input--error", /*error*/ ctx[8]);
+			toggle_class(textarea, "vtmn-text-input--valid", /*valid*/ ctx[7]);
 		},
@@ -472,2 +495,8 @@ m(target, anchor) {
 			if (textarea.autofocus) textarea.focus();
+			set_input_value(textarea, /*value*/ ctx[0]);
+
+			if (!mounted) {
+				dispose = listen(textarea, "input", /*textarea_input_handler*/ ctx[11]);
+				mounted = true;
+			}
 		},
@@ -477,13 +506,19 @@ p(ctx, dirty) {
 				{ class: "vtmn-text-input" },
-				dirty & /*identifier*/ 1 && { id: /*identifier*/ ctx[0] },
-				dirty & /*disabled*/ 8 && { disabled: /*disabled*/ ctx[3] },
-				dirty & /*placeholder*/ 4 && { placeholder: /*placeholder*/ ctx[2] },
-				dirty & /*$$restProps*/ 512 && /*$$restProps*/ ctx[9]
+				dirty & /*identifier*/ 2 && { id: /*identifier*/ ctx[1] },
+				dirty & /*disabled*/ 16 && { disabled: /*disabled*/ ctx[4] },
+				dirty & /*placeholder*/ 8 && { placeholder: /*placeholder*/ ctx[3] },
+				dirty & /*$$restProps*/ 1024 && /*$$restProps*/ ctx[10]
 			]));
 
-			toggle_class(textarea, "vtmn-text-input--error", /*error*/ ctx[7]);
-			toggle_class(textarea, "vtmn-text-input--valid", /*valid*/ ctx[6]);
+			if (dirty & /*value*/ 1) {
+				set_input_value(textarea, /*value*/ ctx[0]);
+			}
+
+			toggle_class(textarea, "vtmn-text-input--error", /*error*/ ctx[8]);
+			toggle_class(textarea, "vtmn-text-input--valid", /*valid*/ ctx[7]);
 		},
 		d(detaching) {
 			if (detaching) detach(textarea);
+			mounted = false;
+			dispose();
 		}
@@ -493,3 +528,3 @@ };
 
-// (89:0) {#if helperText}
+// (97:0) {#if helperText}
 function create_if_block(ctx) {
@@ -502,5 +537,5 @@ let p;
 			p = element("p");
-			t = text(/*helperText*/ ctx[4]);
+			t = text(/*helperText*/ ctx[5]);
 			attr(p, "class", "vtmn-text-input_helper-text");
-			toggle_class(p, "vtmn-text-input_helper-text--error", /*error*/ ctx[7]);
+			toggle_class(p, "vtmn-text-input_helper-text--error", /*error*/ ctx[8]);
 		},
@@ -512,6 +547,6 @@ m(target, anchor) {
 		p(ctx, dirty) {
-			if (dirty & /*helperText*/ 16) set_data(t, /*helperText*/ ctx[4]);
+			if (dirty & /*helperText*/ 32) set_data(t, /*helperText*/ ctx[5]);
 
-			if (dirty & /*error*/ 128) {
-				toggle_class(p, "vtmn-text-input_helper-text--error", /*error*/ ctx[7]);
+			if (dirty & /*error*/ 256) {
+				toggle_class(p, "vtmn-text-input_helper-text--error", /*error*/ ctx[8]);
 			}
@@ -529,6 +564,6 @@ },
 	let if_block2_anchor;
-	let if_block0 = /*labelText*/ ctx[1] && create_if_block_2(ctx);
+	let if_block0 = /*labelText*/ ctx[2] && create_if_block_2(ctx);
 
 	function select_block_type(ctx, dirty) {
-		if (/*multiline*/ ctx[5]) return create_if_block_1;
+		if (/*multiline*/ ctx[6]) return create_if_block_1;
 		return create_else_block;
@@ -539,3 +574,3 @@ }
 	let if_block1 = current_block_type(ctx);
-	let if_block2 = /*helperText*/ ctx[4] && create_if_block(ctx);
+	let if_block2 = /*helperText*/ ctx[5] && create_if_block(ctx);
 
@@ -560,3 +595,3 @@ return {
 		p(ctx, [dirty]) {
-			if (/*labelText*/ ctx[1]) {
+			if (/*labelText*/ ctx[2]) {
 				if (if_block0) {
@@ -586,3 +621,3 @@ if_block0.p(ctx, dirty);
 
-			if (/*helperText*/ ctx[4]) {
+			if (/*helperText*/ ctx[5]) {
 				if (if_block2) {
@@ -615,3 +650,3 @@ if_block2.p(ctx, dirty);
 	const omit_props_names = [
-		"identifier","labelText","placeholder","disabled","helperText","multiline","valid","error","icon"
+		"identifier","labelText","placeholder","disabled","helperText","multiline","valid","error","icon","value"
 	];
@@ -629,18 +664,31 @@
 	let { icon } = $$props;
+	let { value } = $$props;
 
+	function textarea_input_handler() {
+		value = this.value;
+		$$invalidate(0, value);
+	}
+
+	function input_input_handler() {
+		value = this.value;
+		$$invalidate(0, value);
+	}
+
 	$$self.$$set = $$new_props => {
 		$$props = assign(assign({}, $$props), exclude_internal_props($$new_props));
-		$$invalidate(9, $$restProps = compute_rest_props($$props, omit_props_names));
-		if ('identifier' in $$new_props) $$invalidate(0, identifier = $$new_props.identifier);
-		if ('labelText' in $$new_props) $$invalidate(1, labelText = $$new_props.labelText);
-		if ('placeholder' in $$new_props) $$invalidate(2, placeholder = $$new_props.placeholder);
-		if ('disabled' in $$new_props) $$invalidate(3, disabled = $$new_props.disabled);
-		if ('helperText' in $$new_props) $$invalidate(4, helperText = $$new_props.helperText);
-		if ('multiline' in $$new_props) $$invalidate(5, multiline = $$new_props.multiline);
-		if ('valid' in $$new_props) $$invalidate(6, valid = $$new_props.valid);
-		if ('error' in $$new_props) $$invalidate(7, error = $$new_props.error);
-		if ('icon' in $$new_props) $$invalidate(8, icon = $$new_props.icon);
+		$$invalidate(10, $$restProps = compute_rest_props($$props, omit_props_names));
+		if ('identifier' in $$new_props) $$invalidate(1, identifier = $$new_props.identifier);
+		if ('labelText' in $$new_props) $$invalidate(2, labelText = $$new_props.labelText);
+		if ('placeholder' in $$new_props) $$invalidate(3, placeholder = $$new_props.placeholder);
+		if ('disabled' in $$new_props) $$invalidate(4, disabled = $$new_props.disabled);
+		if ('helperText' in $$new_props) $$invalidate(5, helperText = $$new_props.helperText);
+		if ('multiline' in $$new_props) $$invalidate(6, multiline = $$new_props.multiline);
+		if ('valid' in $$new_props) $$invalidate(7, valid = $$new_props.valid);
+		if ('error' in $$new_props) $$invalidate(8, error = $$new_props.error);
+		if ('icon' in $$new_props) $$invalidate(9, icon = $$new_props.icon);
+		if ('value' in $$new_props) $$invalidate(0, value = $$new_props.value);
 	};
 
 	return [
+		value,
 		identifier,
@@ -655,3 +703,5 @@ labelText,
 		icon,
-		$$restProps
+		$$restProps,
+		textarea_input_handler,
+		input_input_handler
 	];
@@ -665,11 +715,12 @@ }
 		init(this, options, instance, create_fragment, safe_not_equal, {
-			identifier: 0,
-			labelText: 1,
-			placeholder: 2,
-			disabled: 3,
-			helperText: 4,
-			multiline: 5,
-			valid: 6,
-			error: 7,
-			icon: 8
+			identifier: 1,
+			labelText: 2,
+			placeholder: 3,
+			disabled: 4,
+			helperText: 5,
+			multiline: 6,
+			valid: 7,
+			error: 8,
+			icon: 9,
+			value: 0
 		});
@@ -676,0 +727,0 @@ }

package.json

 {
   "name": "@vtmn/svelte",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "description": "Decathlon Design System - Vitamin Svelte library",
@@ -52,3 +52,3 @@ "keywords": [
   ],
-  "gitHead": "e6ee4e95e0e6a7f4e95c997516554da58d1d7e9f"
+  "gitHead": "106c21a8f2287054e12b714df72a8eef22fb1f25"
 }

src/components/VtmnTextInput.svelte

@@ -59,2 +59,8 @@ <script>
   export let icon;
+
+  /**
+   * The value of the input
+   * @type {string}
+   */
+  export let value;
 </script>
@@ -67,2 +73,3 @@
   <textarea
+    bind:value
     class="vtmn-text-input"
@@ -79,2 +86,3 @@ class:vtmn-text-input--error={error}
     <input
+      bind:value
       class="vtmn-text-input"
@@ -81,0 +89,0 @@ class:vtmn-text-input--valid={valid}

No alert changes

Improved metrics

Total package byte prevSize

158348

1.84%

Lines of code

4357

2.11%

No dependency changes