v-calendar-3 1.0.0

package/src/utils/defaults/index.ts

@@ -0,0 +1,77 @@
+import { type App, computed, reactive } from 'vue';
+import type { DarkModeConfig } from '../useDisplayMode';
+import { defaultsDeep, get, has, mapValues } from '../helpers';
+import locales from './locales';
+import masks from './masks.json';
+import touch from './touch.json';
+
+declare const window: any;
+
+interface DatePickerPopoverDefaults {
+  visibility?: string;
+  placement?: string;
+  isInteractive?: boolean;
+}
+
+interface DatePickerDefaults {
+  updateOnInput?: boolean;
+  inputDebounce?: number;
+  popover?: DatePickerPopoverDefaults;
+}
+
+export interface Defaults {
+  componentPrefix?: string;
+  color?: string;
+  isDark?: DarkModeConfig;
+  navVisibility?: string;
+  titlePosition?: string;
+  transition?: string;
+  touch?: object;
+  masks?: object;
+  locales?: any;
+  datePicker?: DatePickerDefaults;
+}
+
+const defaultConfig: Defaults = {
+  componentPrefix: 'V',
+  color: 'blue',
+  isDark: false,
+  navVisibility: 'click',
+  titlePosition: 'center',
+  transition: 'slide-h',
+  touch,
+  masks,
+  locales,
+  datePicker: {
+    updateOnInput: true,
+    inputDebounce: 1000,
+    popover: {
+      visibility: 'hover-focus',
+      placement: 'bottom-start',
+      isInteractive: true,
+    },
+  },
+};
+
+const state = reactive(defaultConfig);
+
+const defaultLocales = computed(() => {
+  return mapValues(state.locales, (l: any) => {
+    l.masks = defaultsDeep(l.masks, state.masks);
+    return l;
+  });
+});
+
+export { defaultLocales };
+
+export const getDefault = (path: string) => {
+  if (typeof window !== 'undefined' && has(window.__vcalendar__, path)) {
+    return get(window.__vcalendar__, path);
+  }
+  return get(state, path);
+};
+
+export const setupDefaults = (app: App, userDefaults: Defaults | undefined) => {
+  app.config.globalProperties.$VCalendar = state;
+  return Object.assign(state, defaultsDeep(userDefaults, state));
+};

package/src/utils/defaults/locales.ts

@@ -0,0 +1,123 @@
+interface LocaleConfig {
+  dow: number;
+  L: string;
+}
+
+interface LocaleSetting {
+  id: string;
+  firstDayOfWeek: number;
+  masks: {
+    L: string;
+  };
+}
+
+const locales: Record<string, LocaleConfig> = {
+  // Arabic
+  ar: { dow: 7, L: 'D/\u200FM/\u200FYYYY' },
+  // Bulgarian
+  bg: { dow: 2, L: 'D.MM.YYYY' },
+  // Catalan
+  ca: { dow: 2, L: 'DD/MM/YYYY' },
+  // Chinese (China)
+  'zh-CN': { dow: 2, L: 'YYYY/MM/DD' },
+  // Chinese (Taiwan)
+  'zh-TW': { dow: 1, L: 'YYYY/MM/DD' },
+  // Croatian
+  hr: { dow: 2, L: 'DD.MM.YYYY' },
+  // Czech
+  cs: { dow: 2, L: 'DD.MM.YYYY' },
+  // Danish
+  da: { dow: 2, L: 'DD.MM.YYYY' },
+  // Dutch
+  nl: { dow: 2, L: 'DD-MM-YYYY' },
+  // English (US)
+  'en-US': { dow: 1, L: 'MM/DD/YYYY' },
+  // English (Australia)
+  'en-AU': { dow: 2, L: 'DD/MM/YYYY' },
+  // English (Canada)
+  'en-CA': { dow: 1, L: 'YYYY-MM-DD' },
+  // English (Great Britain)
+  'en-GB': { dow: 2, L: 'DD/MM/YYYY' },
+  // English (Ireland)
+  'en-IE': { dow: 2, L: 'DD-MM-YYYY' },
+  // English (New Zealand)
+  'en-NZ': { dow: 2, L: 'DD/MM/YYYY' },
+  // English (South Africa)
+  'en-ZA': { dow: 1, L: 'YYYY/MM/DD' },
+  // Esperanto
+  eo: { dow: 2, L: 'YYYY-MM-DD' },
+  // Estonian
+  et: { dow: 2, L: 'DD.MM.YYYY' },
+  // Finnish
+  fi: { dow: 2, L: 'DD.MM.YYYY' },
+  // French
+  fr: { dow: 2, L: 'DD/MM/YYYY' },
+  // French (Canada)
+  'fr-CA': { dow: 1, L: 'YYYY-MM-DD' },
+  // French (Switzerland)
+  'fr-CH': { dow: 2, L: 'DD.MM.YYYY' },
+  // German
+  de: { dow: 2, L: 'DD.MM.YYYY' },
+  // Hebrew
+  he: { dow: 1, L: 'DD.MM.YYYY' },
+  // Indonesian
+  id: { dow: 2, L: 'DD/MM/YYYY' },
+  // Italian
+  it: { dow: 2, L: 'DD/MM/YYYY' },
+  // Japanese
+  ja: { dow: 1, L: 'YYYY年M月D日' },
+  // Korean
+  ko: { dow: 1, L: 'YYYY.MM.DD' },
+  // Latvian
+  lv: { dow: 2, L: 'DD.MM.YYYY' },
+  // Lithuanian
+  lt: { dow: 2, L: 'DD.MM.YYYY' },
+  // Macedonian
+  mk: { dow: 2, L: 'D.MM.YYYY' },
+  // Norwegian
+  nb: { dow: 2, L: 'D. MMMM YYYY' },
+  nn: { dow: 2, L: 'D. MMMM YYYY' },
+  // Polish
+  pl: { dow: 2, L: 'DD.MM.YYYY' },
+  // Portuguese
+  pt: { dow: 2, L: 'DD/MM/YYYY' },
+  // Romanian
+  ro: { dow: 2, L: 'DD.MM.YYYY' },
+  // Russian
+  ru: { dow: 2, L: 'DD.MM.YYYY' },
+  // Slovak
+  sk: { dow: 2, L: 'DD.MM.YYYY' },
+  // Spanish (Spain)
+  'es-ES': { dow: 2, L: 'DD/MM/YYYY' },
+  // Spanish (Mexico)
+  'es-MX': { dow: 2, L: 'DD/MM/YYYY' },
+  // Swedish
+  sv: { dow: 2, L: 'YYYY-MM-DD' },
+  // Thai
+  th: { dow: 1, L: 'DD/MM/YYYY' },
+  // Turkish
+  tr: { dow: 2, L: 'DD.MM.YYYY' },
+  // Ukrainian
+  uk: { dow: 2, L: 'DD.MM.YYYY' },
+  // Vietnam
+  vi: { dow: 2, L: 'DD/MM/YYYY' },
+};
+locales.en = locales['en-US'];
+locales.es = locales['es-ES'];
+locales.no = locales.nb;
+locales.zh = locales['zh-CN'];
+
+// Remap from abbr. to intuitive property names
+const localeSettings = Object.entries(locales).reduce(
+  (res, [id, { dow, L }]) => {
+    res[id] = {
+      id,
+      firstDayOfWeek: dow,
+      masks: { L },
+    };
+    return res;
+  },
+  {} as Record<string, LocaleSetting>,
+);
+
+export default localeSettings;

package/src/utils/defaults/masks.json

@@ -0,0 +1,15 @@
+{
+  "title": "MMMM YYYY",
+  "weekdays": "W",
+  "navMonths": "MMM",
+  "hours": "h A",
+  "input": ["L", "YYYY-MM-DD", "YYYY/MM/DD"],
+  "inputDateTime": ["L h:mm A", "YYYY-MM-DD h:mm A", "YYYY/MM/DD h:mm A"],
+  "inputDateTime24hr": ["L HH:mm", "YYYY-MM-DD HH:mm", "YYYY/MM/DD HH:mm"],
+  "inputTime": ["h:mm A"],
+  "inputTime24hr": ["HH:mm"],
+  "dayPopover": "WWW, MMM D, YYYY",
+  "data": ["L", "YYYY-MM-DD", "YYYY/MM/DD"],
+  "model": "iso",
+  "iso": "YYYY-MM-DDTHH:mm:ss.SSSZ"
+}

package/src/utils/defaults/touch.json

@@ -0,0 +1,5 @@
+{
+  "maxSwipeTime": 300,
+  "minHorizontalSwipeDistance": 60,
+  "maxVerticalSwipeDistance": 80
+}

package/src/utils/glyph.ts

@@ -0,0 +1,305 @@
+import { Attribute } from './attribute';
+import type { DateRangeCell } from './date/range';
+import { defaultsDeep, hasAny, isObject, isString } from './helpers';
+
+type GlyphTarget = 'base' | 'start' | 'end' | 'startEnd';
+type ThemeProp =
+  | 'class'
+  | 'wrapperClass'
+  | 'contentClass'
+  | 'style'
+  | 'contentStyle'
+  | 'color'
+  | 'fillMode';
+
+const targetProps: GlyphTarget[] = ['base', 'start', 'end', 'startEnd'];
+const displayProps: ThemeProp[] = [
+  'class',
+  'wrapperClass',
+  'contentClass',
+  'style',
+  'contentStyle',
+  'color',
+  'fillMode',
+];
+
+export interface Glyph {
+  key: string | number;
+  color: string;
+  class: string | any[];
+  style: Record<string, any>;
+}
+
+export interface Profile<T> {
+  start: T;
+  base: T;
+  end: T;
+  startEnd?: T;
+}
+
+// Highlights
+export type HighlightFillMode = 'solid' | 'light' | 'outline';
+export interface Highlight extends Glyph {
+  fillMode: HighlightFillMode;
+  wrapperClass: string | any[];
+  contentClass: string | any[];
+  contentStyle: Record<string, any>;
+}
+export type HighlightConfig =
+  | boolean
+  | string
+  | Partial<Highlight | Profile<Partial<Highlight>>>;
+
+// Dots
+export type Dot = Glyph;
+export type DotConfig = boolean | string | Partial<Dot | Profile<Partial<Dot>>>;
+
+// Bars
+export type Bar = Glyph;
+export type BarConfig = boolean | string | Partial<Bar | Profile<Partial<Bar>>>;
+
+// Content
+export type Content = Glyph;
+export type ContentConfig =
+  | string
+  | Partial<Content | Profile<Partial<Content>>>;
+
+const _defaultProfile = { base: {}, start: {}, end: {} };
+
+function normalizeConfig(
+  color: string,
+  config: any,
+  defaultProfile: any = _defaultProfile,
+): Profile<Glyph> {
+  let rootColor = color;
+  let root: any = {};
+  // Get the normalized root config
+  if (config === true || isString(config)) {
+    // Assign default color for booleans or strings
+    rootColor = isString(config) ? config : rootColor;
+    // Set the default root
+    root = { ...defaultProfile };
+  } else if (isObject(config)) {
+    if (hasAny(config as Record<string, any>, targetProps)) {
+      // Mixin target configs
+      root = { ...config };
+    } else {
+      // Mixin display configs
+      root = {
+        base: { ...(config as Record<string, any>) },
+        start: { ...(config as Record<string, any>) },
+        end: { ...(config as Record<string, any>) },
+      };
+    }
+  }
+  // Fill in missing targets
+  const result = defaultsDeep(
+    root,
+    { start: root.startEnd, end: root.startEnd },
+    defaultProfile,
+  ) as Profile<any>;
+  // Normalize each target
+  Object.entries(result).forEach(([targetType, targetConfig]) => {
+    let targetColor = rootColor;
+    if (targetConfig === true || isString(targetConfig)) {
+      targetColor = isString(targetConfig) ? targetConfig : targetColor;
+      // @ts-ignore
+      result[targetType] = { color: targetColor };
+    } else if (isObject(targetConfig)) {
+      if (hasAny(targetConfig, displayProps)) {
+        // @ts-ignore
+        result[targetType] = { ...targetConfig };
+      } else {
+        // @ts-ignore
+        result[targetType] = {};
+      }
+    }
+    // Set the theme color if it is missing
+    // @ts-ignore
+    defaultsDeep(result[targetType], { color: targetColor });
+  });
+  return result;
+}
+
+export interface GlyphRenderer<P extends Partial<Glyph>> {
+  type: string;
+  normalizeConfig(color: string, config: any): Profile<P>;
+  prepareRender(glyphs: Record<string, P[]>): void;
+  render(attr: DateRangeCell<Attribute>, glyphs: Record<string, P[]>): void;
+}
+
+export class HighlightRenderer implements GlyphRenderer<Highlight> {
+  type = 'highlight';
+
+  normalizeConfig(color: string, config: any) {
+    return normalizeConfig(color, config, {
+      base: { fillMode: 'light' },
+      start: { fillMode: 'solid' },
+      end: { fillMode: 'solid' },
+    }) as Profile<Highlight>;
+  }
+
+  prepareRender(glyphs: Record<string, Glyph[]>) {
+    glyphs.highlights = [];
+    if (!glyphs.content) glyphs.content = [];
+  }
+
+  render(
+    { data, onStart, onEnd }: DateRangeCell<Attribute>,
+    glyphs: Record<string, Highlight[]>,
+  ) {
+    const { key, highlight } = data;
+    if (!highlight) return;
+    const { highlights } = glyphs;
+    const { base, start, end } = highlight;
+    if (onStart && onEnd) {
+      highlights.push({
+        ...start,
+        key,
+        wrapperClass: `vc-day-layer vc-day-box-center-center vc-attr vc-${start.color}`,
+        class: [`vc-highlight vc-highlight-bg-${start.fillMode}`, start.class],
+        contentClass: [
+          `vc-attr vc-highlight-content-${start.fillMode} vc-${start.color}`,
+          start.contentClass,
+        ],
+      });
+    } else if (onStart) {
+      highlights.push({
+        ...base,
+        key: `${key}-base`,
+        wrapperClass: `vc-day-layer vc-day-box-right-center vc-attr vc-${base.color}`,
+        class: [
+          `vc-highlight vc-highlight-base-start vc-highlight-bg-${base.fillMode}`,
+          base.class,
+        ],
+      });
+      highlights.push({
+        ...start,
+        key,
+        wrapperClass: `vc-day-layer vc-day-box-center-center vc-attr vc-${start.color}`,
+        class: [`vc-highlight vc-highlight-bg-${start.fillMode}`, start.class],
+        contentClass: [
+          `vc-attr vc-highlight-content-${start.fillMode} vc-${start.color}`,
+          start.contentClass,
+        ],
+      });
+    } else if (onEnd) {
+      highlights.push({
+        ...base,
+        key: `${key}-base`,
+        wrapperClass: `vc-day-layer vc-day-box-left-center vc-attr vc-${base.color}`,
+        class: [
+          `vc-highlight vc-highlight-base-end vc-highlight-bg-${base.fillMode}`,
+          base.class,
+        ],
+      });
+      highlights.push({
+        ...end,
+        key,
+        wrapperClass: `vc-day-layer vc-day-box-center-center vc-attr vc-${end.color}`,
+        class: [`vc-highlight vc-highlight-bg-${end.fillMode}`, end.class],
+        contentClass: [
+          `vc-attr vc-highlight-content-${end.fillMode} vc-${end.color}`,
+          end.contentClass,
+        ],
+      });
+    } else {
+      highlights.push({
+        ...base,
+        key: `${key}-middle`,
+        wrapperClass: `vc-day-layer vc-day-box-center-center vc-attr vc-${base.color}`,
+        class: [
+          `vc-highlight vc-highlight-base-middle vc-highlight-bg-${base.fillMode}`,
+          base.class,
+        ],
+        contentClass: [
+          `vc-attr vc-highlight-content-${base.fillMode} vc-${base.color}`,
+          base.contentClass,
+        ],
+      });
+    }
+  }
+}
+
+export class BaseRenderer<T extends Partial<Glyph>>
+  implements GlyphRenderer<T>
+{
+  type = '';
+  collectionType = '';
+
+  constructor(type: string, collectionType: string) {
+    this.type = type;
+    this.collectionType = collectionType;
+  }
+
+  normalizeConfig(color: string, config: any) {
+    return normalizeConfig(color, config) as Profile<T>;
+  }
+
+  prepareRender(glyphs: Record<string, T[]>) {
+    glyphs[this.collectionType] = [];
+  }
+
+  render(
+    { data, onStart, onEnd }: DateRangeCell<Attribute>,
+    glyphs: Record<string, T[]>,
+  ) {
+    const { key } = data;
+    const item = data[this.type as keyof Attribute];
+    if (!key || !item) {
+      return;
+    }
+    const collection = glyphs[this.collectionType];
+    const { base, start, end } = item;
+    if (onStart) {
+      collection.push({
+        ...start,
+        key,
+        class: [
+          `vc-${this.type} vc-${this.type}-start vc-${start.color} vc-attr`,
+          start.class,
+        ],
+      });
+    } else if (onEnd) {
+      collection.push({
+        ...end,
+        key,
+        class: [
+          `vc-${this.type} vc-${this.type}-end vc-${end.color} vc-attr`,
+          end.class,
+        ],
+      });
+    } else {
+      collection.push({
+        ...base,
+        key,
+        class: [
+          `vc-${this.type} vc-${this.type}-base vc-${base.color} vc-attr`,
+          base.class,
+        ],
+      });
+    }
+  }
+}
+
+export class ContentRenderer extends BaseRenderer<Content> {
+  constructor() {
+    super('content', 'content');
+  }
+
+  normalizeConfig(_: string, config: any) {
+    return normalizeConfig('base', config) as Profile<Content>;
+  }
+}
+
+export class DotRenderer extends BaseRenderer<Dot> {
+  constructor() {
+    super('dot', 'dots');
+  }
+}
+
+export class BarRenderer extends BaseRenderer<Dot> {
+  constructor() {
+    super('bar', 'bars');
+  }
+}

package/src/utils/helpers.ts

@@ -0,0 +1,181 @@
+import _has from 'lodash/has';
+import _isDate from 'lodash/isDate';
+import isFunction from 'lodash/isFunction';
+import isString from 'lodash/isString';
+import _some from 'lodash/some';
+import type { ComponentPublicInstance } from 'vue';
+
+export { isFunction, isString };
+export { default as isBoolean } from 'lodash/isBoolean';
+export { default as isNumber } from 'lodash/isNumber';
+export { default as isUndefined } from 'lodash/isUndefined';
+export { default as get } from 'lodash/get';
+export { default as set } from 'lodash/set';
+export { default as mapValues } from 'lodash/mapValues';
+export { default as defaults } from 'lodash/defaults';
+export { default as defaultsDeep } from 'lodash/defaultsDeep';
+export { default as map } from 'lodash/map';
+export { default as head } from 'lodash/head';
+export { default as last } from 'lodash/last';
+
+// Type checkers
+export const getType = (value: any) =>
+  Object.prototype.toString.call(value).slice(8, -1);
+export const isDate = (value: unknown): value is Date =>
+  _isDate(value) && !isNaN(value.getTime());
+export const isObject = (value: unknown): value is object =>
+  getType(value) === 'Object';
+
+// Object utils
+const hasObj: any = _has;
+export { hasObj as has };
+export const hasAny = (obj: object, props: string[]) =>
+  _some(props, p => _has(obj, p));
+
+// Collection utils
+export const some = _some;
+
+export const pad = (val: string | number, len: number, char = '0') => {
+  val = val !== null && val !== undefined ? String(val) : '';
+  len = len || 2;
+  while (val.length < len) {
+    val = `${char}${val}`;
+  }
+  return val;
+};
+
+export const roundTenth = (n: number) => {
+  return Math.round(n * 100) / 100;
+};
+
+export const isArray = (val: any): val is any[] => Array.isArray(val);
+
+export const arrayHasItems = (array: any): boolean =>
+  isArray(array) && array.length > 0;
+
+export const resolveEl = (target: unknown): Node | null => {
+  if (target == null) return null;
+  if (isString(target)) {
+    return typeof document === 'undefined'
+      ? null
+      : document.querySelector(target);
+  }
+  return (target as ComponentPublicInstance).$el ?? target;
+};
+
+export const resolveDocument = (target?: unknown): Document | null => {
+  if ((target as Document | undefined)?.nodeType === 9) {
+    return target as Document;
+  }
+  const element = resolveEl(target);
+  return (
+    element?.ownerDocument ??
+    (typeof document === 'undefined' ? null : document)
+  );
+};
+
+export interface ElementPosition {
+  top: number;
+  left: number;
+}
+
+export interface CustomElement {
+  addEventListener: Function;
+  removeEventListener: Function;
+  dispatchEvent: Function;
+}
+
+export const off = (
+  element: CustomElement,
+  event: string,
+  handler: (e: any) => void,
+  opts: boolean | EventListenerOptions | undefined = undefined,
+) => {
+  element.removeEventListener(event, handler, opts);
+};
+
+export const on = (
+  element: CustomElement,
+  event: string,
+  handler: (e: any) => void,
+  opts: boolean | AddEventListenerOptions | undefined = undefined,
+) => {
+  element.addEventListener(event, handler, opts);
+  return () => off(element, event, handler, opts);
+};
+
+export const elementContains = (element: Node, child: Node) =>
+  !!element && !!child && (element === child || element.contains(child));
+
+export const onSpaceOrEnter = (
+  event: KeyboardEvent,
+  handler: (e: KeyboardEvent) => void,
+) => {
+  if (event.key === ' ' || event.key === 'Enter') {
+    handler(event);
+    event.preventDefault();
+  }
+};
+
+export const capitalize = (str: string) => {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+};
+
+export const omit = <T extends object, K extends [...(keyof T)[]]>(
+  obj: T,
+  ...keys: K
+) => {
+  const ret = {} as {
+    [K in keyof typeof obj]: (typeof obj)[K];
+  };
+  let key: keyof typeof obj;
+  for (key in obj) {
+    if (!keys.includes(key)) {
+      ret[key] = obj[key];
+    }
+  }
+  return ret;
+};
+
+export const pick = <T extends object, K extends keyof T>(
+  obj: T,
+  keys: K[],
+): Pick<T, K> => {
+  const ret: any = {};
+  keys.forEach(key => {
+    if (key in obj) ret[key] = obj[key];
+  });
+  return ret;
+};
+
+export function extend<T extends object, E extends object>(
+  value: T,
+  ext: E,
+): T & E {
+  const handler = {
+    get(target: T, prop: keyof (T | E)) {
+      if ((prop as string) in target) {
+        return target[prop];
+      }
+      return ext[prop];
+    },
+  };
+  // @ts-ignore
+  return new Proxy(value, handler) as T & E;
+}
+
+export function clamp(num: number, min: number, max: number) {
+  return Math.min(Math.max(num, min), max);
+}
+
+export function hash(str: string): number {
+  let hashcode = 0;
+  let chr;
+  if (str.length === 0) return hashcode;
+  for (let i = 0; i < str.length; i++) {
+    chr = str.charCodeAt(i);
+    hashcode = (hashcode << 5) - hashcode + chr;
+    hashcode |= 0; // Convert to 32bit integer
+  }
+  return hashcode;
+}