sveltekit-ui 1.0.0

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

@@ -0,0 +1,638 @@
+import { create_popover_manager } from "$lib/Components/Popover/index.svelte.js"
+import { create_button_manager } from "$lib/Components/Button/index.svelte.js"
+import { create_dropdown_manager } from "$lib/Components/Dropdown/index.svelte.js"
+import { create_text_input_manager } from "$lib/Components/TextInput/index.svelte.js"
+import { create_number_toggler } from "$lib/Components/TimeInput/NumberToggler/index.svelte.js"
+import { create_unique_id, set_closurable } from "$lib/client/index.js"
+import {
+  time_formats,
+  granularities,
+  month_names,
+  days_of_week_names,
+  common_timezones,
+  get_val_from_time_object,
+  get_time_object_from_val,
+  get_time_full_from_object,
+} from "$lib/Components/TimeInput/index.js"
+
+export function create_time_input_manager(config) {
+  let id = create_unique_id(null, 20)
+  let picker_year = $state(new Date().getFullYear())
+  let picker_month = $state(new Date().getMonth() + 1)
+  let is_pick_month_year = $state(false)
+  let is_null = $state(false)
+  let year = $state(null)
+  let day_of_month = $state(null)
+  let day_of_week = $state(null)
+  let day_of_year = $state(null)
+  let week_of_year = $state(null)
+  let datetime = $state(null)
+
+  let day_of_month_button_managers = $state(null)
+  let is_show_calendar = $state(true)
+  let is_show_granularity_dropdown = $state(false)
+
+  let popover_manager = $state(null)
+  let main_toggle_button_manager = $state(null)
+  let left_month_button_manager = $state(null)
+  let right_month_button_manager = $state(null)
+  let prempt_month_year_button_manager = $state(null)
+  let epoch_text_input_manager = $state(null)
+  let year_minus_one_button_manager = $state(null)
+  let year_plus_one_button_manager = $state(null)
+  let year_minus_hundred_button_manager = $state(null)
+  let year_plus_hundred_button_manager = $state(null)
+  let back_to_calendar_button_manager = $state(null)
+  let hour_number_toggler_manager = $state(null)
+  let minute_number_toggler_manager = $state(null)
+  let second_number_toggler_manager = $state(null)
+  let period_days_number_toggler_manager = $state(null)
+  let period_hours_number_toggler_manager = $state(null)
+  let period_minutes_number_toggler_manager = $state(null)
+  let period_seconds_number_toggler_manager = $state(null)
+  let set_null_button_manager = $state(null)
+  let set_to_now_button_manager = $state(null)
+  let reset_timezone_button_manager = $state(null)
+  let finish_button_manager = $state(null)
+  let timezone_dropdown_manager = $state(null)
+  let granularity_dropdown_manager = $state(null)
+  let month_dropdown_manager = $state(null)
+
+  let label = $derived(set_closurable(config?.label, null))
+  let is_popover = $derived(set_closurable(config?.is_popover, true))
+  let format = $derived(set_closurable(config?.format, "time_full"))
+  let is_disabled = $derived(set_closurable(config?.is_disabled, false))
+  let granularity_options = $derived(
+    set_closurable(config?.granularity_options, ["year", "month", "week", "day", "hour", "minute", "second"])
+  )
+
+  let picker_month_day_of_week = $derived(new Date(picker_year, picker_month - 1, 1).getDay())
+  let picker_days_in_month = $derived(new Date(picker_year, picker_month, 0).getDate())
+  let boxes_in_picker = $derived(picker_days_in_month + picker_month_day_of_week)
+
+  let val = $derived(
+    is_null
+      ? null
+      : get_val_from_time_object({
+          is_null: is_null,
+          epoch: epoch_text_input_manager?.val,
+          granularity: granularity_dropdown_manager?.val,
+          year: year,
+          month: month_dropdown_manager?.val,
+          day_of_month,
+          day_of_week,
+          day_of_year,
+          week_of_year,
+          hour: hour_number_toggler_manager?.val,
+          minute: minute_number_toggler_manager?.val,
+          second: second_number_toggler_manager?.val,
+          days: period_days_number_toggler_manager?.val,
+          hours: period_hours_number_toggler_manager?.val,
+          minutes: period_minutes_number_toggler_manager?.val,
+          seconds: period_seconds_number_toggler_manager?.val,
+          timezone: timezone_dropdown_manager?.val,
+          format: format,
+        })
+  )
+
+  function set_val(input) {
+    epoch_text_input_manager.set_val(input?.epoch ?? null)
+    granularity_dropdown_manager.set_val(input?.granularity ?? granularity_dropdown_manager?.val ?? "day")
+    year = input?.year ?? null
+    month_dropdown_manager.set_val(input?.month ?? null)
+    day_of_month = input?.day_of_month ?? null
+    day_of_week = input?.day_of_week ?? null
+    day_of_year = input?.day_of_year ?? null
+    week_of_year = input?.week_of_year ?? null
+    hour_number_toggler_manager.set_val(input?.hour ?? null)
+    minute_number_toggler_manager.set_val(input?.minute ?? null)
+    second_number_toggler_manager.set_val(input?.second ?? null)
+    timezone_dropdown_manager.set_val(input?.timezone ?? timezone_dropdown_manager?.val ?? null)
+    datetime = input?.datetime ?? null
+    period_days_number_toggler_manager.set_val(input?.days ?? null)
+    period_hours_number_toggler_manager.set_val(input?.hours ?? null)
+    period_minutes_number_toggler_manager.set_val(input?.minutes ?? null)
+    period_seconds_number_toggler_manager.set_val(input?.seconds ?? null)
+    is_null = input == null
+  }
+
+  function get_iso_week(year, month, day) {
+    const date = new Date(Date.UTC(year, month - 1, day))
+    const day_number = (date.getUTCDay() + 6) % 7
+    date.setUTCDate(date.getUTCDate() - day_number + 3)
+    const first_thursday = new Date(Date.UTC(date.getUTCFullYear(), 0, 4))
+    const diff = date - first_thursday
+    const week_of_year = Math.ceil(diff / (86400000 * 7) + 1)
+    return week_of_year
+  }
+
+  function set_day_of_month_button_managers() {
+    let day_of_month_button_managers_loc = []
+    if (picker_days_in_month > 0) {
+      for (let i = 1; i <= picker_days_in_month; i++) {
+        let button_manager = create_button_manager({
+          type: "soft",
+          pt: 0.5,
+          pb: 0.5,
+          pl: 0,
+          pr: 0,
+          min_height: 0,
+          selected_type: () => {
+            if (format == "year_week") {
+              return year &&
+                picker_year == year &&
+                picker_month == month_dropdown_manager?.val &&
+                get_iso_week(picker_year, picker_month, i) ==
+                  get_iso_week(year, month_dropdown_manager?.val, day_of_month)
+                ? "selected"
+                : null
+            }
+            return year && picker_year == year && picker_month == month_dropdown_manager?.val && i == day_of_month
+              ? "selected"
+              : null
+          },
+          text: i,
+          is_disabled: () => is_disabled,
+          on_click: () => set_day_of_month(picker_year, picker_month, i),
+        })
+        day_of_month_button_managers_loc.push(button_manager)
+      }
+    }
+    day_of_month_button_managers = day_of_month_button_managers_loc
+  }
+
+  function set_granularity(input) {
+    granularity_dropdown_manager.set_val(input)
+    is_null = false
+  }
+  function set_timezone(input) {
+    timezone_dropdown_manager.set_val(input)
+    is_null = false
+  }
+
+  function set_to_now() {
+    const epoch = Math.floor(Date.now() / 1000)
+    const time_full = get_time_full_from_object({
+      format: format,
+      granularity: granularity_dropdown_manager?.val,
+      epoch,
+    })
+    set_val(time_full)
+    picker_year = new Date().getFullYear()
+    picker_month = new Date().getMonth() + 1
+  }
+
+  function set_year(_year) {
+    console.log("set_year", _year)
+    year = parseInt(_year)
+    picker_year = parseInt(_year)
+    epoch_text_input_manager.set_val(null)
+    is_null = false
+  }
+
+  function set_month(_month) {
+    picker_month = _month
+    month_dropdown_manager.set_val(_month)
+  }
+
+  function set_day_of_month(_year, _month, _day_of_month) {
+    year = _year
+    month_dropdown_manager.set_val(_month)
+    day_of_month = _day_of_month
+    epoch_text_input_manager.set_val(null)
+    is_null = false
+  }
+
+  function set_hour(_hour) {
+    hour_number_toggler_manager.set_val(_hour > 23 ? 0 : _hour < 0 ? 23 : _hour)
+    epoch_text_input_manager.set_val(null)
+    is_null = false
+  }
+
+  function set_minute(_minute) {
+    minute_number_toggler_manager.set_val(_minute > 59 ? 0 : _minute < 0 ? 59 : _minute)
+    if (Number.isInteger(_minute) && !Number.isInteger(hour_number_toggler_manager?.val)) {
+      hour_number_toggler_manager.set_val(0)
+    }
+    epoch_text_input_manager.set_val(null)
+    is_null = false
+  }
+
+  function set_second(_second) {
+    second_number_toggler_manager.set_val(_second > 59 ? 0 : _second < 0 ? 59 : _second)
+    if (Number.isInteger(_second) && !Number.isInteger(minute_number_toggler_manager?.val)) {
+      minute_number_toggler_manager.set_val(0)
+    }
+    if (Number.isInteger(_second) && !Number.isInteger(hour_number_toggler_manager?.val)) {
+      hour_number_toggler_manager.set_val(0)
+    }
+    epoch_text_input_manager.set_val(null)
+    is_null = false
+  }
+
+  function set_picker_data(_picker_year, _picker_month) {
+    if (!Number.isInteger(_picker_month)) {
+      _picker_month = new Date().getMonth() + 1
+    } else {
+      if (_picker_month < 1) {
+        _picker_month = 12
+        _picker_year -= 1
+      } else if (_picker_month > 12) {
+        _picker_month = 1
+        _picker_year += 1
+      }
+    }
+    if (!Number.isInteger(_picker_year)) {
+      _picker_year = new Date().getFullYear()
+    }
+    _picker_year = Math.max(-10000, Math.min(3000, _picker_year))
+    picker_year = _picker_year
+    picker_month = _picker_month
+  }
+
+  function handle_left_month() {
+    if (["year", "month"].includes(granularity_dropdown_manager?.val)) {
+      if (picker_month < 2) {
+        picker_month = 12
+        picker_year -= 1
+      } else {
+        picker_month -= 1
+      }
+      epoch_text_input_manager.set_val(null)
+    } else {
+      set_picker_data(picker_year, picker_month - 1)
+    }
+    is_null = false
+  }
+
+  function handle_right_month() {
+    if (["year", "month"].includes(granularity_dropdown_manager?.val)) {
+      if (picker_month > 11) {
+        picker_month = 1
+        picker_year += 1
+      } else {
+        picker_month += 1
+      }
+      epoch_text_input_manager.set_val(null)
+    } else {
+      set_picker_data(picker_year, picker_month + 1)
+    }
+    is_null = false
+  }
+
+  function finish() {
+    set_picker_data(val?.year, val?.month)
+    popover_manager.close()
+    if (typeof config?.on_finish == "function") {
+      config?.on_finish(val)
+    }
+  }
+
+  function init(config) {
+    const time_full = get_time_object_from_val(config?.val, config?.format, config?.granularity, config?.timezone)
+    is_show_granularity_dropdown = config?.is_show_granularity_dropdown ?? false
+    picker_year = config?.picker_year ?? new Date().getFullYear()
+    picker_month = config?.picker_month ?? new Date().getMonth() + 1
+    is_pick_month_year = config?.val?.is_pick_month_year ?? false
+    epoch_text_input_manager = create_text_input_manager({
+      label: "epoch",
+      placeholder: "epoch",
+      val: time_full?.epoch,
+    })
+    popover_manager = create_popover_manager({
+      type: "dropdown",
+      min_width: 320,
+      target_width: 340,
+      target_height: 350, // tbd can dynamically set later or fix popover dynamic relocatation
+      max_height: 400,
+      anchor_id: () => `button_${main_toggle_button_manager?.id}`,
+    })
+    main_toggle_button_manager = create_button_manager({
+      type: "outlined",
+      is_disabled: () => is_disabled,
+      is_compressed: true,
+      text: () =>
+        !is_null && val?.content
+          ? val?.content
+          : typeof val != "object" && val
+          ? val
+          : `Select ${time_formats?.[format]?.name}`,
+      popover_target: () => `popover_${popover_manager?.id}`,
+    })
+    left_month_button_manager = create_button_manager({
+      type: "soft",
+      is_uniform: true,
+      support_icon: "arrow",
+      icon_deg: 270,
+      is_disabled: () => is_disabled,
+      on_click: () => handle_left_month(),
+    })
+    right_month_button_manager = create_button_manager({
+      type: "soft",
+      is_uniform: true,
+      support_icon: "arrow",
+      icon_deg: 90,
+      is_disabled: () => is_disabled,
+      on_click: () => handle_right_month(),
+    })
+    prempt_month_year_button_manager = create_button_manager({
+      type: "soft",
+      text: () =>
+        "year" != granularity_dropdown_manager?.val
+          ? `${month_names[picker_month - 1]} ${picker_year}`
+          : year ?? "Select Year",
+      is_disabled: () => is_disabled,
+      on_click: () => (is_pick_month_year = !is_pick_month_year),
+    })
+    year_minus_one_button_manager = create_button_manager({
+      type: "outlined",
+      text: "-1",
+      min_height: 2,
+      is_disabled: () => is_disabled,
+      on_click: () => set_year((Number.isInteger(year) ? year : picker_year ? picker_year : 0) - 1),
+    })
+    year_plus_one_button_manager = create_button_manager({
+      type: "outlined",
+      text: "+1",
+      min_height: 2,
+      is_disabled: () => is_disabled,
+      on_click: () => set_year((Number.isInteger(year) ? year : picker_year ? picker_year : 0) + 1),
+    })
+    year_minus_hundred_button_manager = create_button_manager({
+      type: "outlined",
+      text: "-100",
+      min_height: 2,
+      is_disabled: () => is_disabled,
+      on_click: () => set_year((Number.isInteger(year) ? year : picker_year ? picker_year : 0) - 100),
+    })
+    year_plus_hundred_button_manager = create_button_manager({
+      type: "outlined",
+      text: "+100",
+      min_height: 2,
+      is_disabled: () => is_disabled,
+      on_click: () => set_year((Number.isInteger(year) ? year : picker_year ? picker_year : 0) + 100),
+    })
+    back_to_calendar_button_manager = create_button_manager({
+      type: "soft",
+      text: "Back to Calendar",
+      support_icon: "arrow_tailed",
+      icon_pos: "left",
+      icon_deg: 180,
+      is_disabled: () => is_disabled,
+      on_click: () => (is_pick_month_year = false),
+    })
+    hour_number_toggler_manager = create_number_toggler({
+      val: config?.hour,
+      label: "Hour",
+      on_change: (input) => set_hour(input),
+    })
+    minute_number_toggler_manager = create_number_toggler({
+      val: config?.minute,
+      label: "Minute",
+      on_change: (input) => set_minute(input),
+    })
+    second_number_toggler_manager = create_number_toggler({
+      val: config?.second,
+      label: "Second",
+      on_change: (input) => set_second(input),
+    })
+    period_days_number_toggler_manager = create_number_toggler({
+      val: config?.days,
+      label: "Days",
+    })
+    period_hours_number_toggler_manager = create_number_toggler({
+      val: config?.hours,
+      label: "Hours",
+    })
+    period_minutes_number_toggler_manager = create_number_toggler({
+      val: config?.minutes,
+      label: "Minutes",
+    })
+    period_seconds_number_toggler_manager = create_number_toggler({
+      val: config?.seconds,
+      label: "Seconds",
+    })
+    set_null_button_manager = create_button_manager({
+      type: "outlined",
+      text: "Clear",
+      is_disabled: () => is_disabled,
+      on_click: () => set_val(null),
+    })
+    set_to_now_button_manager = create_button_manager({
+      type: "outlined",
+      text: "Set to Now",
+      is_disabled: () => is_disabled,
+      on_click: () => set_to_now(),
+    })
+    reset_timezone_button_manager = create_button_manager({
+      type: "outlined",
+      support_icon: "refresh",
+      is_uniform: true,
+      is_disabled: () => is_disabled,
+      on_click: () => set_timezone(Intl.DateTimeFormat().resolvedOptions().timeZone),
+    })
+    finish_button_manager = create_button_manager({
+      text: "Finish",
+      on_click: () => finish(),
+    })
+    timezone_dropdown_manager = create_dropdown_manager({
+      placeholder: "Timezone",
+      button_type: "outlined",
+      target_width: 180,
+      val: time_full?.timezone ?? null,
+      selected_font_size: 1.4,
+      options: common_timezones.map((h) => ({ key: h?.text, name: `${h?.text} (${h?.offset})` })),
+      on_item_click: (input) => set_timezone(input?.key),
+    })
+    month_dropdown_manager = create_dropdown_manager({
+      placeholder: "Month",
+      button_type: "outlined",
+      target_width: 180,
+      selected_font_size: 1.4,
+      val: time_full?.month ?? null,
+      options: Array.isArray(month_names) ? month_names.map((h, i) => ({ key: i + 1, name: `${i + 1} - ${h}` })) : null,
+      on_item_click: (input) => set_month(input?.key),
+    })
+    granularity_dropdown_manager = create_dropdown_manager({
+      placeholder: "Granularity",
+      button_type: "outlined",
+      target_width: 180,
+      selected_font_size: 1.4,
+      val: time_full?.granularity ?? "day",
+      mt: 1,
+      options: Array.isArray(granularity_options)
+        ? granularity_options.filter((h) => granularities.some((j) => j == h)).map((h) => ({ key: h, name: h }))
+        : null,
+      on_item_click: (input) => set_granularity(input?.key),
+    })
+    set_day_of_month_button_managers()
+    set_val(config?.val?.is_null ?? config?.val == null ? null : time_full)
+  }
+
+  init(config)
+
+  return {
+    id,
+    get val() {
+      return val
+    },
+    get label() {
+      return label
+    },
+    get is_wide_view() {
+      return is_wide_view
+    },
+    get format() {
+      return format
+    },
+    get picker_year() {
+      return picker_year
+    },
+    get picker_month() {
+      return picker_month
+    },
+    get is_pick_month_year() {
+      return is_pick_month_year
+    },
+    get granularity_options() {
+      return granularity_options
+    },
+    get is_disabled() {
+      return is_disabled
+    },
+    get is_popover() {
+      return is_popover
+    },
+    get is_null() {
+      return is_null
+    },
+    get year() {
+      return year
+    },
+    get day_of_month() {
+      return day_of_month
+    },
+    get day_of_week() {
+      return day_of_week
+    },
+    get day_of_year() {
+      return day_of_year
+    },
+    get week_of_year() {
+      return week_of_year
+    },
+    get datetime() {
+      return datetime
+    },
+    get is_show_granularity_dropdown() {
+      return is_show_granularity_dropdown
+    },
+    get epoch_text_input_manager() {
+      return epoch_text_input_manager
+    },
+    get picker_month_day_of_week() {
+      return picker_month_day_of_week
+    },
+    get picker_days_in_month() {
+      return picker_days_in_month
+    },
+    get boxes_in_picker() {
+      return boxes_in_picker
+    },
+    get popover_manager() {
+      return popover_manager
+    },
+    get left_month_button_manager() {
+      return left_month_button_manager
+    },
+    get right_month_button_manager() {
+      return right_month_button_manager
+    },
+    get prempt_month_year_button_manager() {
+      return prempt_month_year_button_manager
+    },
+    get year_minus_one_button_manager() {
+      return year_minus_one_button_manager
+    },
+    get year_plus_one_button_manager() {
+      return year_plus_one_button_manager
+    },
+    get year_minus_hundred_button_manager() {
+      return year_minus_hundred_button_manager
+    },
+    get year_plus_hundred_button_manager() {
+      return year_plus_hundred_button_manager
+    },
+    get back_to_calendar_button_manager() {
+      return back_to_calendar_button_manager
+    },
+    get hour_number_toggler_manager() {
+      return hour_number_toggler_manager
+    },
+    get minute_number_toggler_manager() {
+      return minute_number_toggler_manager
+    },
+    get second_number_toggler_manager() {
+      return second_number_toggler_manager
+    },
+    get period_days_number_toggler_manager() {
+      return period_days_number_toggler_manager
+    },
+    get period_hours_number_toggler_manager() {
+      return period_hours_number_toggler_manager
+    },
+    get period_minutes_number_toggler_manager() {
+      return period_minutes_number_toggler_manager
+    },
+    get period_seconds_number_toggler_manager() {
+      return period_seconds_number_toggler_manager
+    },
+    get set_null_button_manager() {
+      return set_null_button_manager
+    },
+    get set_to_now_button_manager() {
+      return set_to_now_button_manager
+    },
+    get reset_timezone_button_manager() {
+      return reset_timezone_button_manager
+    },
+    get main_toggle_button_manager() {
+      return main_toggle_button_manager
+    },
+    get finish_button_manager() {
+      return finish_button_manager
+    },
+    get timezone_dropdown_manager() {
+      return timezone_dropdown_manager
+    },
+    get granularity_dropdown_manager() {
+      return granularity_dropdown_manager
+    },
+    get month_dropdown_manager() {
+      return month_dropdown_manager
+    },
+    get day_of_month_button_managers() {
+      return day_of_month_button_managers
+    },
+    get is_show_calendar() {
+      return is_show_calendar
+    },
+    month_names,
+    days_of_week_names,
+    granularities,
+    set_val,
+    set_granularity,
+    set_timezone,
+    set_to_now,
+    set_year,
+    set_month,
+    set_day_of_month,
+    set_hour,
+    set_minute,
+    set_second,
+    set_picker_data,
+    handle_left_month,
+    handle_right_month,
+    finish,
+  }
+}