From 902b06c4600709ecefea5fcc40faa64f7b948af4 Mon Sep 17 00:00:00 2001 From: Jingshao Chen Date: Thu, 3 Feb 2022 06:55:29 +0800 Subject: [PATCH 1/8] use flex-direction to combine horizontal, vertical & reverse --- README.md | 2 +- package.json | 2 +- src/lib/Steps.svelte | 299 +++++++++++++++------------------------- src/routes/index.svelte | 25 +++- 4 files changed, 138 insertions(+), 190 deletions(-) diff --git a/README.md b/README.md index 7e9c68e..a14f86e 100644 --- a/README.md +++ b/README.md @@ -146,7 +146,7 @@ It by default uses `--bs-primary`, `--bs-secondary`, `--bs-light`, and `--bs-dar - `borderRadius`: Border radius of the step buttons. String. Default `'50%'` (circle) - `fontFamily`: Font family of the component. String. Default `"'Helvetica Neue', Helvetica, Arial, sans-serif"` - `vertical`: Vertical steps. Default `false` -- `reverse`: For vertical steps only. Puts text to the left. Default `false` +- `reverse`: For horizontal steps, reverse the step from right to the left; for vertical steps, reverse puts text labels to the left. Default `false` ## Events diff --git a/package.json b/package.json index edbb5c0..5208f68 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "svelte-steps", - "version": "2.1.0", + "version": "2.2.0", "description": "A customizable step component written in Svelte", "repository": { "type": "git", diff --git a/src/lib/Steps.svelte b/src/lib/Steps.svelte index 2274518..fbcfb07 100644 --- a/src/lib/Steps.svelte +++ b/src/lib/Steps.svelte @@ -24,7 +24,7 @@ - `borderRadius`: Border radius of the step buttons. String. Default `'50%'` (circle) - `fontFamily`: Font family of the component. String. Default `"'Helvetica Neue', Helvetica, Arial, sans-serif"` - `vertical`: Vertical steps - - `reverse`: For vertical steps only. Puts text to the left. Default `false` + - `reverse`: For horizontal steps, reverse the step from right to the left; for vertical steps, reverse puts text labels to the left. Default `false` @events @@ -33,7 +33,6 @@ @@ -87,161 +83,133 @@ --font-family: ${ fontFamily || "'Helvetica Neue', Helvetica, Arial, sans-serif" };`} + style:display="flex" + style:justify-content="space-between" + style:flex-direction={vertical ? 'column' : reverse ? 'row-reverse' : 'row'} > - {#if vertical} - {#each steps as step, i} + {#each steps as step, i} + +
+
-
+ + {#if i > 0}
- {#if i > 0} -
- {:else} -
- {/if} - {#if i < steps.length - 1} -
- {:else} -
- {/if} -
-
-
+ class={i <= current ? `bg-primary` : `bg-secondary`} + style:flex-grow={10} + style:width={vertical ? 'var(--line-thickness)' : null} + style:min-width={vertical ? 'var(--line-thickness)' : null} + style:height={vertical ? null : 'var(--line-thickness)'} + style:min-height={vertical ? null : 'var(--line-thickness)'} + /> + {:else} +
+ {/if} + + {#if i < steps.length - 1}
+ +
{ - onClick(i) - }} - > - {#if step.icon} - {#if i < current} - - {:else if step.iconProps} - - {:else} - - {/if} - {:else if i < current} + class:shadow={i == current} + on:click={() => { + onClick(i) + }} + > + {#if step.icon} + {#if i < current} + {:else if step.iconProps} + {:else} - {i + 1} + {/if} -
- -
- {#if typeof step.text != 'undefined'} -
{ - onClick(i) - }} - > - {step.text} -
- {:else} -
- {/if} -
+ {:else if i < current} + + {:else} + {i + 1} + {/if}
-
- {/each} - {:else} -
-
- +
-
-
-
-
-
-
-
- -
-
- {#each steps as step, i} -
{ - onClick(i) - }} - > - {#if step.icon} - {#if i < current} - - {:else if step.iconProps} - - {:else} - - {/if} - {:else if i < current} - - {:else} - {i + 1} - {/if} -
- {/each} -
-
-
- -
- {#each steps as step, i} - {#if typeof step.text != 'undefined'} -
+ {#if typeof step.text != 'undefined'}
{ onClick(i) }} > {step.text}
-
- {/if} - {/each} + {:else} +
+ {/if} +
+
- {/if} + {/each}
diff --git a/src/routes/index.svelte b/src/routes/index.svelte index 86baca7..f95e3ab 100644 --- a/src/routes/index.svelte +++ b/src/routes/index.svelte @@ -4,6 +4,8 @@ import { HighlightSvelte } from 'svelte-highlight' import atomOneDark from 'svelte-highlight/src/styles/atom-one-dark' let showCode = true + let vertical = false + const stepsTextOnly = [ { text: 'Step one' }, { text: 'Step two' }, @@ -15,7 +17,11 @@ { icon: Icon, iconProps: { name: 'person' } }, ] const stepsTextAndIcons = [ - { text: 'step one', icon: Icon, iconProps: { name: 'money' } }, + { + text: 'step one', + icon: Icon, + iconProps: { name: 'money' }, + }, { text: 'step two', icon: Icon, @@ -84,6 +90,12 @@ steps: stepsTextAndIcons, props: { size: '2rem', line: '2rem' }, }, + { + title: 'Steps - Reversed', + code: ``, + steps: stepsTextAndIcons, + props: { reverse: true }, + }, { title: 'Vertical Steps', code: ``, @@ -140,6 +152,11 @@ showCode = !showCode }}>e + { + vertical = !vertical + }}>:
@@ -159,6 +176,7 @@ on:click={(e) => { console.log(e) }} + {vertical} {...demo.props} />
@@ -274,8 +292,9 @@ vertical: Vertical steps. Default: false
  • - reverse: for vertical steps only. Puts text labels to the - left. Default: false + reverse: For horizontal steps, reverse the step from right to + the left; for vertical steps, reverse puts text labels to the left. + Default: false
    • From 97b79ee8fe868df1dccb1883df55667942cae316 Mon Sep 17 00:00:00 2001 From: Jingshao Chen Date: Thu, 3 Feb 2022 19:47:10 +0800 Subject: [PATCH 2/8] format --- src/lib/Steps.svelte | 28 +++++++++++++++------------- 1 file changed, 15 insertions(+), 13 deletions(-) diff --git a/src/lib/Steps.svelte b/src/lib/Steps.svelte index fbcfb07..e989e77 100644 --- a/src/lib/Steps.svelte +++ b/src/lib/Steps.svelte @@ -26,9 +26,9 @@ - `vertical`: Vertical steps - `reverse`: For horizontal steps, reverse the step from right to the left; for vertical steps, reverse puts text labels to the left. Default `false` - @events + @events - - `on:click(e)`: click event with arg as the clicked step index as `e.detail.current` and last step index as `e.detail.last` + - `on:click(e)`: click event with arg as the clicked step index as `e.detail.current` and last step index as `e.detail.last` --> @@ -84,135 +118,140 @@ --font-family: ${ fontFamily || "'Helvetica Neue', Helvetica, Arial, sans-serif" }; - display: flex; - justify-content: space-between;`} - style:flex-direction={vertical ? 'column' : reverse ? 'row-reverse' : 'row'} + display: flex; + `} + style:flex-direction={vertical ? (reverse ? 'row-reverse' : 'row') : 'column'} > - {#each steps as step, i} - + +
    +
    -
    - - {#if i > 0} -
    - {:else} -
    - {/if} - - {#if i < steps.length - 1} -
    - {:else} -
    - {/if} -
    - - - + class="bg-primary" + style:width={vertical ? line : `${$progress}px`} + style:height={vertical ? `${$progress}px` : line} + /> + {#if line != size} + +
    + {/if} +
    +
    + +
    + {#each steps as step, i} +
    - +
    + +
    { - onClick(i) - }} - > - {#if step.icon} - {#if i < current} + class:shadow={i == current} + on:click={() => { + onClick(i) + }} + > + {#if step.icon} + {#if i < current} + + {:else if step.iconProps} + + {:else} + + {/if} + {:else if i < current} - {:else if step.iconProps} - {:else} - + {i + 1} {/if} - {:else if i < current} - - {:else} - {i + 1} - {/if} -
    - -
    - {#if typeof step.text != 'undefined'} -
    { - onClick(i) - }} - > - {step.text} -
    - {:else} -
    - {/if} +
    + +
    + {#if typeof step.text != 'undefined'} +
    { + onClick(i) + }} + > + {step.text} +
    + {:else} +
    + {/if} +
    -
    - {/each} + {/each} +