@iroco/ui 0.20.0 → 0.21.0

package/lib/index.mjs

@@ -645,7 +645,7 @@ function create_if_block_2$1(ctx) {
 	return {
 		c() {
 			label_1 = element("label");
-			t = text(/*label*/ ctx[2]);
+			t = text(/*label*/ ctx[3]);
 			attr(label_1, "class", "iroco-ui-label svelte-1r94s7");
 			attr(label_1, "for", /*id*/ ctx[1]);
 		},
@@ -654,7 +654,7 @@ function create_if_block_2$1(ctx) {
 			append(label_1, t);
 		},
 		p(ctx, dirty) {
-			if (dirty & /*label*/ 4) set_data(t, /*label*/ ctx[2]);
+			if (dirty & /*label*/ 8) set_data(t, /*label*/ ctx[3]);
 
 			if (dirty & /*id*/ 2) {
 				attr(label_1, "for", /*id*/ ctx[1]);
@@ -666,12 +666,12 @@ function create_if_block_2$1(ctx) {
 	};
 }
 
-// (41:1) {#if error != null}
+// (43:1) {#if error != null}
 function create_if_block$4(ctx) {
 	let p;
 
 	function select_block_type(ctx, dirty) {
-		if (/*htmlError*/ ctx[5]) return create_if_block_1$2;
+		if (/*htmlError*/ ctx[6]) return create_if_block_1$2;
 		return create_else_block$2;
 	}
 
@@ -709,9 +709,9 @@ function create_if_block$4(ctx) {
 	};
 }
 
-// (45:3) {:else}
+// (47:3) {:else}
 function create_else_block$2(ctx) {
-	let t_value = (/*error*/ ctx[4] !== null ? /*error*/ ctx[4] : "") + "";
+	let t_value = (/*error*/ ctx[5] !== null ? /*error*/ ctx[5] : "") + "";
 	let t;
 
 	return {
@@ -722,7 +722,7 @@ function create_else_block$2(ctx) {
 			insert(target, t, anchor);
 		},
 		p(ctx, dirty) {
-			if (dirty & /*error*/ 16 && t_value !== (t_value = (/*error*/ ctx[4] !== null ? /*error*/ ctx[4] : "") + "")) set_data(t, t_value);
+			if (dirty & /*error*/ 32 && t_value !== (t_value = (/*error*/ ctx[5] !== null ? /*error*/ ctx[5] : "") + "")) set_data(t, t_value);
 		},
 		d(detaching) {
 			if (detaching) detach(t);
@@ -730,10 +730,10 @@ function create_else_block$2(ctx) {
 	};
 }
 
-// (43:3) {#if htmlError}
+// (45:3) {#if htmlError}
 function create_if_block_1$2(ctx) {
 	let html_tag;
-	let raw_value = (/*error*/ ctx[4] !== null ? /*error*/ ctx[4] : "") + "";
+	let raw_value = (/*error*/ ctx[5] !== null ? /*error*/ ctx[5] : "") + "";
 	let html_anchor;
 
 	return {
@@ -746,7 +746,7 @@ function create_if_block_1$2(ctx) {
 			insert(target, html_anchor, anchor);
 		},
 		p(ctx, dirty) {
-			if (dirty & /*error*/ 16 && raw_value !== (raw_value = (/*error*/ ctx[4] !== null ? /*error*/ ctx[4] : "") + "")) html_tag.p(raw_value);
+			if (dirty & /*error*/ 32 && raw_value !== (raw_value = (/*error*/ ctx[5] !== null ? /*error*/ ctx[5] : "") + "")) html_tag.p(raw_value);
 		},
 		d(detaching) {
 			if (detaching) detach(html_anchor);
@@ -762,8 +762,8 @@ function create_fragment$h(ctx) {
 	let t1;
 	let mounted;
 	let dispose;
-	let if_block0 = /*label*/ ctx[2] && create_if_block_2$1(ctx);
-	let if_block1 = /*error*/ ctx[4] != null && create_if_block$4(ctx);
+	let if_block0 = /*label*/ ctx[3] && create_if_block_2$1(ctx);
+	let if_block1 = /*error*/ ctx[5] != null && create_if_block$4(ctx);
 
 	return {
 		c() {
@@ -775,12 +775,13 @@ function create_fragment$h(ctx) {
 			if (if_block1) if_block1.c();
 			attr(input, "id", /*id*/ ctx[1]);
 			attr(input, "type", "text");
-			attr(input, "placeholder", /*placeholder*/ ctx[3]);
-			input.readOnly = /*readonly*/ ctx[8];
+			attr(input, "name", /*name*/ ctx[2]);
+			attr(input, "placeholder", /*placeholder*/ ctx[4]);
+			input.readOnly = /*readonly*/ ctx[9];
 			attr(input, "class", "svelte-1r94s7");
-			toggle_class(input, "border", /*border*/ ctx[9]);
-			toggle_class(input, "error", /*error*/ ctx[4] !== null);
-			toggle_class(input, "readonlyInput", /*readonly*/ ctx[8] == true);
+			toggle_class(input, "border", /*border*/ ctx[10]);
+			toggle_class(input, "error", /*error*/ ctx[5] !== null);
+			toggle_class(input, "readonlyInput", /*readonly*/ ctx[9] == true);
 			attr(div, "class", "iroco-ui-input svelte-1r94s7");
 		},
 		m(target, anchor) {
@@ -794,15 +795,15 @@ function create_fragment$h(ctx) {
 
 			if (!mounted) {
 				dispose = [
-					listen(input, "input", /*input_handler*/ ctx[13]),
-					listen(input, "input", /*input_input_handler*/ ctx[14]),
+					listen(input, "input", /*input_handler*/ ctx[14]),
+					listen(input, "input", /*input_input_handler*/ ctx[15]),
 					listen(input, "focus", function () {
-						if (is_function(/*onFocus*/ ctx[6])) /*onFocus*/ ctx[6].apply(this, arguments);
+						if (is_function(/*onFocus*/ ctx[7])) /*onFocus*/ ctx[7].apply(this, arguments);
 					}),
 					listen(input, "blur", function () {
-						if (is_function(/*onBlur*/ ctx[7])) /*onBlur*/ ctx[7].apply(this, arguments);
+						if (is_function(/*onBlur*/ ctx[8])) /*onBlur*/ ctx[8].apply(this, arguments);
 					}),
-					action_destroyer(/*typeAction*/ ctx[10].call(null, input))
+					action_destroyer(/*typeAction*/ ctx[11].call(null, input))
 				];
 
 				mounted = true;
@@ -811,7 +812,7 @@ function create_fragment$h(ctx) {
 		p(new_ctx, [dirty]) {
 			ctx = new_ctx;
 
-			if (/*label*/ ctx[2]) {
+			if (/*label*/ ctx[3]) {
 				if (if_block0) {
 					if_block0.p(ctx, dirty);
 				} else {
@@ -828,31 +829,35 @@ function create_fragment$h(ctx) {
 				attr(input, "id", /*id*/ ctx[1]);
 			}
 
-			if (dirty & /*placeholder*/ 8) {
-				attr(input, "placeholder", /*placeholder*/ ctx[3]);
+			if (dirty & /*name*/ 4) {
+				attr(input, "name", /*name*/ ctx[2]);
+			}
+
+			if (dirty & /*placeholder*/ 16) {
+				attr(input, "placeholder", /*placeholder*/ ctx[4]);
 			}
 
-			if (dirty & /*readonly*/ 256) {
-				input.readOnly = /*readonly*/ ctx[8];
+			if (dirty & /*readonly*/ 512) {
+				input.readOnly = /*readonly*/ ctx[9];
 			}
 
 			if (dirty & /*value*/ 1 && input.value !== /*value*/ ctx[0]) {
 				set_input_value(input, /*value*/ ctx[0]);
 			}
 
-			if (dirty & /*border*/ 512) {
-				toggle_class(input, "border", /*border*/ ctx[9]);
+			if (dirty & /*border*/ 1024) {
+				toggle_class(input, "border", /*border*/ ctx[10]);
 			}
 
-			if (dirty & /*error*/ 16) {
-				toggle_class(input, "error", /*error*/ ctx[4] !== null);
+			if (dirty & /*error*/ 32) {
+				toggle_class(input, "error", /*error*/ ctx[5] !== null);
 			}
 
-			if (dirty & /*readonly*/ 256) {
-				toggle_class(input, "readonlyInput", /*readonly*/ ctx[8] == true);
+			if (dirty & /*readonly*/ 512) {
+				toggle_class(input, "readonlyInput", /*readonly*/ ctx[9] == true);
 			}
 
-			if (/*error*/ ctx[4] != null) {
+			if (/*error*/ ctx[5] != null) {
 				if (if_block1) {
 					if_block1.p(ctx, dirty);
 				} else {
@@ -888,6 +893,7 @@ function instance$g($$self, $$props, $$invalidate) {
 
 	let { id } = $$props;
 	let { type } = $$props;
+	let { name } = $$props;
 	let { label = null } = $$props;
 	let { placeholder } = $$props;
 	let { error = null } = $$props;
@@ -912,23 +918,25 @@ function instance$g($$self, $$props, $$invalidate) {
 	}
 
 	$$self.$$set = $$props => {
-		if ("TextType" in $$props) $$invalidate(11, TextType = $$props.TextType);
+		if ("TextType" in $$props) $$invalidate(12, TextType = $$props.TextType);
 		if ("id" in $$props) $$invalidate(1, id = $$props.id);
-		if ("type" in $$props) $$invalidate(12, type = $$props.type);
-		if ("label" in $$props) $$invalidate(2, label = $$props.label);
-		if ("placeholder" in $$props) $$invalidate(3, placeholder = $$props.placeholder);
-		if ("error" in $$props) $$invalidate(4, error = $$props.error);
-		if ("htmlError" in $$props) $$invalidate(5, htmlError = $$props.htmlError);
+		if ("type" in $$props) $$invalidate(13, type = $$props.type);
+		if ("name" in $$props) $$invalidate(2, name = $$props.name);
+		if ("label" in $$props) $$invalidate(3, label = $$props.label);
+		if ("placeholder" in $$props) $$invalidate(4, placeholder = $$props.placeholder);
+		if ("error" in $$props) $$invalidate(5, error = $$props.error);
+		if ("htmlError" in $$props) $$invalidate(6, htmlError = $$props.htmlError);
 		if ("value" in $$props) $$invalidate(0, value = $$props.value);
-		if ("onFocus" in $$props) $$invalidate(6, onFocus = $$props.onFocus);
-		if ("onBlur" in $$props) $$invalidate(7, onBlur = $$props.onBlur);
-		if ("readonly" in $$props) $$invalidate(8, readonly = $$props.readonly);
-		if ("border" in $$props) $$invalidate(9, border = $$props.border);
+		if ("onFocus" in $$props) $$invalidate(7, onFocus = $$props.onFocus);
+		if ("onBlur" in $$props) $$invalidate(8, onBlur = $$props.onBlur);
+		if ("readonly" in $$props) $$invalidate(9, readonly = $$props.readonly);
+		if ("border" in $$props) $$invalidate(10, border = $$props.border);
 	};
 
 	return [
 		value,
 		id,
+		name,
 		label,
 		placeholder,
 		error,
@@ -950,18 +958,19 @@ class TextInput extends SvelteComponent {
 		super();
 
 		init(this, options, instance$g, create_fragment$h, safe_not_equal, {
-			TextType: 11,
+			TextType: 12,
 			id: 1,
-			type: 12,
-			label: 2,
-			placeholder: 3,
-			error: 4,
-			htmlError: 5,
+			type: 13,
+			name: 2,
+			label: 3,
+			placeholder: 4,
+			error: 5,
+			htmlError: 6,
 			value: 0,
-			onFocus: 6,
-			onBlur: 7,
-			readonly: 8,
-			border: 9
+			onFocus: 7,
+			onBlur: 8,
+			readonly: 9,
+			border: 10
 		});
 	}
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iroco/ui",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "description": "Iroco design system based on Svelte",
   "main": "lib/index.js",
   "module": "lib/index.mjs",

package/src/TextInput.svelte

@@ -7,6 +7,7 @@
 
 	export let id: string;
 	export let type: TextType;
+	export let name: string;
 	export let label: string | null = null;
 	export let placeholder: string | undefined;
 	export let error: string | null = null;
@@ -33,6 +34,7 @@
 		on:blur={onBlur}
 		{id}
 		type="text"
+		name={name}
 		{placeholder}
 		class:border
 		class:error={error !== null}