mirror of
https://github.com/windmill-labs/windmill.git
synced 2026-09-05 00:03:08 +00:00
GuilhemandRuben Fiszel
323912c73c
* improve input picker * Put back colors for types * Add full path to popover * Copy instead of toast if no input selected * Add popover and copy to value * Add shadow en transition when selecting input * Add border and transition when selecting input * revert unwanted changes * hide scrollbar when not hovering * Add connexion animated border effect * fix display * fix proppicker display * Remove badge * Change animated button gradient * revert scrollbar on hover * clean design * clean design * clean design * clean design * clean design * clean design * clean design * improve search --------- Co-authored-by: Ruben Fiszel <ruben@rubenfiszel.com>
73 lines
1.7 KiB
Svelte
73 lines
1.7 KiB
Svelte
<script lang="ts">
|
|
import { createEventDispatcher } from 'svelte'
|
|
import { fade } from 'svelte/transition'
|
|
import { X } from 'lucide-svelte'
|
|
|
|
export let value: any = ''
|
|
export let placeholder = ''
|
|
export let type: 'text' | 'textarea' | 'number' = 'text'
|
|
export let inputClass = ''
|
|
export let wrapperClass = ''
|
|
export let buttonClass = ''
|
|
const dispatch = createEventDispatcher()
|
|
let isHovered = false
|
|
|
|
$: isNumeric = ['number', 'range'].includes(type)
|
|
$: dispatch('change', value)
|
|
|
|
function handleInput(e) {
|
|
value = isNumeric ? +e.target.value : e.target.value
|
|
}
|
|
|
|
function clear() {
|
|
value = ''
|
|
}
|
|
|
|
$: if (value === undefined) value = ''
|
|
</script>
|
|
|
|
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
|
<div
|
|
class="relative grow {wrapperClass}"
|
|
on:mouseenter={() => (isHovered = true)}
|
|
on:mouseleave={() => (isHovered = false)}
|
|
>
|
|
{#if type === 'textarea'}
|
|
<textarea
|
|
{value}
|
|
{placeholder}
|
|
rows="1"
|
|
class="resize-y duration-200 {inputClass}"
|
|
{...$$restProps}
|
|
on:input={handleInput}
|
|
on:keydown|stopPropagation
|
|
on:focus
|
|
on:blur
|
|
/>
|
|
{:else}
|
|
<input
|
|
{type}
|
|
{value}
|
|
{placeholder}
|
|
class="duration-200 {(value ? '!pr-[26px] ' : '') + inputClass}"
|
|
{...$$restProps}
|
|
on:input={handleInput}
|
|
on:keydown|stopPropagation
|
|
on:focus
|
|
on:blur
|
|
/>
|
|
{/if}
|
|
{#if value && isHovered}
|
|
<button
|
|
transition:fade|local={{ duration: 80 }}
|
|
class="absolute z-10 top-[9.5px] right-2 rounded-full p-0.5 text-primary bg-surface-secondary
|
|
duration-200 hover:bg-surface-hovr focus:bg-surface-hover {buttonClass}"
|
|
aria-label="Clear"
|
|
on:click|preventDefault|stopPropagation={clear}
|
|
>
|
|
<X size={11} class="" />
|
|
</button>
|
|
{/if}
|
|
<slot />
|
|
</div>
|