github.com/Theta-Dev/Talon@v0.0.0-20211018130634-ff179e19fa9a/ui/menu/src/components/MenuItemInput.svelte (about)

     1  <script lang="ts">
     2  	import {selectTextOnFocus} from "../util/inputDirectives"
     3  
     4  	import MenuItem from "./MenuItem.svelte"
     5  	import Icon from "./Icon.svelte"
     6  	import type {Focusable} from "../util/types"
     7  
     8  	let inputElm: HTMLInputElement
     9  
    10  	export let active = false
    11  	export let text = ""
    12  
    13  	export const input: Focusable = {
    14  		focus() {
    15  			inputElm.focus()
    16  		},
    17  		blur() {
    18  			inputElm.blur()
    19  		},
    20  	}
    21  
    22  </script>
    23  
    24  <style lang="sass">
    25  	input
    26  		background: none
    27  		border: none
    28  		outline: none
    29  		text-align: right
    30  		width: 10em
    31  
    32  		display: none
    33  
    34  		&:focus
    35  			border-bottom: solid #fff 2px
    36  </style>
    37  
    38  <MenuItem {active} on:click>
    39  	<input
    40  		placeholder="Search..."
    41  		bind:this={inputElm}
    42  		bind:value={text}
    43  		on:focusout
    44  		on:keyup
    45  		use:selectTextOnFocus />
    46  	<Icon iconName="search" size={40} scale={0.6} />
    47  </MenuItem>