sveltekit-ui 1.1.16 → 1.1.17

package/dist/Components/TimeInput/index.svelte.js

@@ -1,638 +0,0 @@
-import { create_popover_manager } from "../Popover/index.svelte.js"
-import { create_button_manager } from "../Button/index.svelte.js"
-import { create_dropdown_manager } from "../Dropdown/index.svelte.js"
-import { create_text_input_manager } from "../TextInput/index.svelte.js"
-import { create_number_toggler } from "./NumberToggler/index.svelte.js"
-import { create_unique_id, set_closurable } from "../../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 "./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,
-  }
-}