mirror of
https://github.com/windmill-labs/windmill.git
synced 2026-10-29 00:03:09 +00:00
58 lines
1.2 KiB
Svelte
58 lines
1.2 KiB
Svelte
<script lang="ts">
|
|
import { Pen } from 'lucide-svelte'
|
|
|
|
export let value: string
|
|
export let disabled = false
|
|
|
|
function blur(e: KeyboardEvent) {
|
|
e.key === 'Enter' && (e?.target as any)?.blur()
|
|
}
|
|
</script>
|
|
|
|
<div class="flex flex-row center-center gap-1 min-w-32 lg:min-w-64 w-full max-w-md">
|
|
<div class="relative w-full">
|
|
<input
|
|
title="Rename"
|
|
type="text"
|
|
placeholder="Untitled"
|
|
class="windmillapp app-title text-sm w-full font-semibold"
|
|
bind:value
|
|
{disabled}
|
|
on:keydown={blur}
|
|
/>
|
|
{#if !disabled}
|
|
<Pen class="absolute top-2 right-2 pen-icon -z-10 opacity-60" size={14} />
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
|
|
<style lang="postcss" global>
|
|
.app-title {
|
|
@apply !block !text-sm !w-full !p-1 !px-2 !rounded !border-0 !font-semibold;
|
|
}
|
|
|
|
.app-title:hover {
|
|
@apply !ring-frost-100 !ring-offset-0 !ring-1;
|
|
}
|
|
|
|
.app-title:focus {
|
|
@apply !ring-gray-300 !ring-offset-0 !ring-1;
|
|
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
|
|
}
|
|
|
|
.dark .app-title {
|
|
@apply !text-secondary !border-gray-600;
|
|
}
|
|
|
|
.dark .app-title:focus {
|
|
@apply !ring-frost-500;
|
|
}
|
|
|
|
.dark .app-title:hover {
|
|
@apply !ring-frost-700;
|
|
}
|
|
.app-title:focus + .pen-icon {
|
|
@apply !hidden;
|
|
}
|
|
</style>
|