<svelte:options customElement={{ props: {} }} />

<script lang="ts">
  import {Button, Input} from './index';
  import type {MyHTMLAttributes} from './types';

  const {
    placeholder,
    label,
    value,
    buttonText = "选择...",
    onChosen,
    class: className = '',
    style = '',
    ...rest
  }: Omit<MyHTMLAttributes, 'class' | 'style'> & {
    placeholder?: string;
    label?: any;
    value?: any;
    buttonText?: string;
    onChosen?: (value?: any, label?: any, event?: Event) => void;
    class?: string;
    style?: string;
  } = $props();

</script>
<div {...rest} {style} class="tf-chosen nopan nodrag {className}">
    <input type="hidden" value={value}>
    <Input value={label} {placeholder} style="flex-grow: 1;" disabled/>
    <Button onclick={(e)=>{
        onChosen?.(value, label, e);
    }} style="padding: 3px" >{buttonText}</Button>
</div>

<style>
    .tf-chosen {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 5px;
     }
</style>
