@bridge-ui/vue 0.0.7 → 0.0.9

package/docs/examples/date-moment.ts

@@ -0,0 +1,334 @@
+/**
+ * Example Moment.js date adapter for `@bridge-ui/vue`.
+ * Copy into your app or wire via `BridgeUIProvider` / `createBridgeUI` `global.dates`.
+ * Not published as an npm package.
+ *
+ * Requires `moment` and `moment-timezone` (IANA zones via `moment.tz`).
+ */
+
+// ** External Imports
+import { clamp, isNil, isString, range } from "es-toolkit/compat";
+import moment, { type Moment } from "moment-timezone";
+
+// ** Core Imports
+import type {
+  DateAdapter,
+  DateAdapterContext,
+  DateAdapterTimeOptions,
+} from "@bridge-ui/core";
+
+/**
+ * Options for {@link createMomentDateAdapter}.
+ */
+export type MomentDateAdapterOptions = {
+  /**
+   * Default locale when context omits `locale`.
+   *
+   * @default undefined
+   */
+  locale?: string;
+
+  /**
+   * Default IANA time zone when context omits `timeZone`.
+   *
+   * @default undefined (system local zone)
+   */
+  timeZone?: string;
+};
+
+/**
+ * Builds a Moment-backed {@link DateAdapter} (`TDate = Date`) for Bridge calendars.
+ */
+export function createMomentDateAdapter(
+  options: MomentDateAdapterOptions = {},
+): DateAdapter<Date> {
+  const resolveLocale = (context?: DateAdapterContext) => {
+    return context?.locale ?? options.locale;
+  };
+
+  const resolveZone = (context?: DateAdapterContext) => {
+    return context?.timeZone ?? options.timeZone;
+  };
+
+  const toMoment = (date: Date, context?: DateAdapterContext): Moment => {
+    const locale = resolveLocale(context);
+    const zone = resolveZone(context);
+    let value = isNil(zone) ? moment(date) : moment.tz(date, zone);
+
+    if (!isNil(locale)) {
+      value = value.locale(locale);
+    }
+
+    return value;
+  };
+
+  const fromMoment = (value: Moment): Date => {
+    return value.toDate();
+  };
+
+  const isValid = (date: Date) => {
+    return date instanceof Date && !Number.isNaN(date.getTime());
+  };
+
+  const adapter: DateAdapter<Date> = {
+    getDay: (date, context) => toMoment(date, context).day(),
+
+    getDate: (date, context) => toMoment(date, context).date(),
+
+    getYear: (date, context) => toMoment(date, context).year(),
+
+    getHours: (date, context) => toMoment(date, context).hour(),
+
+    isAfter: (a, b, context) => adapter.isBefore(b, a, context),
+
+    getMonth: (date, context) => toMoment(date, context).month(),
+
+    getMinutes: (date, context) => toMoment(date, context).minute(),
+
+    getSeconds: (date, context) => toMoment(date, context).second(),
+
+    isSameDay: (a, b, context) => {
+      return toMoment(a, context).isSame(toMoment(b, context), "day");
+    },
+
+    setDate: (date, day, context) => {
+      return fromMoment(toMoment(date, context).clone().date(day));
+    },
+
+    isSameYear: (a, b, context) => {
+      return toMoment(a, context).isSame(toMoment(b, context), "year");
+    },
+
+    setYear: (date, year, context) => {
+      return fromMoment(toMoment(date, context).clone().year(year));
+    },
+
+    startOfDay: (date, context) => {
+      return fromMoment(toMoment(date, context).clone().startOf("day"));
+    },
+
+    endOfMonth: (date, context) => {
+      return fromMoment(toMoment(date, context).clone().endOf("month"));
+    },
+
+    isSameMonth: (a, b, context) => {
+      return toMoment(a, context).isSame(toMoment(b, context), "month");
+    },
+
+    setMonth: (date, month, context) => {
+      return fromMoment(toMoment(date, context).clone().month(month));
+    },
+
+    startOfMonth: (date, context) => {
+      return fromMoment(toMoment(date, context).clone().startOf("month"));
+    },
+
+    addDays: (date, amount, context) => {
+      return fromMoment(toMoment(date, context).clone().add(amount, "days"));
+    },
+
+    addYears: (date, amount, context) => {
+      return fromMoment(toMoment(date, context).clone().add(amount, "years"));
+    },
+
+    addMonths: (date, amount, context) => {
+      return fromMoment(toMoment(date, context).clone().add(amount, "months"));
+    },
+
+    setHours: (date, hours, context) => {
+      return fromMoment(
+        toMoment(date, context)
+          .clone()
+          .hour(clamp(hours, 0, 23)),
+      );
+    },
+
+    setMinutes: (date, minutes, context) => {
+      return fromMoment(
+        toMoment(date, context)
+          .clone()
+          .minute(clamp(minutes, 0, 59)),
+      );
+    },
+
+    setSeconds: (date, seconds, context) => {
+      return fromMoment(
+        toMoment(date, context)
+          .clone()
+          .second(clamp(seconds, 0, 59)),
+      );
+    },
+
+    isBefore: (a, b, context) => {
+      return toMoment(a, context)
+        .clone()
+        .startOf("day")
+        .isBefore(toMoment(b, context).clone().startOf("day"));
+    },
+
+    parseTime: (value, context, timeOptions) => {
+      return parseTimeWithMoment({
+        value,
+        adapter,
+        context,
+        toMoment,
+        fromMoment,
+        timeOptions,
+      });
+    },
+
+    getMonthNames: (context) => {
+      const locale = resolveLocale(context);
+
+      return range(12).map((month) => {
+        return new Intl.DateTimeFormat(locale, { month: "long" }).format(
+          new Date(2021, month, 1),
+        );
+      });
+    },
+
+    isSameTime: (a, b, context) => {
+      const left = toMoment(a, context);
+      const right = toMoment(b, context);
+
+      return (
+        left.hour() === right.hour() &&
+        left.minute() === right.minute() &&
+        left.second() === right.second()
+      );
+    },
+
+    now: (context) => {
+      const zone = resolveZone(context);
+      const locale = resolveLocale(context);
+      let value = isNil(zone) ? moment() : moment.tz(zone);
+
+      if (!isNil(locale)) {
+        value = value.locale(locale);
+      }
+
+      return fromMoment(value);
+    },
+
+    format: (date, context) => {
+      if (!isValid(date)) {
+        return "";
+      }
+
+      const locale = resolveLocale(context);
+      const timeZone = resolveZone(context);
+
+      return new Intl.DateTimeFormat(locale, {
+        timeZone,
+        day: "2-digit",
+        year: "numeric",
+        month: "2-digit",
+      }).format(date);
+    },
+
+    getWeekdayNames: (context) => {
+      const locale = resolveLocale(context);
+      const formatter = new Intl.DateTimeFormat(locale, { weekday: "short" });
+      const sunday = new Date(2021, 0, 3);
+
+      return range(7).map((index) => {
+        const day = new Date(sunday);
+
+        day.setDate(sunday.getDate() + index);
+
+        return formatter.format(day);
+      });
+    },
+
+    parse: (value, context) => {
+      if (!isString(value) || value.trim() === "") {
+        return null;
+      }
+
+      const trimmed = value.trim();
+      const zone = resolveZone(context);
+      const parsed = isNil(zone) ? moment(trimmed) : moment.tz(trimmed, zone);
+
+      if (!parsed.isValid()) {
+        return null;
+      }
+
+      return fromMoment(parsed.startOf("day"));
+    },
+
+    getCalendarDays: (view, startOfWeek, context) => {
+      const monthStart = adapter.startOfMonth(view, context);
+      const weekday = adapter.getDay(monthStart, context);
+      const normalizedStart = ((startOfWeek % 7) + 7) % 7;
+      const leading = (weekday - normalizedStart + 7) % 7;
+      const gridStart = adapter.addDays(monthStart, -leading, context);
+
+      return range(42).map((index) => {
+        return adapter.addDays(gridStart, index, context);
+      });
+    },
+
+    formatTime: (date, context, timeOptions) => {
+      if (!isValid(date)) {
+        return "";
+      }
+
+      const locale = resolveLocale(context);
+      const timeZone = resolveZone(context);
+      const ampm = timeOptions?.ampm === true;
+      const showSeconds = timeOptions?.showSeconds === true;
+
+      return new Intl.DateTimeFormat(locale, {
+        timeZone,
+        hour12: ampm,
+        hour: "2-digit",
+        minute: "2-digit",
+        ...(showSeconds ? { second: "2-digit" as const } : {}),
+      }).format(date);
+    },
+  };
+
+  return adapter;
+}
+
+function parseTimeWithMoment(input: {
+  adapter: DateAdapter<Date>;
+  context?: DateAdapterContext;
+  fromMoment: (value: Moment) => Date;
+  timeOptions?: DateAdapterTimeOptions;
+  toMoment: (date: Date, context?: DateAdapterContext) => Moment;
+  value: string;
+}): Date | null {
+  const { value, adapter, context, toMoment, fromMoment, timeOptions } = input;
+
+  if (!isString(value) || value.trim() === "") {
+    return null;
+  }
+
+  const trimmed = value.trim();
+  const ampm = timeOptions?.ampm === true;
+  const showSeconds = timeOptions?.showSeconds === true;
+  const format = ampm
+    ? showSeconds
+      ? "h:mm:ss A"
+      : "h:mm A"
+    : showSeconds
+      ? "H:mm:ss"
+      : "H:mm";
+  const parsed = moment(trimmed, format, true);
+
+  if (!parsed.isValid()) {
+    return null;
+  }
+
+  const base = toMoment(adapter.now(context), context);
+
+  return fromMoment(
+    base
+      .clone()
+      .hour(parsed.hour())
+      .minute(parsed.minute())
+      .second(showSeconds ? parsed.second() : 0)
+      .millisecond(0),
+  );
+}

package/docs/examples/i18n-dictionary.ts

@@ -0,0 +1,48 @@
+/**
+ * Example dictionary i18n adapter for `@bridge-ui/vue`.
+ * Copy into your app or wire via `BridgeUIProvider` / `createBridgeUI` `global.i18n`.
+ * Not published as an npm package.
+ *
+ * Source English strings are the lookup keys (same strings Bridge passes to
+ * `resolveMessage`). Messages are keyed by locale; optional `setLocale` updates
+ * the active locale used by `t`. For replace / pluralization, wrap vue-i18n (or
+ * similar) instead.
+ */
+
+// ** External Imports
+import { get } from "es-toolkit/compat";
+
+// ** Core Imports
+import type { I18nAdapter } from "@bridge-ui/core";
+
+// prettier-ignore
+const MESSAGES: Record<string, Record<string, string>> = {
+  "en-US": {},
+  "pt-BR": {
+    "Close": "Fechar",
+    "Loading...": "Carregando...",
+    "No options": "Nenhuma opção",
+    "Hide password": "Ocultar senha",
+    "Show password": "Mostrar senha",
+    "Clear selection": "Limpar seleção",
+    "Decrement value": "Diminuir valor",
+    "Increment value": "Aumentar valor",
+  },
+};
+
+/**
+ * Builds a locale-keyed dictionary {@link I18nAdapter} for Bridge chrome strings.
+ * Unknown locales / messages fall back to the English source string.
+ */
+export function createDictionaryI18nAdapter(): I18nAdapter {
+  let locale = "en-US";
+
+  return {
+    setLocale(next) {
+      locale = next;
+    },
+    t(message) {
+      return get(MESSAGES, [locale, message], message);
+    },
+  };
+}

package/docs/examples/i18n-vue-i18n.ts

@@ -0,0 +1,34 @@
+/**
+ * Example vue-i18n adapter for `@bridge-ui/vue`.
+ * Copy into your app or wire via `BridgeUIProvider` / `createBridgeUI` `global.i18n`.
+ * Not published as an npm package.
+ *
+ * Passes Bridge source strings and `params` straight to `i18n.t`
+ * (interpolation, pluralization, etc. stay in vue-i18n).
+ * `setLocale` on the adapter is invoked by Bridge `setLocale`.
+ */
+
+// ** External Imports
+import type { Composer } from "vue-i18n";
+
+// ** Core Imports
+import type { I18nAdapter } from "@bridge-ui/core";
+
+/**
+ * Builds a vue-i18n-backed {@link I18nAdapter} for Bridge chrome strings.
+ * Pass `vueI18n.global` (composition mode) or the result of `useI18n()`.
+ */
+export function createVueI18nAdapter(i18n: Composer): I18nAdapter {
+  return {
+    setLocale(locale) {
+      i18n.locale.value = locale;
+    },
+    t(message, params) {
+      if (params) {
+        return i18n.t(message, params);
+      }
+
+      return i18n.t(message);
+    },
+  };
+}

package/docs/examples/icon-fontawesome.ts

@@ -0,0 +1,120 @@
+/**
+ * Example Font Awesome 6 (free solid) adapter for `@bridge-ui/vue`.
+ * Copy into your app or wire via `BridgeUIProvider` / `createBridgeUI` `global.icons`.
+ * Not published as an npm package.
+ *
+ * Font Awesome exports icon definitions, not SVG components. This adapter
+ * `normalize`s them so `<Icon :icon="faCoffee" />` works without a manual wrap.
+ */
+
+// ** External Imports
+import type { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+import {
+  faBell,
+  faCalendarDays,
+  faCheck,
+  faChevronDown,
+  faChevronLeft,
+  faChevronRight,
+  faChevronUp,
+  faCircleCheck,
+  faCircleExclamation,
+  faCircleInfo,
+  faCircleXmark,
+  faClock,
+  faEye,
+  faEyeSlash,
+  faSpinner,
+  faTriangleExclamation,
+  faUpDown,
+  faUser,
+  faXmark,
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { get, isArray, isObject, isString } from "es-toolkit/compat";
+import { defineComponent, h, type Component } from "vue";
+
+// ** Core Imports
+import type { IconAdapter, SemanticIconName } from "@bridge-ui/core";
+
+declare module "@bridge-ui/core" {
+  interface IconSourceValueOverrides {
+    fontAwesome: IconDefinition;
+  }
+}
+
+const faIconCache = new WeakMap<IconDefinition, Component>();
+
+/**
+ * Returns whether `value` looks like a Font Awesome {@link IconDefinition}.
+ */
+function isIconDefinition(value: unknown): value is IconDefinition {
+  return (
+    isObject(value) &&
+    isArray((value as IconDefinition).icon) &&
+    isString((value as IconDefinition).prefix) &&
+    isString((value as IconDefinition).iconName)
+  );
+}
+
+/**
+ * Wraps a Font Awesome icon definition as a Vue SVG component.
+ * Prefer `<Icon :icon="faCoffee" />` with this adapter — `normalize` calls this.
+ * Results are cached so repeated resolves keep a stable component identity.
+ */
+export function wrapFaIcon(icon: IconDefinition): Component {
+  const cached = faIconCache.get(icon);
+
+  if (cached) {
+    return cached;
+  }
+
+  const FaIcon = defineComponent({
+    inheritAttrs: false,
+    name: `FaIcon(${icon.iconName})`,
+    setup(_, { attrs }) {
+      return () => h(FontAwesomeIcon, { ...attrs, icon });
+    },
+  });
+
+  faIconCache.set(icon, FaIcon);
+
+  return FaIcon;
+}
+
+const icons = {
+  eye: faEye,
+  bell: faBell,
+  user: faUser,
+  clear: faXmark,
+  check: faCheck,
+  clock: faClock,
+  loader: faSpinner,
+  info: faCircleInfo,
+  eyeOff: faEyeSlash,
+  error: faCircleXmark,
+  success: faCircleCheck,
+  chevronUp: faChevronUp,
+  chevronUpDown: faUpDown,
+  calendar: faCalendarDays,
+  alert: faCircleExclamation,
+  chevronDown: faChevronDown,
+  chevronLeft: faChevronLeft,
+  chevronRight: faChevronRight,
+  warning: faTriangleExclamation,
+} satisfies Record<SemanticIconName, unknown>;
+
+/**
+ * Builds a Font Awesome-backed {@link IconAdapter} for Bridge semantic icon names.
+ * Pass raw `fa*` definitions to `<Icon />` — they are normalized automatically.
+ */
+export function createFontAwesomeIconAdapter(): IconAdapter {
+  return {
+    resolve(name) {
+      return get(icons, name);
+    },
+    normalize(source) {
+      return isIconDefinition(source) ? wrapFaIcon(source) : source;
+    },
+  };
+}

package/docs/examples/icon-heroicons.ts

@@ -0,0 +1,65 @@
+/**
+ * Example Heroicons adapter for `@bridge-ui/vue` (24px outline).
+ * Copy into your app or wire via `BridgeUIProvider` / `createBridgeUI` `global.icons`.
+ * Not published as an npm package.
+ */
+
+// ** External Imports
+import {
+  ArrowPathIcon,
+  BellIcon,
+  CalendarDaysIcon,
+  CheckCircleIcon,
+  CheckIcon,
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ChevronUpDownIcon,
+  ChevronUpIcon,
+  ClockIcon,
+  ExclamationCircleIcon,
+  ExclamationTriangleIcon,
+  EyeIcon,
+  EyeSlashIcon,
+  InformationCircleIcon,
+  UserIcon,
+  XCircleIcon,
+  XMarkIcon,
+} from "@heroicons/vue/24/outline";
+import { get } from "es-toolkit/compat";
+
+// ** Core Imports
+import type { IconAdapter, SemanticIconName } from "@bridge-ui/core";
+
+const icons = {
+  eye: EyeIcon,
+  bell: BellIcon,
+  user: UserIcon,
+  clear: XMarkIcon,
+  check: CheckIcon,
+  clock: ClockIcon,
+  error: XCircleIcon,
+  eyeOff: EyeSlashIcon,
+  loader: ArrowPathIcon,
+  success: CheckCircleIcon,
+  chevronUp: ChevronUpIcon,
+  calendar: CalendarDaysIcon,
+  info: InformationCircleIcon,
+  alert: ExclamationCircleIcon,
+  chevronDown: ChevronDownIcon,
+  chevronLeft: ChevronLeftIcon,
+  chevronRight: ChevronRightIcon,
+  warning: ExclamationTriangleIcon,
+  chevronUpDown: ChevronUpDownIcon,
+} satisfies Record<SemanticIconName, unknown>;
+
+/**
+ * Builds a Heroicons-backed {@link IconAdapter} for Bridge semantic icon names.
+ */
+export function createHeroiconsIconAdapter(): IconAdapter {
+  return {
+    resolve(name) {
+      return get(icons, name);
+    },
+  };
+}

package/docs/examples/icon-lucide.ts

@@ -0,0 +1,65 @@
+/**
+ * Example Lucide icon adapter for `@bridge-ui/vue`.
+ * Copy into your app or wire via `BridgeUIProvider` / `createBridgeUI` `global.icons`.
+ * Not published as an npm package.
+ */
+
+// ** External Imports
+import {
+  Bell,
+  Calendar,
+  Check,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  ChevronsUpDown,
+  ChevronUp,
+  CircleAlert,
+  CircleCheck,
+  CircleX,
+  Clock,
+  Eye,
+  EyeOff,
+  Info,
+  Loader2,
+  TriangleAlert,
+  User,
+  X,
+} from "@lucide/vue";
+import { get } from "es-toolkit/compat";
+
+// ** Core Imports
+import type { IconAdapter, SemanticIconName } from "@bridge-ui/core";
+
+const icons = {
+  eye: Eye,
+  clear: X,
+  bell: Bell,
+  info: Info,
+  user: User,
+  check: Check,
+  clock: Clock,
+  error: CircleX,
+  eyeOff: EyeOff,
+  loader: Loader2,
+  alert: CircleAlert,
+  calendar: Calendar,
+  success: CircleCheck,
+  chevronUp: ChevronUp,
+  warning: TriangleAlert,
+  chevronDown: ChevronDown,
+  chevronLeft: ChevronLeft,
+  chevronRight: ChevronRight,
+  chevronUpDown: ChevronsUpDown,
+} satisfies Record<SemanticIconName, unknown>;
+
+/**
+ * Builds a Lucide-backed {@link IconAdapter} for Bridge semantic icon names.
+ */
+export function createLucideIconAdapter(): IconAdapter {
+  return {
+    resolve(name) {
+      return get(icons, name);
+    },
+  };
+}