|
168 | 168 | </ul> |
169 | 169 | </div> |
170 | 170 | {:else} |
171 | | - {#if installPlan.choices.length > 0} |
172 | | - <div class="choices-section"> |
173 | | - <h4>Configuration</h4> |
174 | | - {#each installPlan.choices as choice} |
175 | | - <div class="choice-field"> |
176 | | - <label for="choice-{choice.integration}"> |
177 | | - {choice.integration} |
178 | | - {#if choice.required}<span class="required">*</span>{/if} |
179 | | - </label> |
180 | | - <select id="choice-{choice.integration}" bind:value={choices[choice.integration]}> |
181 | | - <option value="">Select...</option> |
182 | | - {#if choice.installed} |
183 | | - <optgroup label="Installed"> |
184 | | - {#each choice.installed as opt} |
185 | | - <option value={opt.app}>{formatAppName(opt.app)}</option> |
186 | | - {/each} |
187 | | - </optgroup> |
188 | | - {/if} |
189 | | - {#if choice.available} |
190 | | - <optgroup label="Will be installed"> |
191 | | - {#each choice.available as opt} |
192 | | - <option value={opt.app}> |
193 | | - {formatAppName(opt.app)} |
194 | | - {#if opt.default}(recommended){/if} |
195 | | - </option> |
196 | | - {/each} |
197 | | - </optgroup> |
198 | | - {/if} |
199 | | - </select> |
200 | | - </div> |
201 | | - {/each} |
202 | | - </div> |
203 | | - {/if} |
204 | 171 | {/if} |
205 | 172 | {/if} |
206 | 173 | </div> |
|
306 | 273 | color: var(--color-text-muted); |
307 | 274 | font-style: italic; |
308 | 275 | } |
309 | | -
|
310 | | - .choices-section { |
311 | | - margin-bottom: var(--space-lg); |
312 | | - } |
313 | | -
|
314 | | - .choices-section h4 { |
315 | | - margin: 0 0 var(--space-md) 0; |
316 | | - font-size: 0.8125rem; |
317 | | - text-transform: uppercase; |
318 | | - letter-spacing: 0.03em; |
319 | | - color: var(--color-text-muted); |
320 | | - } |
321 | | -
|
322 | | - .choice-field { |
323 | | - margin-bottom: var(--space-md); |
324 | | - } |
325 | | -
|
326 | | - .choice-field label { |
327 | | - display: block; |
328 | | - font-size: 0.875rem; |
329 | | - color: var(--color-text-secondary); |
330 | | - margin-bottom: var(--space-xs); |
331 | | - } |
332 | | -
|
333 | | - .required { color: var(--color-error); } |
334 | | -
|
335 | | - .choice-field select { |
336 | | - width: 100%; |
337 | | - padding: var(--space-sm) var(--space-md); |
338 | | - border: 1px solid var(--color-border); |
339 | | - border-radius: var(--radius-md); |
340 | | - font-size: 0.9375rem; |
341 | | - font-family: var(--font-serif); |
342 | | - background: white; |
343 | | - } |
344 | | -
|
345 | 276 | .alert { |
346 | 277 | padding: var(--space-md); |
347 | 278 | border-radius: var(--radius-md); |
|
0 commit comments