@theaccessibleteam/a11y-feedback-vue 1.0.0

package/README.md

@@ -0,0 +1,168 @@
+# @theaccessibleteam/a11y-feedback-vue
+
+Vue 3 composables for [a11y-feedback](https://www.npmjs.com/package/@theaccessibleteam/a11y-feedback) - the accessibility-first feedback library.
+
+## Installation
+
+```bash
+npm install @theaccessibleteam/a11y-feedback @theaccessibleteam/a11y-feedback-vue
+```
+
+## Quick Start
+
+### Option 1: Using the Composable (Simple)
+
+```vue
+<script setup lang="ts">
+import { useA11yFeedback } from '@theaccessibleteam/a11y-feedback-vue'
+import { configureFeedback } from '@theaccessibleteam/a11y-feedback'
+
+// Configure once at app startup
+configureFeedback({ visual: true })
+
+const feedback = useA11yFeedback()
+
+async function handleSave() {
+  feedback.loading('Saving...', { id: 'save' })
+
+  try {
+    await saveData()
+    feedback.success('Saved!', { id: 'save' })
+  } catch (e) {
+    feedback.error('Failed to save', { id: 'save' })
+  }
+}
+</script>
+
+<template>
+  <button @click="handleSave">Save</button>
+</template>
+```
+
+### Option 2: Using the Plugin (Recommended for Apps)
+
+```ts
+// main.ts
+import { createApp } from 'vue'
+import { a11yFeedbackPlugin } from '@theaccessibleteam/a11y-feedback-vue'
+import App from './App.vue'
+
+const app = createApp(App)
+
+app.use(a11yFeedbackPlugin, {
+  config: {
+    visual: true,
+    visualPosition: 'top-right',
+  },
+  debug: import.meta.env.DEV,
+})
+
+app.mount('#app')
+```
+
+Then use in components:
+
+```vue
+<script setup lang="ts">
+import { inject } from 'vue'
+import { A11yFeedbackKey } from '@theaccessibleteam/a11y-feedback-vue'
+
+const feedback = inject(A11yFeedbackKey)!
+
+function handleAction() {
+  feedback.success('Action completed!')
+}
+</script>
+
+<template>
+  <button @click="handleAction">Do Something</button>
+</template>
+```
+
+Or with Options API:
+
+```vue
+<script lang="ts">
+export default {
+  methods: {
+    handleAction() {
+      this.$a11yFeedback.success('Action completed!')
+    },
+  },
+}
+</script>
+```
+
+## Composables
+
+### `useA11yFeedback()`
+
+Main composable providing all feedback methods.
+
+```ts
+const { success, error, warning, info, loading, dismiss, dismissAll } = useA11yFeedback()
+```
+
+### `useA11yAnnounce()`
+
+Lightweight composable for screen reader announcements only.
+
+```vue
+<script setup lang="ts">
+import { watch } from 'vue'
+import { useA11yAnnounce } from '@theaccessibleteam/a11y-feedback-vue'
+
+const props = defineProps<{ count: number }>()
+const { announcePolite, announceAssertive } = useA11yAnnounce()
+
+watch(() => props.count, (newCount) => {
+  announcePolite(`Found ${newCount} results`)
+})
+</script>
+```
+
+### `useFeedbackConfig()`
+
+Composable for managing configuration reactively.
+
+```ts
+const { config, updateConfig, enableVisual, disableVisual, reset } = useFeedbackConfig()
+```
+
+## Plugin API
+
+### `a11yFeedbackPlugin`
+
+| Option | Type | Description |
+|--------|------|-------------|
+| `config` | `Partial<FeedbackConfig>` | Configuration options |
+| `debug` | `boolean` | Enable debug mode |
+
+### Injection Key
+
+Use `A11yFeedbackKey` to inject the feedback instance:
+
+```ts
+import { inject } from 'vue'
+import { A11yFeedbackKey } from '@theaccessibleteam/a11y-feedback-vue'
+
+const feedback = inject(A11yFeedbackKey)
+```
+
+## TypeScript
+
+Full TypeScript support with exported types:
+
+```ts
+import type { 
+  FeedbackType, 
+  FeedbackOptions, 
+  FeedbackEvent,
+  FeedbackConfig 
+} from '@theaccessibleteam/a11y-feedback-vue'
+```
+
+## License
+
+MIT
+

package/dist/index.cjs

@@ -0,0 +1,143 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  a11yFeedbackPlugin: () => a11yFeedbackPlugin,
+  useA11yAnnounce: () => useA11yAnnounce,
+  useA11yFeedback: () => useA11yFeedback,
+  useFeedbackConfig: () => useFeedbackConfig
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/useA11yFeedback.ts
+var import_a11y_feedback = require("@theaccessibleteam/a11y-feedback");
+function useA11yFeedback() {
+  const success = (message, options) => import_a11y_feedback.notify.success(message, options);
+  const error = (message, options) => import_a11y_feedback.notify.error(message, options);
+  const warning = (message, options) => import_a11y_feedback.notify.warning(message, options);
+  const info = (message, options) => import_a11y_feedback.notify.info(message, options);
+  const loading = (message, options) => import_a11y_feedback.notify.loading(message, options);
+  const dismiss = (id) => {
+    (0, import_a11y_feedback.dismissVisualFeedback)(id);
+  };
+  const dismissAll = () => {
+    (0, import_a11y_feedback.dismissAllVisualFeedback)();
+  };
+  return {
+    success,
+    error,
+    warning,
+    info,
+    loading,
+    dismiss,
+    dismissAll
+  };
+}
+
+// src/useA11yAnnounce.ts
+var import_a11y_feedback2 = require("@theaccessibleteam/a11y-feedback");
+function useA11yAnnounce() {
+  const announcePolite = async (message, options) => {
+    await import_a11y_feedback2.notify.info(message, options);
+  };
+  const announceAssertive = async (message, options) => {
+    await import_a11y_feedback2.notify.warning(message, options);
+  };
+  const announce = async (message, politeness, options) => {
+    if (politeness === "assertive") {
+      await import_a11y_feedback2.notify.warning(message, options);
+    } else {
+      await import_a11y_feedback2.notify.info(message, options);
+    }
+  };
+  return {
+    announcePolite,
+    announceAssertive,
+    announce
+  };
+}
+
+// src/useFeedbackConfig.ts
+var import_vue = require("vue");
+var import_a11y_feedback3 = require("@theaccessibleteam/a11y-feedback");
+function useFeedbackConfig() {
+  const config = (0, import_vue.ref)((0, import_a11y_feedback3.getConfig)());
+  const syncConfig = () => {
+    config.value = (0, import_a11y_feedback3.getConfig)();
+  };
+  const updateConfig = (updates) => {
+    (0, import_a11y_feedback3.configureFeedback)(updates);
+    syncConfig();
+  };
+  const reset = () => {
+    (0, import_a11y_feedback3.resetConfig)();
+    syncConfig();
+  };
+  const enableVisual = () => {
+    updateConfig({ visual: true });
+  };
+  const disableVisual = () => {
+    updateConfig({ visual: false });
+  };
+  (0, import_vue.onMounted)(() => {
+    syncConfig();
+  });
+  return {
+    config: (0, import_vue.readonly)(config),
+    updateConfig,
+    reset,
+    enableVisual,
+    disableVisual
+  };
+}
+
+// src/plugin.ts
+var import_a11y_feedback4 = require("@theaccessibleteam/a11y-feedback");
+var A11yFeedbackKey = /* @__PURE__ */ Symbol("a11y-feedback");
+var a11yFeedbackPlugin = {
+  install(app, options = {}) {
+    const { config, debug = false } = options;
+    if (config) {
+      (0, import_a11y_feedback4.configureFeedback)(config);
+    }
+    if (debug) {
+      (0, import_a11y_feedback4.enableFeedbackDebug)();
+    }
+    const feedback = useA11yFeedback();
+    app.provide(A11yFeedbackKey, feedback);
+    app.config.globalProperties.$a11yFeedback = feedback;
+    app.unmount = /* @__PURE__ */ ((originalUnmount) => {
+      return function() {
+        (0, import_a11y_feedback4.resetConfig)();
+        (0, import_a11y_feedback4.disableFeedbackDebug)();
+        (0, import_a11y_feedback4.dismissAllVisualFeedback)();
+        return originalUnmount.call(this);
+      };
+    })(app.unmount);
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  a11yFeedbackPlugin,
+  useA11yAnnounce,
+  useA11yFeedback,
+  useFeedbackConfig
+});

package/dist/index.d.cts

@@ -0,0 +1,213 @@
+import { FeedbackOptions, FeedbackEvent, FeedbackConfig } from '@theaccessibleteam/a11y-feedback';
+export { FeedbackConfig, FeedbackEvent, FeedbackOptions, FeedbackType } from '@theaccessibleteam/a11y-feedback';
+import { DeepReadonly, Ref, App } from 'vue';
+
+/**
+ * Main Vue composable for a11y-feedback
+ */
+
+/**
+ * Return type for useA11yFeedback composable
+ */
+interface UseA11yFeedbackReturn {
+    /** Send a success notification */
+    success: (message: string, options?: FeedbackOptions) => Promise<FeedbackEvent>;
+    /** Send an error notification */
+    error: (message: string, options?: FeedbackOptions) => Promise<FeedbackEvent>;
+    /** Send a warning notification */
+    warning: (message: string, options?: FeedbackOptions) => Promise<FeedbackEvent>;
+    /** Send an info notification */
+    info: (message: string, options?: FeedbackOptions) => Promise<FeedbackEvent>;
+    /** Send a loading notification */
+    loading: (message: string, options?: FeedbackOptions) => Promise<FeedbackEvent>;
+    /** Dismiss a specific visual feedback item */
+    dismiss: (id: string) => void;
+    /** Dismiss all visual feedback items */
+    dismissAll: () => void;
+}
+/**
+ * Main composable for sending accessible feedback notifications
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { useA11yFeedback } from '@theaccessibleteam/a11y-feedback-vue'
+ *
+ * const feedback = useA11yFeedback()
+ *
+ * async function handleSave() {
+ *   feedback.loading('Saving...', { id: 'save' })
+ *
+ *   try {
+ *     await saveData()
+ *     feedback.success('Saved!', { id: 'save' })
+ *   } catch (e) {
+ *     feedback.error('Failed to save', { id: 'save' })
+ *   }
+ * }
+ * </script>
+ *
+ * <template>
+ *   <button @click="handleSave">Save</button>
+ * </template>
+ * ```
+ */
+declare function useA11yFeedback(): UseA11yFeedbackReturn;
+
+/**
+ * Simple composable for screen reader announcements
+ */
+
+/**
+ * Return type for useA11yAnnounce composable
+ */
+interface UseA11yAnnounceReturn {
+    /**
+     * Announce a message politely (for non-urgent updates)
+     * Screen reader will wait for current speech to finish
+     */
+    announcePolite: (message: string, options?: FeedbackOptions) => Promise<void>;
+    /**
+     * Announce a message assertively (for urgent updates)
+     * Screen reader will interrupt current speech
+     */
+    announceAssertive: (message: string, options?: FeedbackOptions) => Promise<void>;
+    /**
+     * Announce with custom options
+     */
+    announce: (message: string, politeness: 'polite' | 'assertive', options?: FeedbackOptions) => Promise<void>;
+}
+/**
+ * Simple composable for making screen reader announcements
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { watch } from 'vue'
+ * import { useA11yAnnounce } from '@theaccessibleteam/a11y-feedback-vue'
+ *
+ * const props = defineProps<{ count: number }>()
+ * const { announcePolite } = useA11yAnnounce()
+ *
+ * watch(() => props.count, (newCount) => {
+ *   announcePolite(`Found ${newCount} results`)
+ * })
+ * </script>
+ * ```
+ */
+declare function useA11yAnnounce(): UseA11yAnnounceReturn;
+
+/**
+ * Composable for managing a11y-feedback configuration
+ */
+
+/**
+ * Return type for useFeedbackConfig composable
+ */
+interface UseFeedbackConfigReturn {
+    /** Current configuration (reactive, readonly) */
+    config: DeepReadonly<Ref<FeedbackConfig>>;
+    /** Update configuration (merges with existing) */
+    updateConfig: (updates: Partial<FeedbackConfig>) => void;
+    /** Reset configuration to defaults */
+    reset: () => void;
+    /** Enable visual feedback */
+    enableVisual: () => void;
+    /** Disable visual feedback */
+    disableVisual: () => void;
+}
+/**
+ * Composable for managing a11y-feedback configuration
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { useFeedbackConfig } from '@theaccessibleteam/a11y-feedback-vue'
+ *
+ * const { config, updateConfig, enableVisual, disableVisual } = useFeedbackConfig()
+ * </script>
+ *
+ * <template>
+ *   <div>
+ *     <label>
+ *       <input
+ *         type="checkbox"
+ *         :checked="config.visual"
+ *         @change="$event.target.checked ? enableVisual() : disableVisual()"
+ *       />
+ *       Show visual notifications
+ *     </label>
+ *
+ *     <select
+ *       :value="config.visualPosition"
+ *       @change="updateConfig({ visualPosition: $event.target.value })"
+ *     >
+ *       <option value="top-right">Top Right</option>
+ *       <option value="bottom-right">Bottom Right</option>
+ *     </select>
+ *   </div>
+ * </template>
+ * ```
+ */
+declare function useFeedbackConfig(): UseFeedbackConfigReturn;
+
+/**
+ * Vue plugin for a11y-feedback
+ */
+
+/**
+ * Plugin options
+ */
+interface A11yFeedbackPluginOptions {
+    /** Configuration options */
+    config?: Partial<FeedbackConfig>;
+    /** Enable debug mode */
+    debug?: boolean;
+}
+/**
+ * Vue plugin for a11y-feedback
+ *
+ * @example
+ * ```ts
+ * // main.ts
+ * import { createApp } from 'vue'
+ * import { a11yFeedbackPlugin } from '@theaccessibleteam/a11y-feedback-vue'
+ * import App from './App.vue'
+ *
+ * const app = createApp(App)
+ *
+ * app.use(a11yFeedbackPlugin, {
+ *   config: {
+ *     visual: true,
+ *     visualPosition: 'top-right',
+ *   },
+ *   debug: import.meta.env.DEV,
+ * })
+ *
+ * app.mount('#app')
+ * ```
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { inject } from 'vue'
+ * import { A11yFeedbackKey } from '@theaccessibleteam/a11y-feedback-vue'
+ *
+ * const feedback = inject(A11yFeedbackKey)!
+ *
+ * function handleClick() {
+ *   feedback.success('Action completed!')
+ * }
+ * </script>
+ * ```
+ */
+declare const a11yFeedbackPlugin: {
+    install(app: App, options?: A11yFeedbackPluginOptions): void;
+};
+declare module 'vue' {
+    interface ComponentCustomProperties {
+        $a11yFeedback: UseA11yFeedbackReturn;
+    }
+}
+
+export { a11yFeedbackPlugin, useA11yAnnounce, useA11yFeedback, useFeedbackConfig };

package/dist/index.d.ts

@@ -0,0 +1,213 @@
+import { FeedbackOptions, FeedbackEvent, FeedbackConfig } from '@theaccessibleteam/a11y-feedback';
+export { FeedbackConfig, FeedbackEvent, FeedbackOptions, FeedbackType } from '@theaccessibleteam/a11y-feedback';
+import { DeepReadonly, Ref, App } from 'vue';
+
+/**
+ * Main Vue composable for a11y-feedback
+ */
+
+/**
+ * Return type for useA11yFeedback composable
+ */
+interface UseA11yFeedbackReturn {
+    /** Send a success notification */
+    success: (message: string, options?: FeedbackOptions) => Promise<FeedbackEvent>;
+    /** Send an error notification */
+    error: (message: string, options?: FeedbackOptions) => Promise<FeedbackEvent>;
+    /** Send a warning notification */
+    warning: (message: string, options?: FeedbackOptions) => Promise<FeedbackEvent>;
+    /** Send an info notification */
+    info: (message: string, options?: FeedbackOptions) => Promise<FeedbackEvent>;
+    /** Send a loading notification */
+    loading: (message: string, options?: FeedbackOptions) => Promise<FeedbackEvent>;
+    /** Dismiss a specific visual feedback item */
+    dismiss: (id: string) => void;
+    /** Dismiss all visual feedback items */
+    dismissAll: () => void;
+}
+/**
+ * Main composable for sending accessible feedback notifications
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { useA11yFeedback } from '@theaccessibleteam/a11y-feedback-vue'
+ *
+ * const feedback = useA11yFeedback()
+ *
+ * async function handleSave() {
+ *   feedback.loading('Saving...', { id: 'save' })
+ *
+ *   try {
+ *     await saveData()
+ *     feedback.success('Saved!', { id: 'save' })
+ *   } catch (e) {
+ *     feedback.error('Failed to save', { id: 'save' })
+ *   }
+ * }
+ * </script>
+ *
+ * <template>
+ *   <button @click="handleSave">Save</button>
+ * </template>
+ * ```
+ */
+declare function useA11yFeedback(): UseA11yFeedbackReturn;
+
+/**
+ * Simple composable for screen reader announcements
+ */
+
+/**
+ * Return type for useA11yAnnounce composable
+ */
+interface UseA11yAnnounceReturn {
+    /**
+     * Announce a message politely (for non-urgent updates)
+     * Screen reader will wait for current speech to finish
+     */
+    announcePolite: (message: string, options?: FeedbackOptions) => Promise<void>;
+    /**
+     * Announce a message assertively (for urgent updates)
+     * Screen reader will interrupt current speech
+     */
+    announceAssertive: (message: string, options?: FeedbackOptions) => Promise<void>;
+    /**
+     * Announce with custom options
+     */
+    announce: (message: string, politeness: 'polite' | 'assertive', options?: FeedbackOptions) => Promise<void>;
+}
+/**
+ * Simple composable for making screen reader announcements
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { watch } from 'vue'
+ * import { useA11yAnnounce } from '@theaccessibleteam/a11y-feedback-vue'
+ *
+ * const props = defineProps<{ count: number }>()
+ * const { announcePolite } = useA11yAnnounce()
+ *
+ * watch(() => props.count, (newCount) => {
+ *   announcePolite(`Found ${newCount} results`)
+ * })
+ * </script>
+ * ```
+ */
+declare function useA11yAnnounce(): UseA11yAnnounceReturn;
+
+/**
+ * Composable for managing a11y-feedback configuration
+ */
+
+/**
+ * Return type for useFeedbackConfig composable
+ */
+interface UseFeedbackConfigReturn {
+    /** Current configuration (reactive, readonly) */
+    config: DeepReadonly<Ref<FeedbackConfig>>;
+    /** Update configuration (merges with existing) */
+    updateConfig: (updates: Partial<FeedbackConfig>) => void;
+    /** Reset configuration to defaults */
+    reset: () => void;
+    /** Enable visual feedback */
+    enableVisual: () => void;
+    /** Disable visual feedback */
+    disableVisual: () => void;
+}
+/**
+ * Composable for managing a11y-feedback configuration
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { useFeedbackConfig } from '@theaccessibleteam/a11y-feedback-vue'
+ *
+ * const { config, updateConfig, enableVisual, disableVisual } = useFeedbackConfig()
+ * </script>
+ *
+ * <template>
+ *   <div>
+ *     <label>
+ *       <input
+ *         type="checkbox"
+ *         :checked="config.visual"
+ *         @change="$event.target.checked ? enableVisual() : disableVisual()"
+ *       />
+ *       Show visual notifications
+ *     </label>
+ *
+ *     <select
+ *       :value="config.visualPosition"
+ *       @change="updateConfig({ visualPosition: $event.target.value })"
+ *     >
+ *       <option value="top-right">Top Right</option>
+ *       <option value="bottom-right">Bottom Right</option>
+ *     </select>
+ *   </div>
+ * </template>
+ * ```
+ */
+declare function useFeedbackConfig(): UseFeedbackConfigReturn;
+
+/**
+ * Vue plugin for a11y-feedback
+ */
+
+/**
+ * Plugin options
+ */
+interface A11yFeedbackPluginOptions {
+    /** Configuration options */
+    config?: Partial<FeedbackConfig>;
+    /** Enable debug mode */
+    debug?: boolean;
+}
+/**
+ * Vue plugin for a11y-feedback
+ *
+ * @example
+ * ```ts
+ * // main.ts
+ * import { createApp } from 'vue'
+ * import { a11yFeedbackPlugin } from '@theaccessibleteam/a11y-feedback-vue'
+ * import App from './App.vue'
+ *
+ * const app = createApp(App)
+ *
+ * app.use(a11yFeedbackPlugin, {
+ *   config: {
+ *     visual: true,
+ *     visualPosition: 'top-right',
+ *   },
+ *   debug: import.meta.env.DEV,
+ * })
+ *
+ * app.mount('#app')
+ * ```
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * import { inject } from 'vue'
+ * import { A11yFeedbackKey } from '@theaccessibleteam/a11y-feedback-vue'
+ *
+ * const feedback = inject(A11yFeedbackKey)!
+ *
+ * function handleClick() {
+ *   feedback.success('Action completed!')
+ * }
+ * </script>
+ * ```
+ */
+declare const a11yFeedbackPlugin: {
+    install(app: App, options?: A11yFeedbackPluginOptions): void;
+};
+declare module 'vue' {
+    interface ComponentCustomProperties {
+        $a11yFeedback: UseA11yFeedbackReturn;
+    }
+}
+
+export { a11yFeedbackPlugin, useA11yAnnounce, useA11yFeedback, useFeedbackConfig };

package/dist/index.js

@@ -0,0 +1,127 @@
+// src/useA11yFeedback.ts
+import {
+  notify,
+  dismissVisualFeedback,
+  dismissAllVisualFeedback
+} from "@theaccessibleteam/a11y-feedback";
+function useA11yFeedback() {
+  const success = (message, options) => notify.success(message, options);
+  const error = (message, options) => notify.error(message, options);
+  const warning = (message, options) => notify.warning(message, options);
+  const info = (message, options) => notify.info(message, options);
+  const loading = (message, options) => notify.loading(message, options);
+  const dismiss = (id) => {
+    dismissVisualFeedback(id);
+  };
+  const dismissAll = () => {
+    dismissAllVisualFeedback();
+  };
+  return {
+    success,
+    error,
+    warning,
+    info,
+    loading,
+    dismiss,
+    dismissAll
+  };
+}
+
+// src/useA11yAnnounce.ts
+import { notify as notify2 } from "@theaccessibleteam/a11y-feedback";
+function useA11yAnnounce() {
+  const announcePolite = async (message, options) => {
+    await notify2.info(message, options);
+  };
+  const announceAssertive = async (message, options) => {
+    await notify2.warning(message, options);
+  };
+  const announce = async (message, politeness, options) => {
+    if (politeness === "assertive") {
+      await notify2.warning(message, options);
+    } else {
+      await notify2.info(message, options);
+    }
+  };
+  return {
+    announcePolite,
+    announceAssertive,
+    announce
+  };
+}
+
+// src/useFeedbackConfig.ts
+import { ref, readonly, onMounted } from "vue";
+import {
+  configureFeedback,
+  getConfig,
+  resetConfig
+} from "@theaccessibleteam/a11y-feedback";
+function useFeedbackConfig() {
+  const config = ref(getConfig());
+  const syncConfig = () => {
+    config.value = getConfig();
+  };
+  const updateConfig = (updates) => {
+    configureFeedback(updates);
+    syncConfig();
+  };
+  const reset = () => {
+    resetConfig();
+    syncConfig();
+  };
+  const enableVisual = () => {
+    updateConfig({ visual: true });
+  };
+  const disableVisual = () => {
+    updateConfig({ visual: false });
+  };
+  onMounted(() => {
+    syncConfig();
+  });
+  return {
+    config: readonly(config),
+    updateConfig,
+    reset,
+    enableVisual,
+    disableVisual
+  };
+}
+
+// src/plugin.ts
+import {
+  configureFeedback as configureFeedback2,
+  resetConfig as resetConfig2,
+  enableFeedbackDebug,
+  disableFeedbackDebug,
+  dismissAllVisualFeedback as dismissAllVisualFeedback2
+} from "@theaccessibleteam/a11y-feedback";
+var A11yFeedbackKey = /* @__PURE__ */ Symbol("a11y-feedback");
+var a11yFeedbackPlugin = {
+  install(app, options = {}) {
+    const { config, debug = false } = options;
+    if (config) {
+      configureFeedback2(config);
+    }
+    if (debug) {
+      enableFeedbackDebug();
+    }
+    const feedback = useA11yFeedback();
+    app.provide(A11yFeedbackKey, feedback);
+    app.config.globalProperties.$a11yFeedback = feedback;
+    app.unmount = /* @__PURE__ */ ((originalUnmount) => {
+      return function() {
+        resetConfig2();
+        disableFeedbackDebug();
+        dismissAllVisualFeedback2();
+        return originalUnmount.call(this);
+      };
+    })(app.unmount);
+  }
+};
+export {
+  a11yFeedbackPlugin,
+  useA11yAnnounce,
+  useA11yFeedback,
+  useFeedbackConfig
+};

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@theaccessibleteam/a11y-feedback-vue",
+  "version": "1.0.0",
+  "description": "Vue composables for a11y-feedback - accessible notifications and screen reader announcements",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts --clean",
+    "dev": "tsup src/index.ts --format cjs,esm --dts --watch",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src --ext .ts"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "accessibility",
+    "a11y",
+    "aria-live",
+    "screen-reader",
+    "composables",
+    "notifications",
+    "toast"
+  ],
+  "author": "The Accessible Team <theaccessibleteam@gmail.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/WOLFIEEEE/a11y-feedback.git",
+    "directory": "packages/vue"
+  },
+  "bugs": {
+    "url": "https://github.com/WOLFIEEEE/a11y-feedback/issues"
+  },
+  "homepage": "https://github.com/WOLFIEEEE/a11y-feedback/tree/main/packages/vue#readme",
+  "peerDependencies": {
+    "@theaccessibleteam/a11y-feedback": "workspace:^",
+    "vue": "^3.3.0"
+  },
+  "devDependencies": {
+    "tsup": "^8.0.0",
+    "typescript": "^5.4.0",
+    "vue": "^3.4.0"
+  }
+}
+