sveltekit-ui 1.1.74 → 1.1.76

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

@@ -1,211 +0,0 @@
-<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>