|
52 | 52 |
|
53 | 53 | $: isMobile = innerWidth < 1056; |
54 | 54 | $: components = $layout.children.filter( |
55 | | - (child) => child.title === "components" |
| 55 | + (child) => child.title === "components", |
56 | 56 | )[0]; |
57 | 57 |
|
58 | 58 | $beforeUrlChange(() => { |
|
65 | 65 | <svelte:window bind:innerWidth /> |
66 | 66 |
|
67 | 67 | <svelte:body |
68 | | - on:keydown="{(e) => { |
| 68 | + on:keydown={(e) => { |
69 | 69 | if (active) return; |
70 | 70 | if ( |
71 | 71 | document.activeElement instanceof HTMLInputElement || |
|
76 | 76 | } |
77 | 77 |
|
78 | 78 | const isCommandOrControl = e.metaKey || e.ctrlKey; |
79 | | - const isCmdK = isCommandOrControl && e.key.toLowerCase() === 'k'; |
80 | | - const isSlash = e.key === '/'; |
| 79 | + const isCmdK = isCommandOrControl && e.key.toLowerCase() === "k"; |
| 80 | + const isSlash = e.key === "/"; |
81 | 81 |
|
82 | 82 | if (isCmdK || isSlash) { |
83 | 83 | e.preventDefault(); |
84 | 84 | active = true; |
85 | 85 | } |
86 | | - }}" /> |
| 86 | + }} |
| 87 | +/> |
87 | 88 |
|
88 | 89 | <svelte:head> |
89 | 90 | <!-- Tealium/GA Set up --> |
|
123 | 124 |
|
124 | 125 | <Theme |
125 | 126 | persist |
126 | | - bind:theme="{$theme}" |
127 | | - on:update="{(e) => { |
| 127 | + bind:theme={$theme} |
| 128 | + on:update={(e) => { |
128 | 129 | const theme = e.detail.theme; |
129 | 130 | document.documentElement.style.setProperty( |
130 | | - 'color-scheme', |
131 | | - ['white', 'g10'].includes(theme) ? 'light' : 'dark' |
| 131 | + "color-scheme", |
| 132 | + ["white", "g10"].includes(theme) ? "light" : "dark", |
132 | 133 | ); |
133 | | - }}" |
| 134 | + }} |
134 | 135 | > |
135 | 136 | <Header |
136 | 137 | aria-label="Navigation" |
137 | | - href="{$url('/')}" |
138 | | - expandedByDefault="{true}" |
| 138 | + href={$url("/")} |
| 139 | + expandedByDefault={true} |
139 | 140 | bind:isSideNavOpen |
140 | 141 | > |
141 | 142 | <svelte:fragment slot="skip-to-content"> |
142 | 143 | <SkipToContent /> |
143 | 144 | </svelte:fragment> |
144 | 145 |
|
145 | | - <span slot="platform" class="platform-name" class:hidden="{active}"> |
| 146 | + <span slot="platform" class="platform-name" class:hidden={active}> |
146 | 147 | Carbon Components Svelte <code class="code-01" |
147 | 148 | >v{process.env.VERSION || ""}</code |
148 | 149 | > |
|
152 | 153 | bind:value |
153 | 154 | bind:active |
154 | 155 | placeholder="Search" |
155 | | - results="{results}" |
156 | | - on:select="{(e) => { |
| 156 | + {results} |
| 157 | + on:select={(e) => { |
157 | 158 | $goto(e.detail.selectedResult.href); |
158 | | - }}" |
| 159 | + }} |
159 | 160 | /> |
160 | 161 | <HeaderActionLink |
161 | | - icon="{LogoGithub}" |
| 162 | + icon={LogoGithub} |
162 | 163 | href="https://github.com/carbon-design-system/carbon-components-svelte" |
163 | 164 | target="_blank" |
164 | 165 | /> |
165 | | - <HeaderAction transition="{false}" bind:isOpen> |
| 166 | + <HeaderAction transition={false} bind:isOpen> |
166 | 167 | <HeaderPanelLinks> |
167 | 168 | <HeaderPanelDivider>Carbon Svelte portfolio</HeaderPanelDivider> |
168 | 169 | <HeaderPanelLink |
|
197 | 198 | </HeaderUtilities> |
198 | 199 | </Header> |
199 | 200 |
|
200 | | - <SideNav bind:isOpen="{isSideNavOpen}"> |
| 201 | + <SideNav bind:isOpen={isSideNavOpen}> |
201 | 202 | <SideNavItems> |
202 | 203 | {#each components.children.filter((child) => !deprecated.includes(child.title)) as child (child.path)} |
203 | 204 | <SideNavMenuItem |
204 | | - text="{child.title}" |
205 | | - href="{$url(child.path)}" |
206 | | - isSelected="{$isActive($url(child.path))}" |
| 205 | + text={child.title} |
| 206 | + href={$url(child.path)} |
| 207 | + isSelected={$isActive($url(child.path))} |
207 | 208 | > |
208 | 209 | {child.title} |
209 | 210 | {#if deprecated.includes(child.title)} |
|
0 commit comments