@vtmn/svelte - npm Package Compare versions

Comparing version 0.3.13 to 0.4.0

dist/VtmnButton.js

@@ -83,2 +83,6 @@ (function (global, factory) {
     }
+
+    function append(target, node) {
+        target.appendChild(node);
+    }
     function insert(target, node, anchor) {
@@ -93,2 +97,8 @@ target.insertBefore(node, anchor || null);
     }
+    function text(data) {
+        return document.createTextNode(data);
+    }
+    function space() {
+        return text(' ');
+    }
     function attr(node, attribute, value) {
@@ -195,2 +205,15 @@ if (value == null)
     let outros;
+    function group_outros() {
+        outros = {
+            r: 0,
+            c: [],
+            p: outros // parent group
+        };
+    }
+    function check_outros() {
+        if (!outros.r) {
+            run_all(outros.c);
+        }
+        outros = outros.p;
+    }
     function transition_in(block, local) {
@@ -378,9 +401,135 @@ if (block && block.i) {
 
+    function create_if_block_2(ctx) {
+    	let span;
+    	let span_class_value;
+
+    	return {
+    		c() {
+    			span = element("span");
+    			attr(span, "class", span_class_value = `vtmx-${/*iconLeft*/ ctx[2]}`);
+    		},
+    		m(target, anchor) {
+    			insert(target, span, anchor);
+    		},
+    		p(ctx, dirty) {
+    			if (dirty & /*iconLeft*/ 4 && span_class_value !== (span_class_value = `vtmx-${/*iconLeft*/ ctx[2]}`)) {
+    				attr(span, "class", span_class_value);
+    			}
+    		},
+    		d(detaching) {
+    			if (detaching) detach(span);
+    		}
+    	};
+    }
+
+    // (54:2) {:else}
+    function create_else_block(ctx) {
+    	let current;
+    	const default_slot_template = /*#slots*/ ctx[7].default;
+    	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[6], null);
+
+    	return {
+    		c() {
+    			if (default_slot) default_slot.c();
+    		},
+    		m(target, anchor) {
+    			if (default_slot) {
+    				default_slot.m(target, anchor);
+    			}
+
+    			current = true;
+    		},
+    		p(ctx, dirty) {
+    			if (default_slot) {
+    				if (default_slot.p && (!current || dirty & /*$$scope*/ 64)) {
+    					update_slot(default_slot, default_slot_template, ctx, /*$$scope*/ ctx[6], dirty, null, null);
+    				}
+    			}
+    		},
+    		i(local) {
+    			if (current) return;
+    			transition_in(default_slot, local);
+    			current = true;
+    		},
+    		o(local) {
+    			transition_out(default_slot, local);
+    			current = false;
+    		},
+    		d(detaching) {
+    			if (default_slot) default_slot.d(detaching);
+    		}
+    	};
+    }
+
+    // (52:2) {#if iconAlone}
+    function create_if_block_1(ctx) {
+    	let span;
+    	let span_class_value;
+
+    	return {
+    		c() {
+    			span = element("span");
+    			attr(span, "class", span_class_value = `vtmx-${/*iconAlone*/ ctx[4]}`);
+    		},
+    		m(target, anchor) {
+    			insert(target, span, anchor);
+    		},
+    		p(ctx, dirty) {
+    			if (dirty & /*iconAlone*/ 16 && span_class_value !== (span_class_value = `vtmx-${/*iconAlone*/ ctx[4]}`)) {
+    				attr(span, "class", span_class_value);
+    			}
+    		},
+    		i: noop,
+    		o: noop,
+    		d(detaching) {
+    			if (detaching) detach(span);
+    		}
+    	};
+    }
+
+    // (57:2) {#if !iconAlone && iconRight}
+    function create_if_block(ctx) {
+    	let span;
+    	let span_class_value;
+
+    	return {
+    		c() {
+    			span = element("span");
+    			attr(span, "class", span_class_value = `vtmx-${/*iconRight*/ ctx[3]}`);
+    		},
+    		m(target, anchor) {
+    			insert(target, span, anchor);
+    		},
+    		p(ctx, dirty) {
+    			if (dirty & /*iconRight*/ 8 && span_class_value !== (span_class_value = `vtmx-${/*iconRight*/ ctx[3]}`)) {
+    				attr(span, "class", span_class_value);
+    			}
+    		},
+    		d(detaching) {
+    			if (detaching) detach(span);
+    		}
+    	};
+    }
+
     function create_fragment(ctx) {
     	let button;
+    	let t0;
+    	let current_block_type_index;
+    	let if_block1;
+    	let t1;
     	let button_class_value;
     	let current;
-    	const default_slot_template = /*#slots*/ ctx[4].default;
-    	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[3], null);
+    	let if_block0 = !/*iconAlone*/ ctx[4] && /*iconLeft*/ ctx[2] && create_if_block_2(ctx);
+    	const if_block_creators = [create_if_block_1, create_else_block];
+    	const if_blocks = [];
 
+    	function select_block_type(ctx, dirty) {
+    		if (/*iconAlone*/ ctx[4]) return 0;
+    		return 1;
+    	}
+
+    	current_block_type_index = select_block_type(ctx);
+    	if_block1 = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
+    	let if_block2 = !/*iconAlone*/ ctx[4] && /*iconRight*/ ctx[3] && create_if_block(ctx);
+
     	let button_levels = [
@@ -392,6 +541,13 @@ { type: "button" },
     				`vtmn-btn_variant--${/*variant*/ ctx[0]}`,
-    				`vtmn-btn_size--${/*size*/ ctx[1]}`
+    				`vtmn-btn_size--${/*size*/ ctx[1]}`,
+    				!/*iconAlone*/ ctx[4] && /*iconLeft*/ ctx[2]
+    				? "vtmn-btn--icon-left"
+    				: "",
+    				!/*iconAlone*/ ctx[4] && /*iconRight*/ ctx[3]
+    				? "vtmn-btn--icon-right"
+    				: "",
+    				/*iconAlone*/ ctx[4] ? "vtmn-btn--icon-alone" : ""
     			].join(" ")
     		},
-    		/*$$restProps*/ ctx[2]
+    		/*$$restProps*/ ctx[5]
     	];
@@ -408,3 +564,7 @@
     			button = element("button");
-    			if (default_slot) default_slot.c();
+    			if (if_block0) if_block0.c();
+    			t0 = space();
+    			if_block1.c();
+    			t1 = space();
+    			if (if_block2) if_block2.c();
     			set_attributes(button, button_data);
@@ -414,24 +574,77 @@ },
     			insert(target, button, anchor);
-
-    			if (default_slot) {
-    				default_slot.m(button, null);
-    			}
-
+    			if (if_block0) if_block0.m(button, null);
+    			append(button, t0);
+    			if_blocks[current_block_type_index].m(button, null);
+    			append(button, t1);
+    			if (if_block2) if_block2.m(button, null);
     			current = true;
     		},
     		p(ctx, [dirty]) {
-    			if (default_slot) {
-    				if (default_slot.p && (!current || dirty & /*$$scope*/ 8)) {
-    					update_slot(default_slot, default_slot_template, ctx, /*$$scope*/ ctx[3], dirty, null, null);
+    			if (!/*iconAlone*/ ctx[4] && /*iconLeft*/ ctx[2]) {
+    				if (if_block0) {
+    					if_block0.p(ctx, dirty);
+    				} else {
+    					if_block0 = create_if_block_2(ctx);
+    					if_block0.c();
+    					if_block0.m(button, t0);
     				}
+    			} else if (if_block0) {
+    				if_block0.d(1);
+    				if_block0 = null;
     			}
 
+    			let previous_block_index = current_block_type_index;
+    			current_block_type_index = select_block_type(ctx);
+
+    			if (current_block_type_index === previous_block_index) {
+    				if_blocks[current_block_type_index].p(ctx, dirty);
+    			} else {
+    				group_outros();
+
+    				transition_out(if_blocks[previous_block_index], 1, 1, () => {
+    					if_blocks[previous_block_index] = null;
+    				});
+
+    				check_outros();
+    				if_block1 = if_blocks[current_block_type_index];
+
+    				if (!if_block1) {
+    					if_block1 = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
+    					if_block1.c();
+    				} else {
+    					if_block1.p(ctx, dirty);
+    				}
+
+    				transition_in(if_block1, 1);
+    				if_block1.m(button, t1);
+    			}
+
+    			if (!/*iconAlone*/ ctx[4] && /*iconRight*/ ctx[3]) {
+    				if (if_block2) {
+    					if_block2.p(ctx, dirty);
+    				} else {
+    					if_block2 = create_if_block(ctx);
+    					if_block2.c();
+    					if_block2.m(button, null);
+    				}
+    			} else if (if_block2) {
+    				if_block2.d(1);
+    				if_block2 = null;
+    			}
+
     			set_attributes(button, button_data = get_spread_update(button_levels, [
     				{ type: "button" },
-    				(!current || dirty & /*variant, size*/ 3 && button_class_value !== (button_class_value = [
+    				(!current || dirty & /*variant, size, iconAlone, iconLeft, iconRight*/ 31 && button_class_value !== (button_class_value = [
     					"vtmn-btn",
     					`vtmn-btn_variant--${/*variant*/ ctx[0]}`,
-    					`vtmn-btn_size--${/*size*/ ctx[1]}`
+    					`vtmn-btn_size--${/*size*/ ctx[1]}`,
+    					!/*iconAlone*/ ctx[4] && /*iconLeft*/ ctx[2]
+    					? "vtmn-btn--icon-left"
+    					: "",
+    					!/*iconAlone*/ ctx[4] && /*iconRight*/ ctx[3]
+    					? "vtmn-btn--icon-right"
+    					: "",
+    					/*iconAlone*/ ctx[4] ? "vtmn-btn--icon-alone" : ""
     				].join(" "))) && { class: button_class_value },
-    				dirty & /*$$restProps*/ 4 && /*$$restProps*/ ctx[2]
+    				dirty & /*$$restProps*/ 32 && /*$$restProps*/ ctx[5]
     			]));
@@ -441,7 +654,7 @@ },
     			if (current) return;
-    			transition_in(default_slot, local);
+    			transition_in(if_block1);
     			current = true;
     		},
     		o(local) {
-    			transition_out(default_slot, local);
+    			transition_out(if_block1);
     			current = false;
@@ -451,3 +664,5 @@ },
     			if (detaching) detach(button);
-    			if (default_slot) default_slot.d(detaching);
+    			if (if_block0) if_block0.d();
+    			if_blocks[current_block_type_index].d();
+    			if (if_block2) if_block2.d();
     		}
@@ -458,3 +673,3 @@ };
     function instance($$self, $$props, $$invalidate) {
-    	const omit_props_names = ["variant","size"];
+    	const omit_props_names = ["variant","size","iconLeft","iconRight","iconAlone"];
     	let $$restProps = compute_rest_props($$props, omit_props_names);
@@ -464,12 +679,18 @@ let { $$slots: slots = {}, $$scope } = $$props;
     	let { size = "medium" } = $$props;
+    	let { iconLeft } = $$props;
+    	let { iconRight } = $$props;
+    	let { iconAlone } = $$props;
 
     	$$self.$$set = $$new_props => {
     		$$props = assign(assign({}, $$props), exclude_internal_props($$new_props));
-    		$$invalidate(2, $$restProps = compute_rest_props($$props, omit_props_names));
+    		$$invalidate(5, $$restProps = compute_rest_props($$props, omit_props_names));
     		if ("variant" in $$new_props) $$invalidate(0, variant = $$new_props.variant);
     		if ("size" in $$new_props) $$invalidate(1, size = $$new_props.size);
-    		if ("$$scope" in $$new_props) $$invalidate(3, $$scope = $$new_props.$$scope);
+    		if ("iconLeft" in $$new_props) $$invalidate(2, iconLeft = $$new_props.iconLeft);
+    		if ("iconRight" in $$new_props) $$invalidate(3, iconRight = $$new_props.iconRight);
+    		if ("iconAlone" in $$new_props) $$invalidate(4, iconAlone = $$new_props.iconAlone);
+    		if ("$$scope" in $$new_props) $$invalidate(6, $$scope = $$new_props.$$scope);
     	};
 
-    	return [variant, size, $$restProps, $$scope, slots];
+    	return [variant, size, iconLeft, iconRight, iconAlone, $$restProps, $$scope, slots];
     }
@@ -480,3 +701,10 @@
     		super();
-    		init(this, options, instance, create_fragment, safe_not_equal, { variant: 0, size: 1 });
+
+    		init(this, options, instance, create_fragment, safe_not_equal, {
+    			variant: 0,
+    			size: 1,
+    			iconLeft: 2,
+    			iconRight: 3,
+    			iconAlone: 4
+    		});
     	}
@@ -483,0 +711,0 @@ }

package.json

 {
   "name": "@vtmn/svelte",
-  "version": "0.3.13",
+  "version": "0.4.0",
   "description": "Decathlon Design System - Vitamin Svelte library",
@@ -34,2 +34,3 @@ "keywords": [
     "@vtmn/css-button": "^0.3.6",
+    "@vtmn/icons": "^0.3.2",
     "chokidar-cli": "^2.1.0",
@@ -53,3 +54,3 @@ "eslint": "7.29.0",
   ],
-  "gitHead": "43c5b73d5c0af036d042c089086762ffdddc2298"
+  "gitHead": "5a34d8e342cedd179c16762481346e4e1a8e3b66"
 }

README.md

@@ -57,2 +57,22 @@ # `@vtmn/svelte`
 
+## Install icons (optional)
+
+If you need to use Svelte components with icons displayed (via props for icons in some components), you will need to install `@vtmn/icons` package.
+
+```sh
+# with npm
+npm i -S @vtmn/icons
+
+# with yarn
+yarn add @vtmn/icons
+```
+
+Then, import the icon font in the entry point of your React application:
+
+```javascript
+import '@vtmn/icons/dist/vitamix/font/vitamix.css';
+```
+
+Or you can also import it with a CDN like `unpkg.com` with [this file](https://unpkg.com/@vtmn/icons/dist/vitamix/font/vitamix.css).
+
 ## Usage
@@ -59,0 +79,0 @@

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

142762

increased by10.46%

Lines of code

3768

increased by12.54%

Number of lines in readme file

111

increased by21.98%

Worsened metrics

Dev dependency count

11

increased by10%

No dependency changes