From 17efb99756dbb3d2cf61b23d61f1bd290fd733a8 Mon Sep 17 00:00:00 2001
From: clonbg <clonbg@gmail.com>
Date: Sun, 3 Sep 2023 20:03:22 +0200
Subject: [PATCH] 18 ejemplo eventos completo parte 8

---
 ejemplo-eventos/src/App.svelte                | 24 ++++++++++++-
 ejemplo-eventos/src/lib/Dropdown.svelte       | 14 ++++++++
 .../src/lib/{input.svelte => Input.svelte}    |  0
 ejemplo-eventos/src/lib/Rangos.svelte         | 34 +++++++++++++++++++
 4 files changed, 71 insertions(+), 1 deletion(-)
 create mode 100644 ejemplo-eventos/src/lib/Dropdown.svelte
 rename ejemplo-eventos/src/lib/{input.svelte => Input.svelte} (100%)
 create mode 100644 ejemplo-eventos/src/lib/Rangos.svelte

diff --git a/ejemplo-eventos/src/App.svelte b/ejemplo-eventos/src/App.svelte
index 29a5a31..a7ca416 100644
--- a/ejemplo-eventos/src/App.svelte
+++ b/ejemplo-eventos/src/App.svelte
@@ -1,5 +1,7 @@
 <script>
-  import Input from "./lib/input.svelte";
+  import Input from "./lib/Input.svelte";
+  import Dropdown from "./lib/Dropdown.svelte";
+  import Rangos from "./lib/Rangos.svelte";
   let estado = {
     nombre: "Manuel",
     apellido: "Gonzalez",
@@ -9,10 +11,15 @@
       max: 2000,
     },
   };
+  let sectores = ["Frontend", "Backend", "Fullstack", "Devops", "QA"];
   const envio = (e) => {
     e.preventDefault();
     alert(JSON.stringify(estado));
   };
+  const actualizarSalario = (e) => {
+    estado.salario.min = e.detail.min;
+    estado.salario.max = e.detail.max;
+  };
 </script>
 
 <main>
@@ -23,6 +30,21 @@
     <Input identificador="sector" bind:value={estado.sector} />
     <Input identificador="salario.min" bind:value={estado.salario.min} />
     <Input identificador="salario.max" bind:value={estado.salario.max} />
+    <p>
+      <Dropdown
+        identificador="sector"
+        choices={sectores}
+        bind:value={estado.sector}
+      />
+    </p>
+    <p>
+      <Rangos
+        identificador="salario"
+        min={estado.salario.min}
+        max={estado.salario.max}
+        on:update={actualizarSalario}
+      />
+    </p>
     <p>
       <input type="submit" value="Enviar" />
     </p>
diff --git a/ejemplo-eventos/src/lib/Dropdown.svelte b/ejemplo-eventos/src/lib/Dropdown.svelte
new file mode 100644
index 0000000..0b3fb39
--- /dev/null
+++ b/ejemplo-eventos/src/lib/Dropdown.svelte
@@ -0,0 +1,14 @@
+<script>
+  export let identificador;
+  export let choices;
+  export let value;
+</script>
+
+<main>
+  <label for={identificador}>{identificador}</label>
+  <select name={identificador} id={identificador} bind:value>
+    {#each choices as choice}
+      <option value={choice}>{choice}</option>
+    {/each}
+  </select>
+</main>
diff --git a/ejemplo-eventos/src/lib/input.svelte b/ejemplo-eventos/src/lib/Input.svelte
similarity index 100%
rename from ejemplo-eventos/src/lib/input.svelte
rename to ejemplo-eventos/src/lib/Input.svelte
diff --git a/ejemplo-eventos/src/lib/Rangos.svelte b/ejemplo-eventos/src/lib/Rangos.svelte
new file mode 100644
index 0000000..da71cf9
--- /dev/null
+++ b/ejemplo-eventos/src/lib/Rangos.svelte
@@ -0,0 +1,34 @@
+<script>
+  import { createEventDispatcher } from "svelte";
+  const dispatch = createEventDispatcher();
+  export let identificador;
+  export let min;
+  export let max;
+  export const cambiarMin = (e) => {
+    const nuevoMin = e.target.value;
+    dispatch("update", { min: nuevoMin, max });
+  };
+  export const cambiarMax = (e) => {
+    const nuevoMax = e.target.value;
+    dispatch("update", { min, max: nuevoMax });
+  };
+</script>
+
+<main>
+  <label for={`${identificador}_min`}>Mínimo</label>
+  <input
+    type="range"
+    min={0}
+    max={50000}
+    bind:value={min}
+    on:change={cambiarMin}
+  /><span>{min}</span>
+  <label for={`${identificador}_max`}>Máximo</label>
+  <input
+    type="range"
+    min={0}
+    max={50000}
+    bind:value={max}
+    on:change={cambiarMax}
+  /><span>{max}</span>
+</main>