mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 18:31:06 +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/Tooltip/Tooltip.Story.svelte
View file

@ -27,13 +27,13 @@
{...$$props}
bind:ref
bind:open
on:open={() => {
on:open="{() => {
console.log('on:open');
}}
on:close={() => {
}}"
on:close="{() => {
console.log('on:close');
}}>
<div slot="icon" class="custom-icon-class" />
}}">
<div slot="icon" class="custom-icon-class"></div>
<p>
This is some tooltip text. This box shows the maximum amount of text
that should appear inside. If more room is needed please use a modal
@ -47,16 +47,16 @@
{:else if story === 'uncontrolled'}
<Button
style="padding: 15px 20px; margin: 4px 20px"
on:click={() => {
on:click="{() => {
open = false;
}}>
}}">
Hide
</Button>
<Button
style="padding: 15px 20px; margin: 4px 20px"
on:click={() => {
on:click="{() => {
open = true;
}}>
}}">
Show
</Button>
<div style="padding: 15px 20px; margin: 4px 20px">
@ -70,13 +70,13 @@
{...$$props}
bind:ref
bind:open
on:open={() => {
on:open="{() => {
console.log('on:open');
}}
on:close={() => {
}}"
on:close="{() => {
console.log('on:close');
}}
icon={story === 'custom icon only' ? OverflowMenuVertical16 : undefined}>
}}"
icon="{story === 'custom icon only' ? OverflowMenuVertical16 : undefined}">
<p>
This is some tooltip text. This box shows the maximum amount of text
that should appear inside. If more room is needed please use a modal

42
src/Tooltip/Tooltip.svelte
View file

@ -182,50 +182,50 @@
</script>
<svelte:body
on:click={({ target }) => {
on:click="{({ target }) => {
if (!programmatic && open && refTooltip && !refTooltip.contains(target)) {
open = false;
}
}} />
}}" />
<div {...$$restProps} style="{$$restProps.style}; position: relative;">
{#if !hideIcon}
<div bind:this={ref} id={triggerId} class:bx--tooltip__label={true}>
<div bind:this="{ref}" id="{triggerId}" class:bx--tooltip__label="{true}">
<slot name="triggerText">{triggerText}</slot>
<div
bind:this={refIcon}
bind:this="{refIcon}"
{...buttonProps}
on:click|preventDefault|stopPropagation={openMenu}
on:focus={openMenu}
on:blur={onBlur}
on:keydown={onKeydown}>
on:click|preventDefault|stopPropagation="{openMenu}"
on:focus="{openMenu}"
on:blur="{onBlur}"
on:keydown="{onKeydown}">
<slot name="icon">
<svelte:component this={icon} name={iconName} />
<svelte:component this="{icon}" name="{iconName}" />
</slot>
</div>
</div>
{:else}
<div
bind:this={ref}
bind:this="{ref}"
{...buttonProps}
on:click|preventDefault|stopPropagation={openMenu}
on:focus={openMenu}
on:blur={onBlur}
on:keydown={onKeydown}>
on:click|preventDefault|stopPropagation="{openMenu}"
on:focus="{openMenu}"
on:blur="{onBlur}"
on:keydown="{onKeydown}">
<slot name="triggerText">{triggerText}</slot>
</div>
{/if}
{#if open}
<div
bind:this={refTooltip}
bind:this="{refTooltip}"
role="tooltip"
tabindex="0"
id={tooltipId}
data-floating-menu-direction={direction}
class:bx--tooltip={true}
class:bx--tooltip--shown={open}
on:blur={closeMenu}>
<span class:bx--tooltip__caret={true} />
id="{tooltipId}"
data-floating-menu-direction="{direction}"
class:bx--tooltip="{true}"
class:bx--tooltip--shown="{open}"
on:blur="{closeMenu}">
<span class:bx--tooltip__caret="{true}"></span>
<slot />
</div>
{/if}