@pixelvault-dev/paste-vue 0.1.0 → 0.1.1

package/README.md

@@ -12,14 +12,18 @@ import { ref } from "vue";
 import { usePaste } from "@pixelvault-dev/paste-vue";
 
 const field = ref<HTMLTextAreaElement | null>(null);
-usePaste(field, { publishableKey: "pv_pub_xxxxxxxx" });
+const { openFilePicker } = usePaste(field, { publishableKey: "pv_pub_xxxxxxxx" });
 </script>
 
 <template>
   <textarea ref="field" />
+  <button @click="openFilePicker">Upload image</button>
 </template>
 ```
 
+`usePaste` returns `{ openFilePicker }` — call it to open the OS file dialog and
+insert the chosen image(s).
+
 ## Directive
 
 ```vue

package/dist/index.d.ts

@@ -9,12 +9,20 @@ import { type PasteOptions, type PasteTarget } from "@pixelvault-dev/paste";
  * import { ref } from "vue";
  * import { usePaste } from "@pixelvault-dev/paste-vue";
  * const field = ref<HTMLTextAreaElement | null>(null);
- * usePaste(field, { publishableKey: "pv_pub_…" });
+ * const { openFilePicker } = usePaste(field, { publishableKey: "pv_pub_…" });
  * </script>
- * <template><textarea ref="field" /></template>
+ * <template>
+ *   <textarea ref="field" />
+ *   <button @click="openFilePicker">Upload image</button>
+ * </template>
  * ```
+ *
+ * Returns `openFilePicker`, which opens the OS file dialog and inserts the
+ * chosen image(s) into the field.
  */
-export declare function usePaste(target: Ref<PasteTarget | null | undefined>, options: PasteOptions): void;
+export declare function usePaste(target: Ref<PasteTarget | null | undefined>, options: PasteOptions): {
+    openFilePicker: () => void;
+};
 /**
  * Directive form: `<textarea v-paste="{ publishableKey: 'pv_pub_…' }" />`.
  * Re-attaches when the bound options change.

package/dist/index.js

@@ -1,5 +1,5 @@
 import { onMounted, onBeforeUnmount, watch } from "vue";
-import { attachPaste } from "@pixelvault-dev/paste";
+import { attachPaste, openFilePicker, } from "@pixelvault-dev/paste";
 /**
  * Add paste-and-host behavior to a textarea/input referenced by a template ref,
  * for the lifetime of the component. Re-attaches if the element changes.
@@ -9,10 +9,16 @@ import { attachPaste } from "@pixelvault-dev/paste";
  * import { ref } from "vue";
  * import { usePaste } from "@pixelvault-dev/paste-vue";
  * const field = ref<HTMLTextAreaElement | null>(null);
- * usePaste(field, { publishableKey: "pv_pub_…" });
+ * const { openFilePicker } = usePaste(field, { publishableKey: "pv_pub_…" });
  * </script>
- * <template><textarea ref="field" /></template>
+ * <template>
+ *   <textarea ref="field" />
+ *   <button @click="openFilePicker">Upload image</button>
+ * </template>
  * ```
+ *
+ * Returns `openFilePicker`, which opens the OS file dialog and inserts the
+ * chosen image(s) into the field.
  */
 export function usePaste(target, options) {
     let detach = null;
@@ -29,6 +35,12 @@ export function usePaste(target, options) {
     onMounted(start);
     watch(target, start);
     onBeforeUnmount(stop);
+    return {
+        openFilePicker: () => {
+            if (target.value)
+                openFilePicker(target.value, options);
+        },
+    };
 }
 // Track each directive-bound element's detach fn without polluting the DOM node.
 const detachers = new WeakMap();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixelvault-dev/paste-vue",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
   "license": "MIT",
   "description": "Vue 3 binding for @pixelvault-dev/paste — a usePaste composable and vPaste directive for paste-and-host.",
@@ -45,7 +45,7 @@
     "prepack": "npm run build"
   },
   "dependencies": {
-    "@pixelvault-dev/paste": "^0.1.0"
+    "@pixelvault-dev/paste": "^0.1.1"
   },
   "peerDependencies": {
     "vue": ">=3"