-
Notifications
You must be signed in to change notification settings - Fork 20
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(Checkbox): requiring CheckboxGroup pulling out Label and Descript…
…ion for slots instead of properties. Pulling out checkbox classes so they can be overridden
- Loading branch information
Craig Howell
committed
Oct 1, 2022
1 parent
a9f0997
commit eea49e0
Showing
6 changed files
with
174 additions
and
94 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| <script lang="ts"> | ||
| import { twMerge } from 'tailwind-merge'; | ||
| import { CHECKBOX_GROUP_CONTEXT_ID } from './CheckboxGroup.svelte'; | ||
| import { CHECKBOX_GROUP_CHECKBOX_CONTEXT_ID } from './Checkbox.svelte'; | ||
| import { useContext } from '../../utils/useContext'; | ||
| import { getContext } from 'svelte'; | ||
| useContext({ | ||
| context_id: CHECKBOX_GROUP_CONTEXT_ID, | ||
| parent: 'CheckboxGroup', | ||
| component: 'CheckboxGroup.Checkbox.Label' | ||
| }); | ||
| useContext({ | ||
| context_id: CHECKBOX_GROUP_CHECKBOX_CONTEXT_ID, | ||
| parent: 'CheckboxGroup.Checkbox', | ||
| component: 'CheckboxGroup.Checkbox.Label' | ||
| }); | ||
| const { inline }: { inline: boolean } = getContext(CHECKBOX_GROUP_CONTEXT_ID); | ||
| const { name }: { name: string } = getContext(CHECKBOX_GROUP_CHECKBOX_CONTEXT_ID); | ||
| const defaultClass = | ||
| 'text-light-secondary-content dark:text-dark-secondary-content transition-all duration-150'; | ||
| const finalClass = twMerge(defaultClass, $$props.class); | ||
| </script> | ||
|
|
||
| {#if inline} | ||
| <span id="{name}-description" class={finalClass} style={$$props.style}> | <slot /></span> | ||
| {:else} | ||
| <p id="{name}-description" class={finalClass} style={$$props.style}> | ||
| <slot /> | ||
| </p> | ||
| {/if} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| <script lang="ts"> | ||
| import { twMerge } from 'tailwind-merge'; | ||
| const defaultClass = | ||
| 'transition-all duration-150 text-light-secondary-content dark:text-dark-secondary-content font-medium text-sm'; | ||
| const finalClass = twMerge(defaultClass, $$props.class); | ||
| </script> | ||
|
|
||
| <legend class={finalClass} style={$$props.style}><slot />></legend> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,27 @@ | ||
| <script lang="ts"> | ||
| import { twMerge } from 'tailwind-merge'; | ||
| import { CHECKBOX_GROUP_CONTEXT_ID } from './CheckboxGroup.svelte'; | ||
| import { useContext } from '../../utils/useContext'; | ||
| import { getContext } from 'svelte'; | ||
| import { CHECKBOX_GROUP_CHECKBOX_CONTEXT_ID } from './Checkbox.svelte'; | ||
| useContext({ | ||
| context_id: CHECKBOX_GROUP_CONTEXT_ID, | ||
| parent: 'CheckboxGroup', | ||
| component: 'CheckboxGroup.Checkbox.Label' | ||
| }); | ||
| useContext({ | ||
| context_id: CHECKBOX_GROUP_CHECKBOX_CONTEXT_ID, | ||
| parent: 'CheckboxGroup.Checkbox', | ||
| component: 'CheckboxGroup.Checkbox.Label' | ||
| }); | ||
| const { name }: { name: string } = getContext(CHECKBOX_GROUP_CHECKBOX_CONTEXT_ID); | ||
| const defaultClass = | ||
| 'transition-all duration-150 text-light-secondary-content dark:text-dark-secondary-content font-medium text-sm'; | ||
| 'font-medium text-light-content dark:text-dark-content cursor-pointer transition-all duration-150'; | ||
| const finalClass = twMerge(defaultClass, $$props.class); | ||
| </script> | ||
|
|
||
| <legend class={finalClass} style={$$props.style}><slot />></legend> | ||
| <label for={name} class={finalClass} style={$$props.style}><slot /></label> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,15 +1,25 @@ | ||
| import OriginalCheckboxGroup from './CheckboxGroup.svelte'; | ||
| import GroupLabel from './GroupLabel.svelte'; | ||
| import OriginalCheckbox from './Checkbox.svelte'; | ||
| import Label from './Label.svelte'; | ||
| import Checkbox from './Checkbox.svelte'; | ||
| import Description from './Description.svelte'; | ||
|
|
||
| const CheckboxGroup = OriginalCheckboxGroup as CheckboxGroupStatic; | ||
| CheckboxGroup.Label = Label; | ||
| CheckboxGroup.Checkbox = Checkbox; | ||
| CheckboxGroup.Label = GroupLabel; | ||
| CheckboxGroup.Checkbox = OriginalCheckbox as CheckboxStatic; | ||
| CheckboxGroup.Checkbox.Label = Label; | ||
| CheckboxGroup.Checkbox.Description = Description; | ||
|
|
||
| export default CheckboxGroup; | ||
|
|
||
| export interface CheckboxGroupStatic { | ||
| new (...args: ConstructorParameters<typeof OriginalCheckboxGroup>): OriginalCheckboxGroup; | ||
| Label: typeof GroupLabel; | ||
| Checkbox: CheckboxStatic; | ||
| } | ||
|
|
||
| export interface CheckboxStatic { | ||
| new (...args: ConstructorParameters<typeof OriginalCheckbox>): OriginalCheckbox; | ||
| Label: typeof Label; | ||
| Checkbox: typeof Checkbox; | ||
| Description: typeof Description; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters