sveltekit-ui 1.0.0

package/src/lib/Components/TimeInput/index.svelte

@@ -0,0 +1,211 @@
+<script>
+  import Icon from "$lib/Components/Icon/index.svelte"
+  import Button from "$lib/Components/Button/index.svelte"
+  import Popover from "$lib/Components/Popover/index.svelte"
+  import Dropdown from "$lib/Components/Dropdown/index.svelte"
+  import NumberToggler from "$lib/Components/TimeInput/NumberToggler/index.svelte"
+
+  let { manager } = $props()
+
+</script>
+
+{#snippet year_picker()}
+  <h5 class="year_header">Year</h5>
+  <div style="display: flex; flex: 1;">
+    <input
+      class="input_box year_input"
+      type="number"
+      min={-10000}
+      max={3000}
+      oninput={(e) => manager?.set_year(parseInt(e.target.value))}
+      value={manager?.year}
+    />
+  </div>
+  <div style="display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: .5rem; margin-top: .5rem;">
+    <Button manager={manager?.year_minus_one_button_manager} />
+    <Button manager={manager?.year_minus_hundred_button_manager} />
+    <Button manager={manager?.year_plus_hundred_button_manager} />
+    <Button manager={manager?.year_plus_one_button_manager} />
+  </div>
+{/snippet}
+
+{#snippet time_input()}
+  <div class="container">
+    {#if ["time_full","epoch","calendar_date","datetime","datetime_utc","datetime_zoned","year_week"].includes(manager?.format)}
+      <div style="max-width: 30rem;">
+        {#if manager?.is_show_calendar && !manager?.is_pick_month_year}
+          <div style="display: flex; flex: 1; justify-content: space-between;">
+            <Button manager={manager?.left_month_button_manager} />
+            <Button manager={manager?.prempt_month_year_button_manager} />
+            <Button manager={manager?.right_month_button_manager} />
+          </div>
+          <div class="days_of_week" class:is_disabled={manager?.is_disabled}>
+            {#each ["S", "M", "T", "W", "T", "F", "S"] as day_of_week}
+              <div>{day_of_week}</div>
+            {/each}
+          </div>
+          {#if Array.isArray(manager?.day_of_month_button_managers) && manager?.day_of_month_button_managers.length > 0}
+            <div class="day_grid">
+              {#if manager?.picker_month_day_of_week > 0}
+                {#each Array(manager?.picker_month_day_of_week).fill() as _, i}
+                  <div></div>
+                {/each}
+              {/if}
+              {#each manager?.day_of_month_button_managers as day_of_month_button_manager}
+                <Button manager={day_of_month_button_manager} />
+              {/each}
+            </div>
+          {/if}
+        {:else}
+          <Button manager={manager?.back_to_calendar_button_manager} />
+          <Dropdown manager={manager?.month_dropdown_manager} />
+          {@render year_picker()}
+        {/if}
+      </div>
+      {#if !["calendar_date","year_week"].includes(manager?.format)}
+        {#if manager?.granularity_dropdown_manager?.val == "hour"}
+          <div class="time_container">
+            <NumberToggler manager={manager?.hour_number_toggler_manager} />
+          </div>
+        {:else if manager?.granularity_dropdown_manager?.val == "minute"}
+          <div class="time_container">
+            <NumberToggler manager={manager?.hour_number_toggler_manager} />
+            <NumberToggler manager={manager?.minute_number_toggler_manager} />
+          </div>
+        {:else if manager?.granularity_dropdown_manager?.val == "second"}
+          <div class="time_container">
+            <NumberToggler manager={manager?.hour_number_toggler_manager} />
+            <NumberToggler manager={manager?.minute_number_toggler_manager} />
+            <NumberToggler manager={manager?.second_number_toggler_manager} />
+          </div>
+        {/if}
+        {#if manager?.format == "datetime_zoned"}
+          <div class="timezone">
+            <div class="timezone_dropdown">
+              <Dropdown manager={manager?.timezone_dropdown_manager} />
+            </div>
+            <Button manager={manager?.reset_timezone_button_manager} />
+          </div>
+        {/if}
+      {/if}
+    {:else if manager?.format == "year"}
+      {@render year_picker()}
+    {:else if manager?.format == "year_month"}
+      <Dropdown manager={manager?.month_dropdown_manager} />
+      {@render year_picker()}
+    {:else if manager?.format == "hour_minute"}
+      <div class="time_container">
+        <NumberToggler manager={manager?.hour_number_toggler_manager} />
+        <NumberToggler manager={manager?.minute_number_toggler_manager} />
+      </div>
+    {:else if manager?.format == "hour_minute_second"}
+      <div class="time_container">
+        <NumberToggler manager={manager?.hour_number_toggler_manager} />
+        <NumberToggler manager={manager?.minute_number_toggler_manager} />
+        <NumberToggler manager={manager?.second_number_toggler_manager} />
+      </div>
+    {:else if ["period_full","period_iso_8601","period_total_seconds"].includes(manager?.format)}
+      <div class="time_container">
+        <NumberToggler manager={manager?.period_days_number_toggler_manager} />
+        <NumberToggler manager={manager?.period_hours_number_toggler_manager} />
+        <NumberToggler manager={manager?.period_minutes_number_toggler_manager} />
+        <NumberToggler manager={manager?.period_seconds_number_toggler_manager} />
+      </div>
+      {#if manager?.format == "period_iso_8601" && manager?.val}
+        <p>{manager?.val}</p>
+      {:else if manager?.format == "period_total_seconds"}
+        <p>{manager?.val}seconds</p>
+      {/if}
+    {/if}
+    <div style="display: grid; grid-template-columns: 1fr 1fr; margin-top: 1rem; gap: 1rem;">
+      <Button manager={manager?.set_null_button_manager} />
+      {#if ["time_full","epoch","calendar_date","datetime","datetime_utc","datetime_zoned","year","year_week","year_month","hour_minute","hour_minute_second"].includes(manager?.format)}
+        <Button manager={manager?.set_to_now_button_manager} />
+      {/if}
+    </div>
+    <Dropdown manager={manager?.granularity_dropdown_manager?.val_dropdown_manager} />
+  </div>
+{/snippet}
+
+
+{#if manager?.label}
+  <div style="display: inline-flex;">
+    {#if manager?.label}
+      <p class="label">{manager?.label}:</p>
+    {/if}
+  </div>
+{/if}
+
+{#if !manager?.is_popover}
+  {@render time_input()}
+{:else}
+  <div id={`toggle_el_${manager?.popover_manager?.id}`}>
+    <Button manager={manager?.main_toggle_button_manager} />
+  </div>
+  <Popover manager={manager.popover_manager}>
+    {#snippet content()}
+      {@render time_input()}
+    {/snippet}
+    {#snippet footer()}
+      <Button manager={manager?.finish_button_manager} />
+    {/snippet}
+  </Popover>
+{/if}
+
+<style>
+  .container {
+    padding: 1rem;
+  }
+  .time_container {
+    display: flex;
+    flex: 1;
+  }
+  .is_disabled {
+    color: var(--g12-t);
+  }
+  .days_of_week {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 1rem;
+    border: 1px solid var(--g6-t);
+    box-sizing: border-box;
+    border-radius: 0.5rem;
+    margin: 0.5rem;
+  }
+  .day_grid {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    grid-template-rows: auto;
+    margin: 0.5rem;
+  }
+  .is_disabled {
+    color: var(--g12-t);
+  }
+  .year_header {
+    margin: 0;
+    color: var(--g8-t);
+    font-size: 1.4rem;
+  }
+  .year_input {
+    border-radius: 1rem;
+    font-size: 3rem;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    text-align: center;
+  }
+  .timezone {
+    display: flex;
+    flex: 1;
+    gap: 1rem;
+    margin-top: 1rem;
+    max-width: 100%;
+    overflow: hidden;
+  }
+  .timezone_dropdown {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    width: 10rem;
+  }
+</style>