Files
windmill/frontend/src/lib/components/ChannelSelector.svelte
T
Diego Imbert fa8d1b47db fix: new MultiSelect component (#5979)
* rename all multiselects to Legacy

* move Select

* Separate SelectDropdown

* fix click outside for select with portal

* multiselect v0

* multiselect clear btn

* move filterText logic to SelectDropdown

* ui nits

* console.log

* draggable

* Draggable multiselect

* multiselect search

* nit refacto

* autofocus multiselect input

* Replace in AppMultiSelectV2

* search icon

* app multi select nits

* arginput update multiselect

* fix autofocus scrolling up

* replace High priority tags multiselect

* autoscaling config editor multiselect replace

* fix clear btn not in border

* replace multiselect in cron input

* replace multiselect in savedinputs

* replace EventHandlerItem multiselect

* select dropdown shadow

* more multiselect migration

* hover opacity on drag

* TokensTable UI fixes + replace multiselect

* ai settings replace multiselect

* DefaultTags Multiselect replace

* prevent multiselect from opening on drag

* nit

* app multiselect css + simplify

* console log

* safeSelectItems cleanup

* Remove svelte-multiselect

* clip when wrap not allowed

* hide duplicate app components

* CSS works better  with multiselect in app editor

* allowOverflow

* allowClear

* fix custom createText messed up with search
2025-06-19 14:37:17 +02:00

52 lines
1.2 KiB
Svelte

<script lang="ts">
import Select from './select/Select.svelte'
interface ChannelItem {
channel_id?: string
channel_name?: string
}
interface Props {
disabled?: boolean
placeholder?: string
selectedChannel?: ChannelItem | undefined
containerClass?: string
minWidth?: string
channels?: ChannelItem[]
}
let {
disabled = false,
placeholder = 'Select channel',
selectedChannel = $bindable(undefined),
containerClass = 'w-64',
minWidth = '160px',
channels = []
}: Props = $props()
</script>
<div class={containerClass}>
<div class="flex items-center gap-2">
<div class="flex-grow" style="min-width: {minWidth};">
<Select
containerStyle={'min-width: ' + minWidth}
items={channels.map((channel) => ({
label: channel.channel_name ?? 'Unknown Channel',
value: channel.channel_id ?? ''
}))}
{placeholder}
bind:value={
() => selectedChannel?.channel_id,
(value) => (selectedChannel = channels.find((channel) => channel.channel_id === value))
}
clearable
disabled={disabled || channels.length === 0}
/>
</div>
</div>
{#if channels.length === 0 && !disabled}
<div class="text-xs text-tertiary mt-1">No channels available</div>
{/if}
</div>