v-calendar-3 1.0.0

package/src/utils/popovers.ts

@@ -0,0 +1,216 @@
+import type { Placement } from '@popperjs/core';
+import type { ComponentPublicInstance, Directive, DirectiveBinding } from 'vue';
+import { elementContains, on, resolveDocument, resolveEl } from './helpers';
+
+export type PopoverVisibility = 'click' | 'hover' | 'hover-focus' | 'focus';
+
+export interface PopoverOptions {
+  id: PropertyKey;
+  visibility: PopoverVisibility;
+  isInteractive: boolean;
+  autoHide: boolean;
+  force: boolean;
+  target: unknown;
+  placement: Placement;
+  modifiers: any;
+  data: any;
+  showDelay: number;
+  hideDelay: number;
+}
+
+export interface PopoverState {
+  isVisible: boolean;
+  target: unknown;
+  data: any;
+  transition: string;
+  placement: Placement;
+  direction: string;
+  positionFixed: false;
+  modifiers: any[];
+  isInteractive: boolean;
+  visibility: PopoverVisibility;
+  isHovered: boolean;
+  isFocused: boolean;
+  autoHide: boolean;
+  force: boolean;
+}
+
+export interface PopoverEvent {
+  detail: Partial<PopoverOptions>;
+}
+
+export interface PopoverEventHandlers {
+  click: (e: MouseEvent) => void;
+  mousemove: (e: MouseEvent) => void;
+  mouseleave: (e: MouseEvent) => void;
+  focusin: (e: MouseEvent) => void;
+  focusout: (e: MouseEvent) => void;
+}
+
+function dispatchPopoverEvent(
+  name: 'show-popover' | 'hide-popover' | 'toggle-popover',
+  opts: Partial<PopoverOptions>,
+) {
+  const ownerDocument = resolveDocument(opts.target);
+  const CustomEventConstructor = ownerDocument?.defaultView?.CustomEvent;
+  if (!ownerDocument || !CustomEventConstructor) return;
+  ownerDocument.dispatchEvent(
+    new CustomEventConstructor(name, {
+      detail: opts,
+    }),
+  );
+}
+
+export function showPopover(opts: Partial<PopoverOptions>) {
+  dispatchPopoverEvent('show-popover', opts);
+}
+
+export function hidePopover(opts: Partial<PopoverOptions>) {
+  dispatchPopoverEvent('hide-popover', opts);
+}
+
+export function togglePopover(opts: Partial<PopoverOptions>) {
+  dispatchPopoverEvent('toggle-popover', opts);
+}
+
+export function getPopoverEventHandlers(
+  opts: Partial<PopoverOptions>,
+): Partial<PopoverEventHandlers> {
+  const { visibility } = opts;
+  const click = visibility === 'click';
+  const hover = visibility === 'hover';
+  const hoverFocus = visibility === 'hover-focus';
+  const focus = visibility === 'focus';
+  opts.autoHide = !click;
+  let hovered = false;
+  let focused = false;
+
+  const clickHandler = (e: MouseEvent) => {
+    if (click) {
+      togglePopover({
+        ...opts,
+        target: opts.target || (e.currentTarget as HTMLElement),
+      });
+      e.stopPropagation();
+    }
+  };
+  const mouseMoveHandler = (e: MouseEvent) => {
+    if (!hovered) {
+      hovered = true;
+      if (hover || hoverFocus) {
+        showPopover({
+          ...opts,
+          target: opts.target || (e.currentTarget as HTMLElement),
+        });
+      }
+    }
+  };
+  const mouseLeaveHandler = (e: MouseEvent) => {
+    if (hovered) {
+      hovered = false;
+      if (hover || (hoverFocus && !focused)) {
+        hidePopover({
+          ...opts,
+          target: opts.target || (e.currentTarget as HTMLElement),
+        });
+      }
+    }
+  };
+  const focusInHandler = (e: FocusEvent) => {
+    if (!focused) {
+      focused = true;
+      if (focus || hoverFocus) {
+        showPopover({
+          ...opts,
+          target: opts.target || (e.currentTarget as HTMLElement),
+        });
+      }
+    }
+  };
+  const focusOutHandler = (e: FocusEvent) => {
+    if (
+      focused &&
+      !elementContains(e.currentTarget as Node, e.relatedTarget as Element)
+    ) {
+      focused = false;
+      if (focus || (hoverFocus && !hovered)) {
+        hidePopover({
+          ...opts,
+          target: opts.target || (e.currentTarget as HTMLElement),
+        });
+      }
+    }
+  };
+
+  const handlers: Record<string, Function> = {};
+  switch (opts.visibility) {
+    case 'click':
+      handlers.click = clickHandler;
+      break;
+    case 'hover':
+      handlers.mousemove = mouseMoveHandler;
+      handlers.mouseleave = mouseLeaveHandler;
+      break;
+    case 'focus':
+      handlers.focusin = focusInHandler;
+      handlers.focusout = focusOutHandler;
+      break;
+    case 'hover-focus':
+      handlers.mousemove = mouseMoveHandler;
+      handlers.mouseleave = mouseLeaveHandler;
+      handlers.focusin = focusInHandler;
+      handlers.focusout = focusOutHandler;
+      break;
+  }
+  return handlers;
+}
+
+const removeHandlers = (target: Element | ComponentPublicInstance | string) => {
+  const el = resolveEl(target);
+  if (el == null) return;
+  const handlers = (el as any).popoverHandlers;
+  if (!handlers || !handlers.length) return;
+  handlers.forEach((handler: Function) => handler());
+  delete (el as any).popoverHandlers;
+};
+
+const addHandlers = (
+  target: Element | ComponentPublicInstance | string,
+  opts: Partial<PopoverOptions>,
+) => {
+  const el = resolveEl(target);
+  if (el == null) return;
+  const remove: Function[] = [];
+  const handlers = getPopoverEventHandlers(opts);
+  Object.entries(handlers).forEach(([event, handler]) => {
+    remove.push(on(el, event, handler as EventListener));
+  });
+  (el as any).popoverHandlers = remove;
+};
+
+export const popoverDirective: Directive = {
+  mounted(el: any, binding: DirectiveBinding<PopoverOptions>) {
+    const { value } = binding;
+    if (!value) return;
+    addHandlers(el, value);
+  },
+  updated(el: any, binding: DirectiveBinding<PopoverOptions>) {
+    const { oldValue, value } = binding;
+    const oldVisibility = oldValue?.visibility;
+    const newVisibility = value?.visibility;
+    if (oldVisibility !== newVisibility) {
+      if (oldVisibility) {
+        removeHandlers(el);
+        if (!newVisibility) hidePopover({ ...oldValue, target: el });
+      }
+      if (newVisibility) {
+        addHandlers(el, value);
+      }
+    }
+  },
+  unmounted(el: Element, binding: DirectiveBinding<PopoverOptions>) {
+    const { value } = binding;
+    removeHandlers(el);
+    hidePopover({ ...value, target: el, hideDelay: 0, force: true });
+  },
+};

package/src/utils/theme.ts

@@ -0,0 +1,58 @@
+import type { DateRangeCell } from './date/range';
+import { Attribute } from './attribute';
+import {
+  type Bar,
+  BarRenderer,
+  type Content,
+  ContentRenderer,
+  type Dot,
+  DotRenderer,
+  type Glyph,
+  type GlyphRenderer,
+  type Highlight,
+  HighlightRenderer,
+} from './glyph';
+
+export interface Glyphs {
+  highlights: Highlight[];
+  dots: Dot[];
+  bars: Bar[];
+  content: Content[];
+}
+
+export class Theme {
+  color: string;
+  renderers: GlyphRenderer<Glyph>[] = [
+    new ContentRenderer(),
+    new HighlightRenderer(),
+    new DotRenderer(),
+    new BarRenderer(),
+  ];
+
+  constructor(color: string) {
+    this.color = color;
+  }
+
+  normalizeGlyphs(attr: Attribute) {
+    this.renderers.forEach(renderer => {
+      const type = renderer.type as keyof Attribute;
+      if (attr[type] != null) {
+        // @ts-ignore
+        attr[type] = renderer.normalizeConfig(this.color, attr[type]);
+      }
+    });
+  }
+
+  prepareRender(glyphs: Partial<Glyphs> = {}) {
+    this.renderers.forEach(renderer => {
+      renderer.prepareRender(glyphs);
+    });
+    return glyphs;
+  }
+
+  render(cell: DateRangeCell<Attribute>, glyphs: Partial<Glyphs>) {
+    this.renderers.forEach(renderer => {
+      renderer.render(cell, glyphs);
+    });
+  }
+}

package/src/utils/touch.ts

@@ -0,0 +1,72 @@
+import { isFunction, off, on } from './helpers';
+import type { CustomElement } from './helpers';
+
+interface SwipeHandlerOptions {
+  maxSwipeTime: number;
+  minHorizontalSwipeDistance: number;
+  maxVerticalSwipeDistance: number;
+}
+
+export const addHorizontalSwipeHandler = (
+  element: CustomElement,
+  handler: Function,
+  {
+    maxSwipeTime,
+    minHorizontalSwipeDistance,
+    maxVerticalSwipeDistance,
+  }: SwipeHandlerOptions,
+) => {
+  if (!element || !element.addEventListener || !isFunction(handler)) {
+    return null;
+  }
+  // State variables
+  let startX = 0;
+  let startY = 0;
+  let startTime: number | null = null;
+  let isSwiping = false;
+  function pointerStart(event: PointerEvent) {
+    if (!event.isPrimary || event.pointerType === 'mouse') return;
+    startX = event.screenX;
+    startY = event.screenY;
+    startTime = Date.now();
+    isSwiping = true;
+  }
+
+  function pointerEnd(event: PointerEvent) {
+    if (!isSwiping || !startTime) return;
+    isSwiping = false;
+    const deltaX = event.screenX - startX;
+    const deltaY = event.screenY - startY;
+    const deltaTime = Date.now() - startTime;
+    if (deltaTime < maxSwipeTime) {
+      if (
+        Math.abs(deltaX) >= minHorizontalSwipeDistance &&
+        Math.abs(deltaY) <= maxVerticalSwipeDistance
+      ) {
+        const arg = { toLeft: false, toRight: false };
+        if (deltaX < 0) {
+          // Swipe to the left
+          arg.toLeft = true;
+        } else {
+          // Swipe to the right
+          arg.toRight = true;
+        }
+        handler(arg);
+      }
+    }
+  }
+
+  function pointerCancel() {
+    isSwiping = false;
+  }
+
+  on(element, 'pointerdown', pointerStart, { passive: true });
+  on(element, 'pointerup', pointerEnd, { passive: true });
+  on(element, 'pointercancel', pointerCancel, { passive: true });
+
+  return () => {
+    off(element, 'pointerdown', pointerStart);
+    off(element, 'pointerup', pointerEnd);
+    off(element, 'pointercancel', pointerCancel);
+  };
+};

package/src/utils/useDisplayMode.ts

@@ -0,0 +1,198 @@
+import {
+  type ComputedRef,
+  type Ref,
+  computed,
+  getCurrentInstance,
+  onMounted,
+  onUnmounted,
+  ref,
+  watch,
+} from 'vue';
+
+export interface DarkModeClassConfig {
+  selector?: string;
+  darkClass?: string;
+}
+
+export type DarkModeConfig = boolean | 'system' | DarkModeClassConfig;
+
+interface DisplayModeState {
+  isDark: Ref<boolean>;
+  displayMode: ComputedRef<'dark' | 'light'>;
+}
+
+type LegacyMediaQueryList = MediaQueryList & {
+  addListener?: (listener: (event: MediaQueryListEvent) => void) => void;
+  removeListener?: (listener: (event: MediaQueryListEvent) => void) => void;
+};
+
+function getElementTheme(element: Element): 'dark' | 'light' | null {
+  const attributeTheme =
+    element.getAttribute('data-bs-theme') ?? element.getAttribute('data-theme');
+  if (attributeTheme === 'dark' || attributeTheme === 'light') {
+    return attributeTheme;
+  }
+
+  const colorScheme = (element as HTMLElement).style?.colorScheme
+    ?.trim()
+    .toLowerCase();
+  if (!colorScheme) return null;
+
+  const supportsDark = colorScheme.split(/\s+/).includes('dark');
+  const supportsLight = colorScheme.split(/\s+/).includes('light');
+  if (supportsDark === supportsLight) return null;
+  return supportsDark ? 'dark' : 'light';
+}
+
+function getAncestorTheme(
+  element: Element | null,
+  documentElement: Element,
+): 'dark' | 'light' | null {
+  for (let current = element; current; current = current.parentElement) {
+    const theme = getElementTheme(current);
+    if (theme) return theme;
+  }
+  return getElementTheme(documentElement);
+}
+
+export function useDisplayMode(config: Ref<DarkModeConfig>): DisplayModeState {
+  const instance = getCurrentInstance();
+  const isDark = ref(false);
+  const displayMode = computed(() => (isDark.value ? 'dark' : 'light'));
+
+  let mounted = false;
+  let mediaQuery: LegacyMediaQueryList | null = null;
+  let mutationObserver: MutationObserver | null = null;
+
+  const mediaListener = (event: MediaQueryListEvent) => {
+    isDark.value = event.matches;
+  };
+
+  function getRootNode(): Node | null {
+    return (instance?.proxy?.$el as Node | undefined) ?? null;
+  }
+
+  function getOwnerDocument(): Document | null {
+    return (
+      getRootNode()?.ownerDocument ??
+      (typeof document === 'undefined' ? null : document)
+    );
+  }
+
+  function removeMediaQuery() {
+    if (!mediaQuery) return;
+    if (mediaQuery.removeEventListener) {
+      mediaQuery.removeEventListener('change', mediaListener);
+    } else {
+      mediaQuery.removeListener?.(mediaListener);
+    }
+    mediaQuery = null;
+  }
+
+  function removeMutationObserver() {
+    mutationObserver?.disconnect();
+    mutationObserver = null;
+  }
+
+  function cleanup() {
+    removeMediaQuery();
+    removeMutationObserver();
+  }
+
+  function setupMediaQuery(ownerWindow: Window) {
+    if (mediaQuery || typeof ownerWindow.matchMedia !== 'function') return;
+    mediaQuery = ownerWindow.matchMedia(
+      '(prefers-color-scheme: dark)',
+    ) as LegacyMediaQueryList;
+    if (mediaQuery.addEventListener) {
+      mediaQuery.addEventListener('change', mediaListener);
+    } else {
+      mediaQuery.addListener?.(mediaListener);
+    }
+    isDark.value = mediaQuery.matches;
+  }
+
+  function setupSystem(ownerDocument: Document) {
+    const rootNode = getRootNode();
+    const ElementConstructor = ownerDocument.defaultView?.Element;
+    const rootElement =
+      ElementConstructor && rootNode instanceof ElementConstructor
+        ? rootNode
+        : (rootNode?.parentElement ?? null);
+
+    const update = () => {
+      const theme = getAncestorTheme(
+        rootElement,
+        ownerDocument.documentElement,
+      );
+      if (theme) {
+        removeMediaQuery();
+        isDark.value = theme === 'dark';
+        return;
+      }
+      const ownerWindow = ownerDocument.defaultView;
+      if (ownerWindow) setupMediaQuery(ownerWindow);
+    };
+
+    update();
+    const Observer = ownerDocument.defaultView?.MutationObserver;
+    if (Observer) {
+      mutationObserver = new Observer(update);
+      mutationObserver.observe(ownerDocument.documentElement, {
+        attributes: true,
+        attributeFilter: ['class', 'style', 'data-bs-theme', 'data-theme'],
+        subtree: true,
+      });
+    }
+  }
+
+  function setupClass(ownerDocument: Document, value: DarkModeClassConfig) {
+    const { selector = ':root', darkClass = 'dark' } = value;
+    const element = ownerDocument.querySelector(selector);
+    if (!element || !darkClass) {
+      isDark.value = false;
+      return;
+    }
+
+    const update = () => {
+      isDark.value = element.classList.contains(darkClass);
+    };
+    update();
+
+    const Observer = ownerDocument.defaultView?.MutationObserver;
+    if (Observer) {
+      mutationObserver = new Observer(update);
+      mutationObserver.observe(element, {
+        attributes: true,
+        attributeFilter: ['class'],
+      });
+    }
+  }
+
+  function setup() {
+    cleanup();
+    const value = config.value;
+    if (typeof value === 'boolean') {
+      isDark.value = value;
+      return;
+    }
+    if (!mounted) return;
+
+    const ownerDocument = getOwnerDocument();
+    if (!ownerDocument) return;
+    if (value === 'system') {
+      setupSystem(ownerDocument);
+    } else {
+      setupClass(ownerDocument, value);
+    }
+  }
+
+  watch(config, setup, { immediate: true });
+  onMounted(() => {
+    mounted = true;
+    setup();
+  });
+  onUnmounted(cleanup);
+
+  return { isDark, displayMode };
+}

package/src/utils/watchers.ts

@@ -0,0 +1,26 @@
+export const createWatcherController = () => {
+  const watchSkippers: Partial<Record<string, number>> = {};
+
+  const skipWatcher = (watcher: string, durationMs = 10) => {
+    watchSkippers[watcher] = Date.now() + durationMs;
+  };
+
+  const unskipWatcher = (watcher: string) => {
+    delete watchSkippers[watcher];
+  };
+
+  const handleWatcher = (watcher: string, handler: Function) => {
+    if (watcher in watchSkippers) {
+      const dateTime = watchSkippers[watcher] as number;
+      if (Date.now() < dateTime) return;
+      delete watchSkippers[watcher];
+    }
+    handler();
+  };
+
+  return { skipWatcher, unskipWatcher, handleWatcher };
+};
+
+const defaultController = createWatcherController();
+
+export const { skipWatcher, unskipWatcher, handleWatcher } = defaultController;