61 lines
1.9 KiB
Svelte
61 lines
1.9 KiB
Svelte
<!-- [DEF:EnvSelector:Component] -->
|
|
<!--
|
|
@SEMANTICS: environment, selector, dropdown, migration
|
|
@PURPOSE: Provides a UI component for selecting source and target environments.
|
|
@LAYER: Feature
|
|
@RELATION: BINDS_TO -> environments store
|
|
|
|
@INVARIANT: Source and target environments must be selectable from the list of configured environments.
|
|
-->
|
|
|
|
<script lang="ts">
|
|
// [SECTION: IMPORTS]
|
|
import { onMount, createEventDispatcher } from 'svelte';
|
|
// [/SECTION]
|
|
|
|
// [SECTION: PROPS]
|
|
export let label: string = "Select Environment";
|
|
export let selectedId: string = "";
|
|
export let environments: Array<{id: string, name: string, url: string}> = [];
|
|
// [/SECTION]
|
|
|
|
const dispatch = createEventDispatcher();
|
|
|
|
// [DEF:handleSelect:Function]
|
|
/**
|
|
* @purpose Dispatches the selection change event.
|
|
* @pre event.target must be an HTMLSelectElement.
|
|
* @post selectedId is updated and 'change' event is dispatched.
|
|
* @param {Event} event - The change event from the select element.
|
|
*/
|
|
function handleSelect(event: Event) {
|
|
const target = event.target as HTMLSelectElement;
|
|
selectedId = target.value;
|
|
dispatch('change', { id: selectedId });
|
|
}
|
|
// [/DEF:handleSelect:Function]
|
|
</script>
|
|
|
|
<!-- [SECTION: TEMPLATE] -->
|
|
<div class="flex flex-col space-y-1">
|
|
<label for="env-select" class="text-sm font-medium text-gray-700">{label}</label>
|
|
<select
|
|
id="env-select"
|
|
class="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
|
|
value={selectedId}
|
|
on:change={handleSelect}
|
|
>
|
|
<option value="" disabled>-- Choose an environment --</option>
|
|
{#each environments as env}
|
|
<option value={env.id}>{env.name} ({env.url})</option>
|
|
{/each}
|
|
</select>
|
|
</div>
|
|
<!-- [/SECTION] -->
|
|
|
|
<style>
|
|
/* Component specific styles */
|
|
</style>
|
|
|
|
<!-- [/DEF:EnvSelector:Component] -->
|