@bridge-ui/vue 0.0.6 → 0.0.8

package/docs/components/useDrawerAction.md

@@ -0,0 +1,75 @@
+# useDrawerAction
+
+Imperative API to mount custom components inside `Drawer`. Requires `BridgeDrawerHost`.
+
+## Import
+
+```ts
+import { useDrawerAction } from "@bridge-ui/vue/Actions";
+```
+
+## Prerequisites
+
+Mount `BridgeUIHosts` with the matching host (`BridgeDialogHost`, `BridgeDrawerHost`, `BridgeModalHost`, or `BridgeSnackbarHost`) inside `BridgeUIProvider`.
+
+## Examples
+
+### Usage
+
+```ts
+const drawer = useDrawerAction();
+
+const id = drawer.open({
+  component: SettingsForm,
+  drawer: { size: "lg", placement: "right" },
+});
+```
+
+### open
+
+```vue
+<Button v-on:click="openBasic">Open basic</Button>
+
+<Button variant="outline" v-on:click="openWithOptions">
+  Open with drawer options
+</Button>
+```
+
+### close / closeTop
+
+```vue
+<Button
+  variant="outline"
+  :disabled="!lastId"
+  v-on:click="lastId && drawer.close(lastId)"
+>
+  close(lastId)
+</Button>
+
+<Button variant="outline" v-on:click="drawer.closeTop()">
+  closeTop()
+</Button>
+```
+
+### Nested stack
+
+```vue
+<Button v-on:click="openNested">Open nested example</Button>
+```
+
+## API
+
+| Method              | Description                    |
+| ------------------- | ------------------------------ |
+| `open(options)`     | Push a drawer onto the stack   |
+| `close(id)`         | Close a specific drawer        |
+| `closeTop()`        | Close the topmost drawer       |
+| `isOpen(id)`        | Whether an id is open          |
+| `update(id, patch)` | Update props or drawer options |
+| `stackSize`         | Current stack depth            |
+
+**open() options:** `component`, `props`, `drawer` (`size`, `placement`, `transition`, `persistent`), `onClose`, `onClosed`
+
+## Related components
+
+Drawer, useModalAction, BridgeUIProvider

package/docs/components/useModalAction.md

@@ -0,0 +1,75 @@
+# useModalAction
+
+Imperative API to mount custom components inside `Modal`. Requires `BridgeModalHost`.
+
+## Import
+
+```ts
+import { useModalAction } from "@bridge-ui/vue/Actions";
+```
+
+## Prerequisites
+
+Mount `BridgeUIHosts` with the matching host (`BridgeDialogHost`, `BridgeModalHost`, or `BridgeSnackbarHost`) inside `BridgeUIProvider`.
+
+## Examples
+
+### Usage
+
+```ts
+const modal = useModalAction();
+
+const id = modal.open({
+  component: SettingsForm,
+  modal: { size: "lg", title: "Settings" },
+});
+```
+
+### open
+
+```vue
+<Button v-on:click="openBasic">Open basic</Button>
+
+<Button variant="outline" v-on:click="openWithOptions">
+  Open with modal options
+</Button>
+```
+
+### close / closeTop
+
+```vue
+<Button
+  variant="outline"
+  :disabled="!lastId"
+  v-on:click="lastId && modal.close(lastId)"
+>
+  close(lastId)
+</Button>
+
+<Button variant="outline" v-on:click="modal.closeTop()">
+  closeTop()
+</Button>
+```
+
+### Nested stack
+
+```vue
+<Button v-on:click="openNested">Open nested example</Button>
+```
+
+## API
+
+| Method              | Description                   |
+| ------------------- | ----------------------------- |
+| `open(options)`     | Push a modal onto the stack   |
+| `close(id)`         | Close a specific modal        |
+| `closeTop()`        | Close the topmost modal       |
+| `isOpen(id)`        | Whether an id is open         |
+| `update(id, patch)` | Update props or modal options |
+| `stackSize`         | Current stack depth           |
+
+**open() options:** `component`, `props`, `modal` (`size`, `transition`, `persistent`, `align`), `onClose`, `onClosed`
+
+## Related components
+
+Modal, useDialogAction, BridgeUIProvider

package/docs/components/useSnackbarAction.md

@@ -0,0 +1,85 @@
+# useSnackbarAction
+
+Imperative API for toast notifications. Requires `BridgeSnackbarHost`.
+
+## Import
+
+```ts
+import { useSnackbarAction } from "@bridge-ui/vue/Actions";
+```
+
+## Prerequisites
+
+Mount `BridgeUIHosts` with the matching host (`BridgeDialogHost`, `BridgeModalHost`, or `BridgeSnackbarHost`) inside `BridgeUIProvider`.
+
+## Examples
+
+### Usage
+
+```ts
+const snackbar = useSnackbarAction();
+
+snackbar.open({
+  title: "Saved",
+  color: "success",
+  description: "Your changes were saved successfully.",
+});
+```
+
+### open
+
+```vue
+<Button v-on:click="openBasic">Open basic</Button>
+
+<Button variant="outline" v-on:click="openWithOptions">
+  Open with options
+</Button>
+```
+
+### close / closeAll
+
+```vue
+<Button variant="outline" v-on:click="snackbar.closeTop()">
+  closeTop()
+</Button>
+
+<Button variant="outline" v-on:click="snackbar.closeAll()">
+  closeAll()
+</Button>
+```
+
+### update
+
+```vue
+<Button v-on:click="openUpdateDemo">Open update demo</Button>
+
+<Button
+  variant="outline"
+  :disabled="!updateDemoId"
+  v-on:click="
+    snackbar.update(updateDemoId, {
+      props: { title: 'Updated title' },
+    })
+  "
+>
+  update props
+</Button>
+```
+
+## API
+
+| Method              | Description                    |
+| ------------------- | ------------------------------ |
+| `open(options)`     | Push a snackbar onto the stack |
+| `close(id)`         | Close a specific snackbar      |
+| `closeTop()`        | Close the topmost snackbar     |
+| `closeAll()`        | Close all snackbars            |
+| `isOpen(id)`        | Whether an id is open          |
+| `update(id, patch)` | Update snackbar props          |
+| `stackSize`         | Current stack depth            |
+
+**open() options:** `title`, `description`, `color`, `duration`, `position`, `onClose`, `onClosed`
+
+## Related components
+
+Snackbar, Alert, BridgeUIProvider

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,112 @@
+/**
+ * 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,
+  faCheck,
+  faChevronDown,
+  faChevronUp,
+  faCircleCheck,
+  faCircleExclamation,
+  faCircleInfo,
+  faCircleXmark,
+  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,
+  loader: faSpinner,
+  info: faCircleInfo,
+  eyeOff: faEyeSlash,
+  error: faCircleXmark,
+  success: faCircleCheck,
+  chevronUp: faChevronUp,
+  chevronUpDown: faUpDown,
+  alert: faCircleExclamation,
+  chevronDown: faChevronDown,
+  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,57 @@
+/**
+ * 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,
+  CheckCircleIcon,
+  CheckIcon,
+  ChevronDownIcon,
+  ChevronUpDownIcon,
+  ChevronUpIcon,
+  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,
+  error: XCircleIcon,
+  eyeOff: EyeSlashIcon,
+  loader: ArrowPathIcon,
+  success: CheckCircleIcon,
+  chevronUp: ChevronUpIcon,
+  info: InformationCircleIcon,
+  alert: ExclamationCircleIcon,
+  chevronDown: ChevronDownIcon,
+  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,57 @@
+/**
+ * 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,
+  Check,
+  ChevronDown,
+  ChevronsUpDown,
+  ChevronUp,
+  CircleAlert,
+  CircleCheck,
+  CircleX,
+  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,
+  error: CircleX,
+  eyeOff: EyeOff,
+  loader: Loader2,
+  alert: CircleAlert,
+  success: CircleCheck,
+  chevronUp: ChevronUp,
+  warning: TriangleAlert,
+  chevronDown: ChevronDown,
+  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);
+    },
+  };
+}

package/docs/examples/icon-phosphor.ts

@@ -0,0 +1,57 @@
+/**
+ * Example Phosphor Icons 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 {
+  PhBell,
+  PhCaretDown,
+  PhCaretUp,
+  PhCaretUpDown,
+  PhCheck,
+  PhCheckCircle,
+  PhEye,
+  PhEyeSlash,
+  PhInfo,
+  PhSpinnerGap,
+  PhUser,
+  PhWarning,
+  PhWarningCircle,
+  PhX,
+  PhXCircle,
+} from "@phosphor-icons/vue";
+import { get } from "es-toolkit/compat";
+
+// ** Core Imports
+import type { IconAdapter, SemanticIconName } from "@bridge-ui/core";
+
+const icons = {
+  eye: PhEye,
+  clear: PhX,
+  bell: PhBell,
+  info: PhInfo,
+  user: PhUser,
+  check: PhCheck,
+  error: PhXCircle,
+  eyeOff: PhEyeSlash,
+  warning: PhWarning,
+  loader: PhSpinnerGap,
+  chevronUp: PhCaretUp,
+  alert: PhWarningCircle,
+  success: PhCheckCircle,
+  chevronDown: PhCaretDown,
+  chevronUpDown: PhCaretUpDown,
+} satisfies Record<SemanticIconName, unknown>;
+
+/**
+ * Builds a Phosphor-backed {@link IconAdapter} for Bridge semantic icon names.
+ */
+export function createPhosphorIconAdapter(): IconAdapter {
+  return {
+    resolve(name) {
+      return get(icons, name);
+    },
+  };
+}

package/docs/examples/icon-tabler.ts

@@ -0,0 +1,57 @@
+/**
+ * Example Tabler Icons 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 {
+  IconAlertCircle,
+  IconAlertTriangle,
+  IconBell,
+  IconCheck,
+  IconChevronDown,
+  IconChevronUp,
+  IconCircleCheck,
+  IconCircleX,
+  IconEye,
+  IconEyeOff,
+  IconInfoCircle,
+  IconLoader2,
+  IconSelector,
+  IconUser,
+  IconX,
+} from "@tabler/icons-vue";
+import { get } from "es-toolkit/compat";
+
+// ** Core Imports
+import type { IconAdapter, SemanticIconName } from "@bridge-ui/core";
+
+const icons = {
+  eye: IconEye,
+  clear: IconX,
+  bell: IconBell,
+  user: IconUser,
+  check: IconCheck,
+  error: IconCircleX,
+  eyeOff: IconEyeOff,
+  loader: IconLoader2,
+  info: IconInfoCircle,
+  alert: IconAlertCircle,
+  success: IconCircleCheck,
+  chevronUp: IconChevronUp,
+  warning: IconAlertTriangle,
+  chevronUpDown: IconSelector,
+  chevronDown: IconChevronDown,
+} satisfies Record<SemanticIconName, unknown>;
+
+/**
+ * Builds a Tabler-backed {@link IconAdapter} for Bridge semantic icon names.
+ */
+export function createTablerIconAdapter(): IconAdapter {
+  return {
+    resolve(name) {
+      return get(icons, name);
+    },
+  };
+}