Merge pull request #5 from shaozi/demo-format-indention

documentation
shaozi · Aug 23, 2021 · 0aff10c · 0aff10c
2 parents 186b610 + 3c427e0
commit 0aff10c
Show file tree

Hide file tree

Showing 7 changed files with 228 additions and 58 deletions.
diff --git a/.firebase/hosting.YnVpbGQ.cache b/.firebase/hosting.YnVpbGQ.cache
@@ -1,10 +1,27 @@
-favicon.png,1629693071857,de37fe1ebb5a3626a8020f83217dad63fbaec03f492008a519af114a4d0b2ed1
-_app/error.svelte-c2a0b112.js,1629693071858,444b6c4ae9d117f8c7072ffa100740a01ee8bbf65a18d535109cde6b77155d32
-_app/layout.svelte-daef9be3.js,1629693071858,19ba0644e1931183198bd8163c1b427a7530bcc1e6f4526acb654d880a5adb43
-_app/assets/start-61d1577b.css,1629693071858,75667985611687261bf750b1b16605ef5c58ca86e23e1f03b6e36bd501b1de67
-_app/assets/pages/index.svelte-8ea154ae.css,1629693071857,ba347b52050f9b21243b141d3ff739e0c7bf07987a50ef90a1927126c6783332
+_app/error.svelte-c2a0b112.js,1629730097929,444b6c4ae9d117f8c7072ffa100740a01ee8bbf65a18d535109cde6b77155d32
+_app/layout.svelte-daef9be3.js,1629730097930,19ba0644e1931183198bd8163c1b427a7530bcc1e6f4526acb654d880a5adb43
+_app/start-4dc35a1d.js,1629731529694,ce272c69b3b18d9bb6872ecbc2f078279c1ec489e0562634db9fca421d123da4
+_app/start-64ceb5e1.js,1629728925198,c4131cff59eed286e8b59ebd6d1ea540fad5cdac50a7c6966b8e49460d936df1
 _app/start-711e04d4.js,1629693071859,ae02675c907cd6f257230a075472337675a90f72c4b3b5fedfa481a0f381d9bc
-index.html,1629693071873,662aee5f0457b51203038b8a269d2dac9d542409c1212279df2f5556ce570dd7
+_app/start-83221ce4.js,1629731471463,527b143fca299d491a6181dc1dadfd4c459365b58af51518aa1775c69dc36410
+_app/start-88e024e6.js,1629730486043,7d3fdf02c67fe8ecac548d3f3d7e07d631714934a128fcd8acebdcef9fe3f815
+_app/start-a55623c2.js,1629730097931,1b434d4c86a238d0677c22f4b161c17104968e43f8f87662e9493e785168d9f9
+_app/assets/pages/index.svelte-5ac433a4.css,1629728925196,fc8cea780bfd50c46539a0daf0e02c3ca0059cf1e0bcfebfdb200fd10c39846a
+_app/assets/pages/index.svelte-8ea154ae.css,1629693071857,ba347b52050f9b21243b141d3ff739e0c7bf07987a50ef90a1927126c6783332
+_app/chunks/vendor-5d68c66f.js,1629730097929,777c7453c5f0803ec8d589ba5aa6d3b80c9d7306bb380578518f76273cf835aa
+_app/pages/index.svelte-6440fc24.js,1629728925197,07dd78257be2590a6cbb21e2380b705d0d6cb53ee3bf3fed9a94543edd40bb9e
 _app/pages/index.svelte-6a07ec24.js,1629693071859,194aa137afcd3168b79941e4d72527aac08aa729895e71e8aae747624b52c1ed
-_app/chunks/vendor-5d68c66f.js,1629693071858,777c7453c5f0803ec8d589ba5aa6d3b80c9d7306bb380578518f76273cf835aa
-demo.png,1629693071856,36a8bc941d950ef15a14802d446952e2856cac431dd4b3b43c2fadc29935e2d5
+_app/pages/index.svelte-81f06a23.js,1629730486042,dcb034947de9592c2f13b486fc54b4c7af42fece948dd960c8881f64b605f80b
+_app/pages/index.svelte-a37e50e1.js,1629731529694,767d4559397b47434dece195359039450e01b5fecb074885d9100dfe37e0aeb0
+_app/pages/index.svelte-a91dba1b.js,1629731471462,60e45ddfd95a998f821d69eaf438ff719a19ed42ffe3c3de9d05377d37a6635d
+_app/pages/index.svelte-f2638cd7.js,1629730097930,96469a993f511f67506a3244e6695d675f6414c48535504ff524bf535516f6f3
+favicon.png,1629733143429,de37fe1ebb5a3626a8020f83217dad63fbaec03f492008a519af114a4d0b2ed1
+index.html,1629733143451,ed3d5ba9a4e38e7cb7e3a02359c1979f50f778862082de37d9ff9185869e9db1
+_app/error.svelte-057bccf0.js,1629733143433,51289b81dc00af40a96a09d06510f09acce5236e95dc9b93795850293cb4dfac
+_app/layout.svelte-c46398ee.js,1629733143433,45c5837877c24665c4c957c3b801994a747575b5f2c0fe42f47b10e8eceda27c
+_app/assets/start-61d1577b.css,1629733143431,75667985611687261bf750b1b16605ef5c58ca86e23e1f03b6e36bd501b1de67
+_app/assets/pages/index.svelte-f7c72b7f.css,1629733143431,8babc590aaa52acfccc937b556eb4fd3b0667c145579f0bcba29a4d945eb9ec2
+_app/start-6ee048f4.js,1629733143435,649b5ce7aad67d63161e54dc0346649cbdd9b24366133c137a4f869950a8e0c8
+_app/pages/index.svelte-4230b66f.js,1629733143434,5e4552ed6385a45ac6b25cbf1856055943bbfba3e67d5c7db0e972e3dd3c8d75
+_app/chunks/vendor-8bd24f45.js,1629733143432,be37fcfa1b3ae798a274e80f5a779a8af3a2d4386948a53d00dfea01b8f7ed15
+demo.png,1629733143429,36a8bc941d950ef15a14802d446952e2856cac431dd4b3b43c2fadc29935e2d5
diff --git a/.svelte-kit/build/app.js b/.svelte-kit/build/app.js
@@ -22,9 +22,9 @@ export function init(settings = default_settings) {
 		amp: false,
 		dev: false,
 		entry: {
-			file: assets + "/_app/start-88e024e6.js",
+			file: assets + "/_app/start-6ee048f4.js",
 			css: [assets + "/_app/assets/start-61d1577b.css"],
-			js: [assets + "/_app/start-88e024e6.js",assets + "/_app/chunks/vendor-8bd24f45.js"]
+			js: [assets + "/_app/start-6ee048f4.js",assets + "/_app/chunks/vendor-8bd24f45.js"]
 		},
 		fetched: undefined,
 		floc: false,
@@ -83,7 +83,7 @@ const module_lookup = {
 	".svelte-kit/build/components/layout.svelte": () => import("./components/layout.svelte"),".svelte-kit/build/components/error.svelte": () => import("./components/error.svelte"),"src/routes/index.svelte": () => import("../../src/routes/index.svelte")
 };
 
-const metadata_lookup = {".svelte-kit/build/components/layout.svelte":{"entry":"layout.svelte-c46398ee.js","css":[],"js":["layout.svelte-c46398ee.js","chunks/vendor-8bd24f45.js"],"styles":[]},".svelte-kit/build/components/error.svelte":{"entry":"error.svelte-057bccf0.js","css":[],"js":["error.svelte-057bccf0.js","chunks/vendor-8bd24f45.js"],"styles":[]},"src/routes/index.svelte":{"entry":"pages/index.svelte-81f06a23.js","css":["assets/pages/index.svelte-f7c72b7f.css"],"js":["pages/index.svelte-81f06a23.js","chunks/vendor-8bd24f45.js"],"styles":[]}};
+const metadata_lookup = {".svelte-kit/build/components/layout.svelte":{"entry":"layout.svelte-c46398ee.js","css":[],"js":["layout.svelte-c46398ee.js","chunks/vendor-8bd24f45.js"],"styles":[]},".svelte-kit/build/components/error.svelte":{"entry":"error.svelte-057bccf0.js","css":[],"js":["error.svelte-057bccf0.js","chunks/vendor-8bd24f45.js"],"styles":[]},"src/routes/index.svelte":{"entry":"pages/index.svelte-4230b66f.js","css":["assets/pages/index.svelte-f7c72b7f.css"],"js":["pages/index.svelte-4230b66f.js","chunks/vendor-8bd24f45.js"],"styles":[]}};
 
 async function load_component(file) {
 	const { entry, css, js, styles } = metadata_lookup[file];

diff --git a/.svelte-kit/output/manifest.json b/.svelte-kit/output/manifest.json
@@ -1,6 +1,6 @@
 {
   ".svelte-kit/build/runtime/internal/start.js": {
-    "file": "start-88e024e6.js",
+    "file": "start-6ee048f4.js",
     "src": ".svelte-kit/build/runtime/internal/start.js",
     "isEntry": true,
     "imports": [
@@ -34,7 +34,7 @@
     ]
   },
   "src/routes/index.svelte": {
-    "file": "pages/index.svelte-81f06a23.js",
+    "file": "pages/index.svelte-4230b66f.js",
     "src": "src/routes/index.svelte",
     "isEntry": true,
     "isDynamicEntry": true,

diff --git a/.svelte-kit/output/server/app.js b/.svelte-kit/output/server/app.js
@@ -246,9 +246,9 @@ function init(settings = default_settings) {
     amp: false,
     dev: false,
     entry: {
-      file: assets + "/_app/start-88e024e6.js",
+      file: assets + "/_app/start-6ee048f4.js",
       css: [assets + "/_app/assets/start-61d1577b.css"],
-      js: [assets + "/_app/start-88e024e6.js", assets + "/_app/chunks/vendor-8bd24f45.js"]
+      js: [assets + "/_app/start-6ee048f4.js", assets + "/_app/chunks/vendor-8bd24f45.js"]
     },
     fetched: void 0,
     floc: false,
@@ -307,7 +307,7 @@ const module_lookup = {
     return index;
   })
 };
-const metadata_lookup = { ".svelte-kit/build/components/layout.svelte": { "entry": "layout.svelte-c46398ee.js", "css": [], "js": ["layout.svelte-c46398ee.js", "chunks/vendor-8bd24f45.js"], "styles": [] }, ".svelte-kit/build/components/error.svelte": { "entry": "error.svelte-057bccf0.js", "css": [], "js": ["error.svelte-057bccf0.js", "chunks/vendor-8bd24f45.js"], "styles": [] }, "src/routes/index.svelte": { "entry": "pages/index.svelte-81f06a23.js", "css": ["assets/pages/index.svelte-f7c72b7f.css"], "js": ["pages/index.svelte-81f06a23.js", "chunks/vendor-8bd24f45.js"], "styles": [] } };
+const metadata_lookup = { ".svelte-kit/build/components/layout.svelte": { "entry": "layout.svelte-c46398ee.js", "css": [], "js": ["layout.svelte-c46398ee.js", "chunks/vendor-8bd24f45.js"], "styles": [] }, ".svelte-kit/build/components/error.svelte": { "entry": "error.svelte-057bccf0.js", "css": [], "js": ["error.svelte-057bccf0.js", "chunks/vendor-8bd24f45.js"], "styles": [] }, "src/routes/index.svelte": { "entry": "pages/index.svelte-4230b66f.js", "css": ["assets/pages/index.svelte-f7c72b7f.css"], "js": ["pages/index.svelte-4230b66f.js", "chunks/vendor-8bd24f45.js"], "styles": [] } };
 async function load_component(file) {
   const { entry, css: css2, js, styles } = metadata_lookup[file];
   return {
@@ -536,12 +536,12 @@ const Routes = create_ssr_component(($$result, $$props, $$bindings, slots) => {
     {
       title: "Basic Usage",
       code: `<script>
-	import { Steps } from 'svelte-steps';
-	let steps = [
-		{ text: 'step one' }, 
-		{ text: 'step two' }, 
-		{ text: 'the last step' }
-  ];
+    import { Steps } from 'svelte-steps';
+    let steps = [
+        { text: 'step one' }, 
+        { text: 'step two' }, 
+        { text: 'the last step' }
+    ];
 <\/script>
 
 <Steps {steps} />`,
@@ -555,9 +555,9 @@ const Routes = create_ssr_component(($$result, $$props, $$bindings, slots) => {
     {
       title: "With Icons",
       code: `let steps = [
-	{ text: 'step one', icon: IconMoney },
-	{ text: 'step two', icon: IconPaperClip },
-	{ text: 'the last step', icon: IconPerson }
+    { text: 'step one', icon: IconMoney },
+    { text: 'step two', icon: IconPaperClip },
+    { text: 'the last step', icon: IconPerson }
 ]`,
       steps: [
         {
@@ -647,9 +647,9 @@ const Routes = create_ssr_component(($$result, $$props, $$bindings, slots) => {
     {
       title: "No Text",
       code: `let steps = [
-	{ icon: IconMoney },
-	{ icon: IconPaperClip },
-	{ icon: IconPerson }
+    { icon: IconMoney },
+    { icon: IconPaperClip },
+    { icon: IconPerson }
 ]`,
       steps: [
         { icon: Icon, iconProps: { name: "money" } },
@@ -689,9 +689,9 @@ const Routes = create_ssr_component(($$result, $$props, $$bindings, slots) => {
   ];
   return `${$$result.head += `<!-- HTML_TAG_START -->${atomOneDark$1}<!-- HTML_TAG_END -->`, ""}
 
-<div class="${"container"}"><nav class="${"d-flex align-items-center justify-content-between mt-5"}"><h1 class="${"display-4"}">Svelte Steps</h1>
+<div class="${"container"}"><nav class="${"d-flex align-items-center justify-content-between mt-5 border-bottom"}"><h1 class="${"display-4"}">Svelte Steps</h1>
     <div><a href="${"https://github.com/shaozi/svelte-steps.git"}">Github</a></div></nav>
-  <hr>
+
   <div class="${"text-muted mb-5"}">A customizable step component written in Svelte
   </div>
 
@@ -709,6 +709,60 @@ const Routes = create_ssr_component(($$result, $$props, $$bindings, slots) => {
         <div class="${"col-md-6"}">${validate_component(Steps, "Steps").$$render($$result, Object.assign({ steps: demo.steps }, { current }, demo.props), {}, {})}
         </div></div>
     </div>`)}
+  <h3>Use with Bootstrap</h3>
+  <p>It by default uses <code>--bs-primary</code>, <code>--bs-secondary</code>,
+    <code>--bs-light</code>, and <code>--bs-dark</code> css variables if they are
+    defined. These css vars are defined in bootstrap css:
+  </p>
+  ${validate_component(HighlightSvelte, "HighlightSvelte").$$render($$result, {
+    code: `<!-- Include Bootstrap css in app.html <head></head> -->
+    <link
+        href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
+        rel="stylesheet"
+        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
+        crossorigin="anonymous"
+    />`,
+    style: "padding: 1rem; border-radius: 0.5rem;"
+  }, {}, {})}
+
+  <h2>Component Details</h2>
+  <h3>Props</h3>
+  <ul><li><code>steps</code>:
+      <ul><li>Array of object. Length has to be more than 1</li>
+        <li>Required</li>
+        <li>Each item is a step object that can have:
+          <ul><li><code>text</code>: The text displayed below each steps.</li>
+            <li><code>icon</code>: A svelte component displayed inside each steps.
+            </li>
+            <li><code>iconProps</code>: An object that will be passed as props to
+              the <code>icon</code> component.
+            </li></ul></li></ul></li>
+    <li><code>current</code>: current step index. Number. Default <code>0</code></li>
+    <li><code>size</code>: size of the step buttons. String. Default
+      <code>&quot;3rem&quot;</code></li>
+    <li><code>lineHeight</code>: height of the connecting lines between the step
+      buttons. String. Default <code>&quot;0.3rem&quot;</code></li>
+    <li><code>primary</code>: Primary color of passed and current steps. String.
+      Default <code>&#39;var(--bs-primary, #3a86ff)&#39;</code></li>
+    <li><code>secondary</code>: Secondary color of future steps. String. Default
+      <code>&#39;var(--bs-secondary, #bbbbc0)&#39;</code></li>
+    <li><code>light</code>: Primary color of text color in passed anc current
+      steps. String. Default <code>&#39;var(--bs-light, white)&#39;</code></li>
+    <li><code>dark</code>: Secondary color of text color in future steps. String.
+      Default <code>&#39;var(--bs-dark, black)&#39;</code></li>
+    <li><code>borderRadius</code>: Border radius of the step buttons. String.
+      Default <code>&#39;50%&#39;</code> (circle)
+    </li>
+    <li><code>fontFamily</code>: Font family of the component. String. Default
+      <code>&quot;&#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif&quot;</code></li></ul>
+  <h3>Events</h3>
+  <ul><li><code>on:click(e)</code>: click event with arg as the clicked step index
+      as <code>e.detail.current</code> and last step index as
+      <code>e.detail.last</code></li></ul>
+
+  <footer class="${"d-flex justify-content-between align-items-center my-3 py-2 border-top"}"><div class="${"text-secondary small"}">Built with <a href="${"https://kit.svelte.dev"}">SvelteKit</a></div>
+    <div><a href="${"https://github.com/shaozi/svelte-steps.git"}">Github</a></div>
+    <div></div></footer>
 </div>`;
 });
 var index = /* @__PURE__ */ Object.freeze({

diff --git a/README.md b/README.md
@@ -12,15 +12,18 @@ npm install --saveDev svelte-steps
 
 ## Example Usages
 
+Clone this project and run it. Itself is an example. Take a look at the homepage [here](https://svelte-steps.web.app)
+
 ### Basic Usage
 
 ```javascript
 <script>
-	import { Steps } from 'svelte-steps';
-	let steps = [
-		{ text: 'step one' }, 
-		{ text: 'step two' }, 
-		{ text: 'the last step' }];
+    import { Steps } from 'svelte-steps';
+    let steps = [
+        { text: 'step one' }, 
+        { text: 'step two' }, 
+        { text: 'the last step' }
+    ];
 </script>
 
 <Steps {steps} />
@@ -30,9 +33,9 @@ npm install --saveDev svelte-steps
 
 ```javascript
 let steps = [
-	{ text: 'step one', icon: IconMoney },
-	{ text: 'step two', icon: IconPaperClip },
-	{ text: 'the last step', icon: IconPerson }
+    { text: 'step one', icon: IconMoney },
+    { text: 'step two', icon: IconPaperClip },
+    { text: 'the last step', icon: IconPerson }
 ]
 ```
 
@@ -58,9 +61,9 @@ let steps = [
 
 ```javascript
 let steps = [
-	{ icon: IconMoney },
-	{ icon: IconPaperClip },
-	{ icon: IconPerson }
+    { icon: IconMoney },
+    { icon: IconPaperClip },
+    { icon: IconPerson }
 ]
 ```
 
@@ -120,4 +123,4 @@ It by default uses `--bs-primary`, `--bs-secondary`, `--bs-light`, and `--bs-dar
 
 - `on:click(e)`: click event with arg as the clicked step index as `e.detail.current` and last step index as `e.detail.last`
 
-		
+
diff --git a/build/index.html b/build/index.html
@@ -16,12 +16,12 @@
 
 
 
-		<link rel="modulepreload" href="/_app/start-88e024e6.js">
+		<link rel="modulepreload" href="/_app/start-6ee048f4.js">
 		<link rel="modulepreload" href="/_app/chunks/vendor-8bd24f45.js">
 		<link rel="stylesheet" href="/_app/assets/start-61d1577b.css">
 
 		<script type="module">
-			import { start } from "/_app/start-88e024e6.js";
+			import { start } from "/_app/start-6ee048f4.js";
 			start({
 				target: document.querySelector("#svelte"),
 				paths: {"base":"","assets":""},