11<script >
22 export let tech = [];
3+ export let form;
34 export let live;
45
5- let input = ' ' ;
6+ let input = " " ;
67 let techMap = new Map ();
78
89 $: {
910 techMap .clear ();
10- tech .forEach (tech => {
11+ tech .forEach (( tech ) => {
1112 techMap .set (tech .toLowerCase (), tech);
1213 });
1314 }
1415
1516 function addTech (e ) {
16- if (e .key === ' Enter' || e .key === ' , ' ) {
17+ if (e .key === " Enter" || e .key === " , " ) {
1718 e .preventDefault ();
1819 const tech = input .trim ();
20+
21+ if (e .key === " Enter" && tech === " " ) {
22+ e .target .closest (" form" ).requestSubmit ();
23+ return ;
24+ }
25+
1926 const techLower = tech .toLowerCase ();
20-
2127 if (tech && ! techMap .has (techLower)) {
2228 techMap .set (techLower, tech);
2329 updateTechStack ();
2430 }
25- input = ' ' ;
31+ input = " " ;
2632 }
2733 }
2834
2935 function removeTech (tech ) {
3036 techMap .delete (tech .toLowerCase ());
3137 updateTechStack ();
32-
3338 }
3439
3540 function updateTechStack () {
3641 const newTechStack = Array .from (techMap .values ());
3742 tech = newTechStack;
38- live .pushEvent (' tech_stack_changed' , { tech_stack: tech });
43+ live .pushEvent (" tech_stack_changed" , { tech_stack: tech });
3944 }
4045 </script >
4146
4247<div class =" mt-4" >
4348 <input
4449 type =" text"
50+ name ={` ${form }[tech_stack_input] ` }
4551 bind:value ={input }
4652 on:keydown ={addTech }
4753 placeholder =" Elixir, Phoenix, PostgreSQL, etc."
5056
5157 <input
5258 type =" hidden"
53- name =" tech_stack_form [tech_stack]"
59+ name ={ ` ${ form } [tech_stack]` }
5460 value ={JSON .stringify (tech )}
5561 />
5662
5763 <div class =" flex flex-wrap gap-3 mt-4" >
5864 {#each tech as tech }
59- <div class =" bg-success/10 text-success rounded-lg px-3 py-1.5 text-sm font-semibold flex items-center" >
65+ <div
66+ class =" bg-success/10 text-success rounded-lg px-3 py-1.5 text-sm font-semibold flex items-center"
67+ >
6068 {tech }
6169 <button
6270 type =" button"
6876 </div >
6977 {/each }
7078 </div >
71- </div >
79+ </div >
0 commit comments