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>