From 6610713f351b94a7e255164f3b390443bee4b64c Mon Sep 17 00:00:00 2001 From: Craig Howell Date: Wed, 12 Oct 2022 12:45:31 -0400 Subject: [PATCH] fix(Steps.Step): changed prop index to step fix(Steps): class is reactive including child components docs(steps): aadded examples, props, and slots tables --- src/lib/components/steps/Description.svelte | 20 +- src/lib/components/steps/Step.svelte | 53 +++-- src/lib/components/steps/Steps.svelte | 2 +- src/lib/components/steps/Summary.svelte | 5 +- src/lib/components/steps/Title.svelte | 36 ++-- src/routes/steps/+page.svelte | 88 ++++++-- src/routes/steps/examples.ts | 216 ++++++++++++++++++++ 7 files changed, 341 insertions(+), 79 deletions(-) create mode 100644 src/routes/steps/examples.ts diff --git a/src/lib/components/steps/Description.svelte b/src/lib/components/steps/Description.svelte index 6a156b92..eeb73057 100644 --- a/src/lib/components/steps/Description.svelte +++ b/src/lib/components/steps/Description.svelte @@ -25,42 +25,42 @@ currentStep: Writable; variant: 'simple' | 'bullets' | 'bullets-text' | 'circles-text'; } = getContext(STEPS_CONTEXT_ID); - const { index }: { index: number } = getContext(STEPS_STEP_CONTEXT_ID); + const { step }: { step: number } = getContext(STEPS_STEP_CONTEXT_ID); let defaultClass = ''; if (variant === 'circles-text') { - if ($currentStep > index + 1) { + if ($currentStep > step) { defaultClass = 'text-sm text-light-secondary-content dark:text-dark-secondary-content'; - } else if ($currentStep === index + 1) { + } else if ($currentStep === step) { defaultClass = 'text-sm text-light-secondary-content dark:text-dark-secondary-content'; } else { defaultClass = 'text-sm text-light-secondary-content dark:text-dark-secondary-content'; } } else if (variant === 'simple') { - if ($currentStep > index + 1) { + if ($currentStep > step) { defaultClass = 'text-sm font-medium text-light-content dark:text-dark-content'; - } else if ($currentStep === index + 1) { + } else if ($currentStep === step) { defaultClass = 'text-sm font-medium text-light-content dark:text-dark-content'; } else { defaultClass = 'text-sm font-medium text-light-secondary-content dark:text-dark-secondary-content'; } } - const finalClass = twMerge(defaultClass, $$props.class); + $: finalClass = twMerge(defaultClass, $$props.class); {#if variant === 'simple'} - {#if $currentStep > index + 1} + {#if $currentStep > step} - {:else if $currentStep === index + 1} + {:else if $currentStep === step} {:else} {/if} {:else if variant === 'circles-text'} - {#if $currentStep > index + 1} + {#if $currentStep > step} - {:else if $currentStep === index + 1} + {:else if $currentStep === step} {:else} diff --git a/src/lib/components/steps/Step.svelte b/src/lib/components/steps/Step.svelte index 976fc70f..2377921c 100644 --- a/src/lib/components/steps/Step.svelte +++ b/src/lib/components/steps/Step.svelte @@ -10,7 +10,7 @@ import type { Writable } from 'svelte/store'; export let href: string; - export let index: number; + export let step: number; useContext({ context_id: STEPS_CONTEXT_ID, @@ -19,8 +19,7 @@ }); setContext(STEPS_STEP_CONTEXT_ID, { - step: true, - index + step }); const { @@ -33,19 +32,19 @@ let defaultClass = ''; $: if (variant === 'bullets') { - if ($currentStep > index + 1) { + if ($currentStep > step) { defaultClass = 'block h-2.5 w-2.5 rounded-full bg-primary hover:bg-primary-hover'; - } else if ($currentStep === index + 1) { + } else if ($currentStep === step) { defaultClass = 'relative flex items-center justify-center'; } else { defaultClass = 'block h-2.5 w-2.5 rounded-full bg-light-border dark:bg-dark-border hover:bg-light-border-base dark:hover:bg-dark-border-base'; } } else if (variant === 'simple') { - if ($currentStep > index + 1) { + if ($currentStep > step) { defaultClass = 'group flex flex-col border-l-4 border-primary hover:border-primary-hover py-2 pl-4 md:border-l-0 md:border-t-4 md:pl-0 md:pt-4 md:pb-0'; - } else if ($currentStep === index + 1) { + } else if ($currentStep === step) { defaultClass = 'flex flex-col border-l-4 border-primary dark:border-primary py-2 pl-4 md:border-l-0 md:border-t-4 md:pl-0 md:pt-4 md:pb-0'; } else { @@ -57,16 +56,16 @@ {#if variant === 'simple'} - {#if $currentStep > index + 1} -
  • + {#if $currentStep > step} +
    • - {:else if $currentStep === index + 1} -
  • + {:else if $currentStep === step} +
  • @@ -74,7 +73,7 @@
    • {:else} -
  • +
  • @@ -83,15 +82,15 @@
    • {/if} {:else if variant === 'bullets'} - {#if $currentStep > index + 1} -
  • + {#if $currentStep > step} +
    • - {:else if $currentStep === index + 1} -
  • + {:else if $currentStep === step} +
  • @@ -102,7 +101,7 @@
    • {:else} -
  • +
  • @@ -110,8 +109,8 @@
    • {/if} {:else if variant === 'bullets-text'} - {#if $currentStep > index + 1} -
  • + {#if $currentStep > step} +
  • @@ -133,8 +132,8 @@
    • - {:else if $currentStep === index + 1} -
  • + {:else if $currentStep === step} +
  • @@ -145,7 +144,7 @@
    • {:else} -
  • +
  • @@ -160,8 +159,8 @@
    • {/if} {:else if variant === 'circles-text'} - {#if $currentStep > index + 1} -
  • + {#if $currentStep > step} +
  • @@ -190,8 +189,8 @@
    • - {:else if $currentStep === index + 1} -
  • + {:else if $currentStep === step} +
  • @@ -211,7 +210,7 @@
    • {:else} -
  • +
  • diff --git a/src/lib/components/steps/Steps.svelte b/src/lib/components/steps/Steps.svelte index bcd2e1f6..8851bed3 100644 --- a/src/lib/components/steps/Steps.svelte +++ b/src/lib/components/steps/Steps.svelte @@ -29,7 +29,7 @@ } else if (variant === 'simple') { defaultClass = 'space-y-4 md:flex md:space-y-0 md:space-x-8'; } - const finalClass = twMerge(defaultClass, $$props.class); + $: finalClass = twMerge(defaultClass, $$props.class); {#if variant === 'simple'} diff --git a/src/lib/components/steps/Summary.svelte b/src/lib/components/steps/Summary.svelte index f0f99f45..16495a81 100644 --- a/src/lib/components/steps/Summary.svelte +++ b/src/lib/components/steps/Summary.svelte @@ -1,6 +1,5 @@

    diff --git a/src/lib/components/steps/Title.svelte b/src/lib/components/steps/Title.svelte index 86321ece..2368812e 100644 --- a/src/lib/components/steps/Title.svelte +++ b/src/lib/components/steps/Title.svelte @@ -25,67 +25,67 @@ currentStep: Writable; variant: 'simple' | 'bullets' | 'bullets-text' | 'circles-text'; } = getContext(STEPS_CONTEXT_ID); - const { index }: { index: number } = getContext(STEPS_STEP_CONTEXT_ID); + const { step }: { step: number } = getContext(STEPS_STEP_CONTEXT_ID); let defaultClass = ''; if (variant === 'bullets') { - if ($currentStep > index + 1) { + if ($currentStep > step) { defaultClass = 'sr-only'; - } else if ($currentStep === index + 1) { + } else if ($currentStep === step) { defaultClass = 'sr-only'; } else { defaultClass = 'sr-only'; } } else if (variant === 'bullets-text') { - if ($currentStep > index + 1) { + if ($currentStep > step) { defaultClass = 'ml-3 text-sm font-medium text-light-content dark:text-dark-content'; - } else if ($currentStep === index + 1) { + } else if ($currentStep === step) { defaultClass = 'ml-3 text-sm font-medium text-primary'; } else { defaultClass = 'ml-3 text-sm font-medium text-light-secondary-content dark:text-dark-secondary-content group-hover:text-light-content dark:group-hover:text-dark-content'; } } else if (variant === 'circles-text') { - if ($currentStep > index + 1) { + if ($currentStep > step) { defaultClass = 'text-sm font-medium text-light-content dark:text-dark-content'; - } else if ($currentStep === index + 1) { + } else if ($currentStep === step) { defaultClass = 'text-sm font-medium text-primary'; } else { defaultClass = 'text-sm font-medium text-light-secondary-content dark:text-dark-secondary-content'; } } else if (variant === 'simple') { - if ($currentStep > index + 1) { + if ($currentStep > step) { defaultClass = 'text-sm font-medium text-primary group-hover:text-primary-hover'; - } else if ($currentStep === index + 1) { + } else if ($currentStep === step) { defaultClass = 'text-sm font-medium text-primary dark:text-primary'; } else { defaultClass = 'text-sm font-medium text-light-content dark:text-dark-content'; } } - const finalClass = twMerge(defaultClass, $$props.class); + $: finalClass = twMerge(defaultClass, $$props.class); {#if variant === 'simple'} - {#if $currentStep > index + 1} + {#if $currentStep > step} - {:else if $currentStep === index + 1} + {:else if $currentStep === step} {:else} {/if} {:else if variant === 'bullets'} - {#if $currentStep > index + 1} + {#if $currentStep > step} - {:else if $currentStep === index + 1} + {:else if $currentStep === step} {:else} {/if} {:else if variant === 'bullets-text'} - {#if $currentStep > index + 1} + {#if $currentStep > step} - {:else if $currentStep === index + 1} + {:else if $currentStep === step} {:else}

    @@ -93,9 +93,9 @@

    {/if} {:else if variant === 'circles-text'} - {#if $currentStep > index + 1} + {#if $currentStep > step} - {:else if $currentStep === index + 1} + {:else if $currentStep === step} {:else} diff --git a/src/routes/steps/+page.svelte b/src/routes/steps/+page.svelte index 2b6de360..4ec8daec 100644 --- a/src/routes/steps/+page.svelte +++ b/src/routes/steps/+page.svelte @@ -1,9 +1,23 @@ Simple - - {#each steps1 as step, i} - handleClick(i)}> + + {#each steps as step, i} + (currentStep = i + 1)}> {step.title} {step.description} {/each} + +
    + +     @@ -46,14 +60,18 @@ Bullets - - Step {currentStep1} of {steps1.length} - {#each steps1 as step, i} - handleClick(i)}> + + Step {currentStep} of {steps.length} + {#each steps as step, i} + (currentStep = i + 1)}> {step.title} {/each} + +
    + +     @@ -62,13 +80,17 @@ Bullets & Text - - {#each steps1 as step, i} - handleClick(i)}> + + {#each steps as step, i} + (currentStep = i + 1)}> {step.title} {/each} + +
    + +     @@ -77,14 +99,42 @@ Circles & Text - - {#each steps1 as step, i} - handleClick(i)}> + + {#each steps as step, i} + (currentStep = i + 1)}> {step.title} {step.description} {/each} + +
    + +     + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/routes/steps/examples.ts b/src/routes/steps/examples.ts new file mode 100644 index 00000000..7f7bb457 --- /dev/null +++ b/src/routes/steps/examples.ts @@ -0,0 +1,216 @@ +import type { Slot, Prop } from '../../docs'; + +export const props: Prop[] = [ + { + id: '1', + prop: 'variant', + type: "'simple' | 'bullets' | 'bullets-text' | 'circles-text'", + default: 'info' + }, + { + id: '2', + prop: 'currentStep', + type: 'number', + default: '' + } +]; + +export const slots: Slot[] = [ + { + id: '1', + slot: 'summary', + component: '' + }, + { + id: '2', + slot: 'default', + component: '' + } +]; + +export const summarySlots: Slot[] = [ + { + id: '1', + slot: 'default', + component: '' + } +]; + +export const stepProps: Prop[] = [ + { + id: '1', + prop: 'href', + type: 'string', + default: '' + }, + { + id: '2', + prop: 'step', + type: 'number', + default: '' + } +]; + +export const stepSlots: Slot[] = [ + { + id: '1', + slot: 'title', + component: '' + }, + { + id: '1', + slot: 'description', + component: '' + } +]; + +export const titleSlots: Slot[] = [ + { + id: '1', + slot: 'default', + component: '' + } +]; + +export const descriptionSlots: Slot[] = [ + { + id: '1', + slot: 'default', + component: '' + } +]; + +export const example1 = ` + + + + {#each steps as step, i} + (currentStep = i + 1)}> + {step.title} + {step.description} + + {/each} +`; + +export const example2 = ` + + + + Step {currentStep} of {steps.length} + {#each steps as step, i} + (currentStep = i + 1)}> + {step.title} + + {/each} +`; + +export const example3 = ` + + + + {#each steps as step, i} + (currentStep = i + 1)}> + {step.title} + + {/each} +`; + +export const example4 = ` + + + + {#each steps as step, i} + (currentStep = i + 1)}> + {step.title} + {step.description} + + {/each} +`;