mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 10:21:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

chore(prettier): use svelteStrictMode

Browse source
This commit is contained in:
Eric Liu 2020-09-04 16:35:49 -07:00
commit 42b8159b1c
182 changed files with 2020 additions and 1912 deletions
Download patch file Download diff file Expand all files Collapse all files

28
src/ComposedModal/ComposedModal.Story.svelte
View file

@ -16,21 +16,21 @@
{#if story === undefined}
<ComposedModal
{...$$props.composedModal}
on:click={(e) => {
on:click="{(e) => {
console.log(e.target);
}}>
}}">
<ModalHeader {...$$props.modalHeader} />
<ModalBody
{...$$props.modalBody}
aria-label={modalBody.hasScrollingContent ? 'Modal content' : undefined}>
aria-label="{modalBody.hasScrollingContent ? 'Modal content' : undefined}">
<div>
<PasswordInput bind:type placeholder="Password Input" aria-level="" />
<Button
kind="ghost"
size="field"
on:click={() => {
on:click="{() => {
type = type === 'password' ? 'text' : 'password';
}}>
}}">
Programmatically toggle password
</Button>
</div>
@ -58,7 +58,7 @@
</ModalHeader>
<ModalBody
{...$$props.modalBody}
aria-label={modalBody.hasScrollingContent ? 'Modal content' : undefined}>
aria-label="{modalBody.hasScrollingContent ? 'Modal content' : undefined}">
<p>
Please see ModalWrapper for more examples and demo of the functionality.
</p>
@ -74,7 +74,7 @@
</ModalBody>
<ModalFooter>
<Button kind="secondary">Cancel</Button>
<Button kind={$$props.composedModal.danger ? 'danger' : 'primary'}>
<Button kind="{$$props.composedModal.danger ? 'danger' : 'primary'}">
Primary
</Button>
</ModalFooter>
@ -85,8 +85,8 @@
<ComposedModal
{...$$props.composedModal}
open
on:close={() => {}}
on:submit={() => {}}>
on:close="{() => {}}"
on:submit="{() => {}}">
<ModalHeader
{...$$props.modalHeader}
title="Passive modal title as the message. Should be direct and 3 lines or
@ -99,20 +99,20 @@
{#if story === 'trigger'}
<div>
<Button
on:click={() => {
on:click="{() => {
open = true;
}}>
}}">
Launch composed modal
</Button>
</div>
<ComposedModal
{...$$props.composedModal}
{open}
on:close={() => (open = false)}>
open="{open}"
on:close="{() => (open = false)}">
<ModalHeader {...$$props.modalHeader} />
<ModalBody
{...$$props.modalBody}
aria-label={modalBody.hasScrollingContent ? 'Modal content' : undefined}>
aria-label="{modalBody.hasScrollingContent ? 'Modal content' : undefined}">
<p>
Please see ModalWrapper for more examples and demo of the functionality.
</p>

24
src/ComposedModal/ComposedModal.svelte
View file

@ -95,35 +95,35 @@
</script>
<div
bind:this={ref}
bind:this="{ref}"
role="presentation"
tabindex="-1"
class:bx--modal={true}
class:is-visible={open}
class:bx--modal--danger={danger}
class:bx--modal="{true}"
class:is-visible="{open}"
class:bx--modal--danger="{danger}"
{...$$restProps}
on:click
on:click={() => {
on:click="{() => {
if (!didClickInnerModal) open = false;
didClickInnerModal = false;
}}
}}"
on:mouseover
on:mouseenter
on:mouseleave
on:transitionend
on:transitionend={({ currentTarget }) => {
on:transitionend="{({ currentTarget }) => {
if (didOpen) {
focus(currentTarget);
didOpen = false;
}
}}>
}}">
<div
bind:this={innerModal}
class:bx--modal-container={true}
bind:this="{innerModal}"
class:bx--modal-container="{true}"
class="{size && `bx--modal-container--${size}`} {containerClass}"
on:click={() => {
on:click="{() => {
didClickInnerModal = true;
}}>
}}">
<slot />
</div>
</div>

10
src/ComposedModal/ModalBody.svelte
View file

@ -13,13 +13,13 @@
</script>
<div
tabindex={hasScrollingContent ? '0' : undefined}
role={hasScrollingContent ? 'region' : undefined}
class:bx--modal-content={true}
class:bx--modal-content--with-form={hasForm}
tabindex="{hasScrollingContent ? '0' : undefined}"
role="{hasScrollingContent ? 'region' : undefined}"
class:bx--modal-content="{true}"
class:bx--modal-content--with-form="{hasForm}"
{...$$restProps}>
<slot />
</div>
{#if hasScrollingContent}
<div class:bx--modal-content--overflow-indicator={true} />
<div class:bx--modal-content--overflow-indicator="{true}"></div>
{/if}

12
src/ComposedModal/ModalFooter.svelte
View file

@ -41,18 +41,18 @@
const { closeModal, submit } = getContext("ComposedModal");
</script>
<div class:bx--modal-footer={true} {...$$restProps}>
<div class:bx--modal-footer="{true}" {...$$restProps}>
{#if secondaryButtonText}
<Button kind="secondary" class={secondaryClass} on:click={closeModal}>
<Button kind="secondary" class="{secondaryClass}" on:click="{closeModal}">
{secondaryButtonText}
</Button>
{/if}
{#if primaryButtonText}
<Button
kind={danger ? 'danger' : 'primary'}
disabled={primaryButtonDisabled}
class={primaryClass}
on:click={submit}>
kind="{danger ? 'danger' : 'primary'}"
disabled="{primaryButtonDisabled}"
class="{primaryClass}"
on:click="{submit}">
{primaryButtonText}
</Button>
{/if}

18
src/ComposedModal/ModalHeader.svelte
View file

@ -47,19 +47,19 @@
const { closeModal } = getContext("ComposedModal");
</script>
<div class:bx--modal-header={true} {...$$restProps}>
<div class:bx--modal-header="{true}" {...$$restProps}>
{#if label}
<p
class:bx--modal-header__label={true}
class:bx--type-delta={true}
class:bx--modal-header__label="{true}"
class:bx--type-delta="{true}"
class:labelClass>
{label}
</p>
{/if}
{#if title}
<p
class:bx--modal-header__heading={true}
class:bx--type-beta={true}
class:bx--modal-header__heading="{true}"
class:bx--type-beta="{true}"
class:titleClass>
{title}
</p>
@ -67,12 +67,12 @@
<slot />
<button
type="button"
title={iconDescription}
aria-label={iconDescription}
class:bx--modal-close={true}
title="{iconDescription}"
aria-label="{iconDescription}"
class:bx--modal-close="{true}"
class:closeClass
on:click
on:click={closeModal}>
on:click="{closeModal}">
<Close20 class="bx--modal-close__icon {closeIconClass}" />
</button>
</div>