@getmicdrop/svelte-components 2.0.13 → 2.1.0

package/dist/components/Calendar/QuarterView.svelte

@@ -1,736 +0,0 @@
-<script>
-  import Icon from "../Icons/Icon.svelte";
-  import { getDay, getDaysInMonth, startOfMonth } from "date-fns";
-  import { writable } from "svelte/store";
-  import { fly } from "svelte/transition";
-  import { cubicOut } from "svelte/easing";
-  import Button from "../Button/Button.svelte";
-
-  export let currentevents = [];
-  export let selectedDates;
-  export let saveStatus = "";
-
-  let currentDate = new Date();
-  let currentYear = writable(currentDate.getUTCFullYear());
-  let currentMonth = writable(currentDate.getUTCMonth());
-
-  // Track slide direction for animations
-  let slideDirection = 0; // -1 for left (prev), 1 for right (next), 0 for no animation
-
-  let events = {};
-
-  // Process `currentevents` into a dictionary
-  $: {
-    const newEvents = {};
-    currentevents.forEach((event) => {
-      // event.date is already in YYYY-MM-DD format from normalizeDate
-      newEvents[event.date] = true;
-    });
-    events = newEvents;
-  }
-
-  // Check if a day is an event
-  function isEvent(year, month, day) {
-    const dateKey = `${year}-${String(month + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
-    return events[dateKey];
-  }
-
-  // Haptic feedback helper - iOS Safari compatible
-  function triggerHaptic(style = 'light') {
-    // Try iOS Haptic Engine first (iOS 13+)
-    if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.haptic) {
-      window.webkit.messageHandlers.haptic.postMessage(style);
-      return;
-    }
-
-    // Try Taptic Engine (older method)
-    if (window.TapticEngine) {
-      if (style === 'light') {
-        window.TapticEngine.impact({ style: 'light' });
-      } else if (style === 'medium') {
-        window.TapticEngine.impact({ style: 'medium' });
-      } else if (style === 'success') {
-        window.TapticEngine.notification({ type: 'success' });
-      }
-      return;
-    }
-
-    // Fallback to Vibration API (Android)
-    if (navigator.vibrate) {
-      const duration = style === 'light' ? 10 : style === 'medium' ? 20 : [10, 50, 10];
-      navigator.vibrate(duration);
-    }
-  }
-
-  // Toggle selection of an event day with optimistic update
-  function toggleDateSelection(year, month, day) {
-    if (isSwiping) return;
-
-    const dateKey = `${year}-${String(month + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
-
-    // Determine if selecting or deselecting for haptic feedback
-    const isCurrentlySelected = $selectedDates.includes(dateKey);
-
-    selectedDates.update((dates) => {
-      if (dates.includes(dateKey)) {
-        // Deselecting - medium haptic
-        triggerHaptic('medium');
-        return dates.filter((date) => date !== dateKey);
-      } else {
-        // Selecting - light haptic
-        triggerHaptic('light');
-        return [...dates, dateKey];
-      }
-    });
-  }
-
-  // Check if a day is in the past
-  function isPastDate(year, month, day) {
-    const today = new Date();
-    const date = new Date(year, month, day);
-    return date < today.setHours(0, 0, 0, 0);
-  }
-
-  let prevAnimating = false;
-  let nextAnimating = false;
-  let todayButtonPressed = false;
-
-  // Touch swipe detection
-  let touchStartX = 0;
-  let touchStartY = 0;
-  let touchStartTime = 0;
-  let isSwiping = false;
-
-  function handleTouchStart(e) {
-    touchStartX = e.touches[0].clientX;
-    touchStartY = e.touches[0].clientY;
-    touchStartTime = Date.now();
-    isSwiping = false;
-  }
-
-  function handleTouchMove(e) {
-    if (!touchStartX) return;
-
-    const touchCurrentX = e.touches[0].clientX;
-    const touchCurrentY = e.touches[0].clientY;
-    const diffX = touchStartX - touchCurrentX;
-    const diffY = touchStartY - touchCurrentY;
-
-    // If horizontal movement is greater than vertical, it's a swipe
-    if (Math.abs(diffX) > Math.abs(diffY) && Math.abs(diffX) > 10) {
-      isSwiping = true;
-    }
-  }
-
-  function handleTouchEnd(e) {
-    if (!touchStartX || !isSwiping) {
-      touchStartX = 0;
-      touchStartY = 0;
-      isSwiping = false;
-      return;
-    }
-
-    const touchEndX = e.changedTouches[0].clientX;
-    const touchEndY = e.changedTouches[0].clientY;
-    const diffX = touchStartX - touchEndX;
-    const diffY = touchStartY - touchEndY;
-    const diffTime = Date.now() - touchStartTime;
-
-    // Swipe detection: horizontal movement > 50px, mostly horizontal, and quick (< 300ms)
-    if (Math.abs(diffX) > 50 && Math.abs(diffX) > Math.abs(diffY) * 2 && diffTime < 300) {
-      if (diffX > 0) {
-        // Swiped left -> go to next month
-        handleNext(true); // Pass true to indicate swipe
-      } else {
-        // Swiped right -> go to previous month
-        handlePrev(true); // Pass true to indicate swipe
-      }
-    }
-
-    touchStartX = 0;
-    touchStartY = 0;
-    isSwiping = false;
-  }
-
-  function handleNext(isSwipe = false) {
-    if (nextAnimating) return;
-    if (!isSwipe) nextAnimating = true; // Only animate chevron on button click
-
-    // Haptic feedback for month navigation
-    triggerHaptic('medium');
-
-    slideDirection = 1; // Slide from right
-    currentMonth.update((month) => {
-      if (month === 11) {
-        currentYear.update((year) => year + 1);
-        return 0;
-      }
-      return month + 1;
-    });
-    setTimeout(() => {
-      nextAnimating = false;
-      slideDirection = 0;
-    }, 300);
-  }
-
-  function handlePrev(isSwipe = false) {
-    if (prevAnimating) return;
-    if (!isSwipe) prevAnimating = true; // Only animate chevron on button click
-
-    // Haptic feedback for month navigation
-    triggerHaptic('medium');
-
-    slideDirection = -1; // Slide from left
-    currentMonth.update((month) => {
-      if (month === 0) {
-        currentYear.update((year) => year - 1);
-        return 11;
-      }
-      return month - 1;
-    });
-    setTimeout(() => {
-      prevAnimating = false;
-      slideDirection = 0;
-    }, 300);
-  }
-
-  // Add all available event dates to the selection
-  function setAllAvailable() {
-    const year = $currentYear;
-    const month = $currentMonth;
-
-    selectedDates.update((dates) => {
-      const newDates = [...dates];
-      for (let day = 1; day <= getDaysInMonth(new Date(year, month)); day++) {
-        const dateKey = `${year}-${String(month + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
-        if (isEvent(year, month, day) && !newDates.includes(dateKey)) {
-          newDates.push(dateKey);
-        }
-      }
-      return newDates;
-    });
-  }
-
-  // Remove all event dates from the selection
-  function setAllUnavailable() {
-    const year = $currentYear;
-    const month = $currentMonth;
-
-    selectedDates.update((dates) =>
-      dates.filter((dateKey) => {
-        const [y, m, d] = dateKey.split("-").map(Number);
-        return !(y === year && m === month + 1 && isEvent(year, month, d));
-      }),
-    );
-  }
-
-  // Handle Today button touch start
-  function handleTodayTouchStart() {
-    if (isSwiping) return;
-    todayButtonPressed = true;
-    triggerHaptic('light');
-  }
-
-  // Handle Today button touch end
-  function handleTodayTouchEnd() {
-    todayButtonPressed = false;
-  }
-
-  // Navigate to today's month with animation
-  function goToToday(event) {
-    // Prevent action if user is swiping
-    if (isSwiping) return;
-
-    // Remove focus/hover state from button immediately on mobile
-    if (event?.target) {
-      event.target.blur();
-    }
-
-    const today = new Date();
-    const todayYear = today.getUTCFullYear();
-    const todayMonth = today.getUTCMonth();
-
-    const currentYearVal = $currentYear;
-    const currentMonthVal = $currentMonth;
-
-    // Calculate if we're going forward or backward in time
-    const currentDate = new Date(currentYearVal, currentMonthVal, 1);
-    const targetDate = new Date(todayYear, todayMonth, 1);
-
-    if (targetDate > currentDate) {
-      // Going forward in time - slide from right
-      slideDirection = 1;
-    } else if (targetDate < currentDate) {
-      // Going backward in time - slide from left
-      slideDirection = -1;
-    } else {
-      // Already on today's month - no animation needed
-      return;
-    }
-
-    currentYear.set(todayYear);
-    currentMonth.set(todayMonth);
-
-    // Reset slide direction after animation
-    setTimeout(() => {
-      slideDirection = 0;
-    }, 300);
-  }
-</script>
-
-<div class="calendar-container">
-  <!-- Month Navigation -->
-  <header class="calendar-header sticky top-0 bg-bg-primary z-10">
-    <button
-      on:click={handlePrev}
-      class="nav-btn"
-      class:animating={prevAnimating}
-      aria-label="Previous month"
-    >
-      <Icon name="ChevronLeft" size="16" />
-    </button>
-
-    <div class="month-display">
-      {#key `${$currentYear}-${$currentMonth}`}
-        <div class="month-content-wrapper" in:fly={{ x: slideDirection * 100, duration: 250, easing: cubicOut, opacity: 0 }} out:fly={{ x: slideDirection * -100, duration: 250, easing: cubicOut, opacity: 0 }}>
-          <div class="month-content">
-            <h2 class="month-title">
-              {new Intl.DateTimeFormat("en", { month: "long" }).format(
-                new Date($currentYear, $currentMonth),
-              )}
-            </h2>
-            <span class="year-text">{$currentYear}</span>
-          </div>
-          {#if saveStatus}
-            <div class="save-indicator-overlay">
-              {#if saveStatus === "saving"}
-                <span class="animate-spin text-green-500">
-                  <Icon name="Reload" size="20" />
-                </span>
-              {:else if saveStatus === "saved"}
-                <span class="text-green-500">
-                  <Icon name="CheckCircle" size="20" />
-                </span>
-              {/if}
-            </div>
-          {/if}
-        </div>
-      {/key}
-    </div>
-
-    <button
-      on:click={handleNext}
-      class="nav-btn"
-      class:animating={nextAnimating}
-      aria-label="Next month"
-    >
-      <Icon name="ChevronRight" size="16" />
-    </button>
-  </header>
-
-  <!-- Calendar Grid -->
-  <div class="calendar-grid-wrapper">
-    {#key `${$currentYear}-${$currentMonth}-${Object.keys(events).length}`}
-      <div
-        class="calendar-grid"
-        on:touchstart={handleTouchStart}
-        on:touchmove={handleTouchMove}
-        on:touchend={handleTouchEnd}
-        in:fly={{ x: slideDirection * 100, duration: 250, easing: cubicOut }}
-        out:fly={{ x: slideDirection * -100, duration: 250, easing: cubicOut }}
-      >
-      {#each ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"] as dayName}
-        <div class="day-header">{dayName}</div>
-      {/each}
-
-      {#each Array(getDay(startOfMonth(new Date($currentYear, $currentMonth)))) as _}
-        <div class="empty-day"></div>
-      {/each}
-
-      {#each Array(getDaysInMonth(new Date($currentYear, $currentMonth)))
-        .fill()
-        .map((_, i) => i + 1) as day}
-        {@const isPast = isPastDate($currentYear, $currentMonth, day)}
-        {@const isDisabled = !isEvent($currentYear, $currentMonth, day) || isPast}
-        {@const isSelected = $selectedDates.includes(
-          `${$currentYear}-${String($currentMonth + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`
-        )}
-        {@const isPastSelected = isPast && isSelected}
-
-        <button
-          class="day-cell"
-          class:disabled={isDisabled}
-          class:selected={isSelected && !isPast}
-          class:past-selected={isPastSelected}
-          on:click={() => !isDisabled && toggleDateSelection($currentYear, $currentMonth, day)}
-          disabled={isDisabled}
-          aria-label="Day {day}"
-          aria-pressed={isSelected}
-        >
-          <span class="day-number">
-            {day}
-          </span>
-        </button>
-      {/each}
-
-      <!-- Fill remaining cells in the last row to maintain grid structure -->
-      {#each Array((7 - ((getDay(startOfMonth(new Date($currentYear, $currentMonth))) + getDaysInMonth(new Date($currentYear, $currentMonth))) % 7)) % 7) as _}
-        <div class="empty-day"></div>
-      {/each}
-      </div>
-    {/key}
-  </div>
-
-  <!-- Quick Actions -->
-  <div class="action-buttons" class:swiping={isSwiping}>
-    <div
-      class="today-button-wrapper"
-      class:pressed={todayButtonPressed}
-      on:touchstart={handleTodayTouchStart}
-      on:touchend={handleTodayTouchEnd}
-      on:touchcancel={handleTodayTouchEnd}
-    >
-      <Button
-        variant="blue-outline"
-        type="button"
-        size="lg"
-        on:click={goToToday}
-      >
-        Today
-      </Button>
-    </div>
-  </div>
-</div>
-
-<style>
-  .calendar-container {
-    margin-left: auto;
-    margin-right: auto;
-    width: 100%;
-    max-width: 28rem;
-    text-align: center;
-    touch-action: manipulation;
-}
-
-  .calendar-header {
-    margin-bottom: 1.5rem;
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-    display: grid;
-    grid-template-columns: 40px minmax(0, 1fr) 40px;
-    align-items: center;
-    gap: 8px;
-    position: relative;
-    isolation: isolate;
-    -moz-user-select: none;
-         user-select: none;
-    -webkit-user-select: none;
-    -webkit-touch-callout: none;
-}
-
-  .nav-btn {
-    display: flex;
-    height: 2.5rem;
-    width: 2.5rem;
-    align-items: center;
-    justify-content: center;
-    border-radius: 0.5rem;
-    border-width: 1px;
-    --tw-border-opacity: 1;
-    border-color: rgb(29 78 216 / var(--tw-border-opacity, 1));
-    background-color: hsl(var(--BG-Primary));
-    padding: 0.75rem;
-    --tw-text-opacity: 1;
-    color: rgb(29 78 216 / var(--tw-text-opacity, 1));
-    transition: opacity 0.15s ease;
-    -webkit-tap-highlight-color: transparent;
-    touch-action: manipulation;
-    -moz-user-select: none;
-         user-select: none;
-    -webkit-user-select: none;
-    -webkit-touch-callout: none;
-}
-
-  .nav-btn.animating {
-    opacity: 0.4;
-}
-
-  .month-display {
-    position: relative;
-    min-height: 48px;
-    overflow: hidden;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    min-width: 0;
-  }
-
-  .month-content-wrapper {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    /* GPU acceleration */
-    transform: translateZ(0);
-    backface-visibility: hidden;
-    will-change: transform;
-  }
-
-  .month-content {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    white-space: nowrap;
-  }
-
-  .month-title {
-    font-size: 1.125rem;
-    line-height: 1.75rem;
-    font-weight: 500;
-    color: hsl(var(--Text-Primary));
-    line-height: 1.2;
-}
-
-  .year-text {
-    font-size: 0.75rem;
-    line-height: 1rem;
-    font-weight: 400;
-    color: hsl(var(--Text-Tartiary));
-    line-height: 1;
-    margin-top: 2px;
-}
-
-  .save-indicator-overlay {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(50px, -50%);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 24px;
-    height: 24px;
-    z-index: 1;
-  }
-
-  .calendar-grid-wrapper {
-    position: relative;
-    overflow: hidden;
-    /* Set min-height for typical calendar (most months are 5-6 weeks) */
-    min-height: 410px;
-  }
-
-  .calendar-grid {
-    display: grid;
-    grid-template-columns: repeat(7, minmax(0, 1fr));
-    grid-auto-rows: minmax(56px, auto);
-    /* GPU acceleration for smooth grid sliding */
-    transform: translateZ(0);
-    backface-visibility: hidden;
-    will-change: transform;
-    position: absolute;
-    width: 100%;
-    top: 0;
-    left: 0;
-    border-width: 1px;
-    border-color: hsl(var(--Stroke-Secondary));
-    border-radius: 8px;
-    overflow: hidden;
-}
-
-  .day-header {
-    border-bottom-width: 1px;
-    border-right-width: 1px;
-    border-color: hsl(var(--Stroke-Secondary));
-    background-color: hsl(var(--BG-Primary));
-    padding-top: 0.75rem;
-    padding-bottom: 0.75rem;
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    font-weight: 500;
-    color: hsl(var(--Text-Tartiary));
-    -moz-user-select: none;
-         user-select: none;
-    -webkit-user-select: none;
-    -webkit-touch-callout: none;
-}
-
-  /* Top-left corner */
-  .day-header:nth-child(1) {
-    border-top-left-radius: 8px;
-  }
-
-  /* Top-right corner */
-  .day-header:nth-child(7) {
-    border-top-right-radius: 8px;
-    border-right: none;
-  }
-
-  .day-header:nth-child(7n) {
-    border-right: none;
-  }
-
-  .empty-day {
-    height: 3.5rem;
-    border-bottom-width: 1px;
-    border-right-width: 1px;
-    border-color: hsl(var(--Stroke-Secondary));
-    background-color: hsl(var(--BG-Primary));
-}
-
-  .empty-day:nth-child(7n) {
-    border-right: none;
-  }
-
-  /* Bottom-left corner - target last row, first column */
-  .empty-day:last-child:nth-child(7n+1) {
-    border-bottom-left-radius: 8px;
-  }
-
-  /* Bottom-right corner - target last row, last column */
-  .empty-day:last-child:nth-child(7n) {
-    border-bottom-right-radius: 8px;
-  }
-
-  .day-cell {
-    display: flex;
-    height: 3.5rem;
-    cursor: pointer;
-    align-items: center;
-    justify-content: center;
-    border-bottom-width: 1px;
-    border-right-width: 1px;
-    border-color: hsl(var(--Stroke-Secondary));
-    background-color: hsl(var(--BG-Primary));
-    padding: 0.25rem;
-    transition: background-color 0.1s ease;
-    -webkit-tap-highlight-color: transparent;
-    touch-action: manipulation;
-    -moz-user-select: none;
-         user-select: none;
-    -webkit-user-select: none;
-    -webkit-touch-callout: none;
-}
-
-  .day-cell:nth-child(7n) {
-    border-right: none;
-  }
-
-  /* Bottom-left corner - target last row, first column for day cells */
-  .day-cell:last-child:nth-child(7n+1) {
-    border-bottom-left-radius: 8px;
-  }
-
-  /* Bottom-right corner - target last row, last column for day cells */
-  .day-cell:last-child:nth-child(7n) {
-    border-bottom-right-radius: 8px;
-  }
-
-  .day-number {
-    display: flex;
-    height: 2rem;
-    width: 2rem;
-    align-items: center;
-    justify-content: center;
-    border-radius: 0.375rem;
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    font-weight: 500;
-    transition: all 0.15s ease;
-    -moz-user-select: none;
-         user-select: none;
-    -webkit-user-select: none;
-    -webkit-touch-callout: none;
-}
-
-  .day-cell:not(.disabled):not(.selected) .day-number {
-    color: hsl(var(--Text-Primary));
-}
-
-  .day-cell:not(.disabled):not(.selected):active .day-number {
-    --tw-bg-opacity: 1;
-    background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
-    transform: scale(0.95);
-    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
-}
-
-  .day-cell.selected .day-number {
-    --tw-bg-opacity: 1;
-    background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
-    --tw-text-opacity: 1;
-    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
-}
-
-  .day-cell.selected:active .day-number {
-    transform: scale(0.95);
-    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
-  }
-
-  .day-cell.past-selected .day-number {
-    background-color: hsl(var(--BG-Quaternary));
-    color: hsl(var(--Text-Tartiary));
-}
-
-  .day-cell.disabled {
-    background-color: hsl(var(--BG-Secondary) / 0.5);
-}
-
-  .day-cell.disabled .day-number {
-    pointer-events: none;
-    color: hsl(var(--Text-Tartiary) / 0.5);
-}
-
-  .action-buttons {
-    display: flex;
-    justify-content: center;
-}
-
-  .action-buttons.swiping {
-    pointer-events: none;
-    touch-action: none;
-  }
-
-  .today-button-wrapper {
-    transition: all 0.15s ease;
-    -webkit-tap-highlight-color: transparent;
-    -moz-user-select: none;
-         user-select: none;
-    -webkit-user-select: none;
-    -webkit-touch-callout: none;
-  }
-
-  .today-button-wrapper.pressed :global(button) {
-    background-color: rgba(99, 102, 241, 0.1) !important;
-    transform: scale(0.95);
-    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
-  }
-
-  /* Prevent hover state from sticking on mobile */
-  .action-buttons :global(button) {
-    -webkit-tap-highlight-color: transparent;
-    transition: all 0.15s ease;
-    -moz-user-select: none;
-         user-select: none;
-    -webkit-user-select: none;
-    -webkit-touch-callout: none;
-  }
-
-  @media (hover: none) {
-    .action-buttons :global(button:hover) {
-      /* Disable hover styles on touch devices */
-      background-color: transparent !important;
-    }
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .nav-btn,
-    .day-number,
-    .day-cell {
-      transition: none;
-    }
-  }
-</style>