@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 @@ }

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"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

158348

increased by1.84%

Lines of code

4357

increased by2.11%

Worsened metrics

Number of downloads

8185

decreased by-39.43%

No dependency changes