@pixelvault-dev/paste-vue 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 PixelVault
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,39 @@
+# @pixelvault-dev/paste-vue
+
+Vue 3 binding for [`@pixelvault-dev/paste`](../paste). Adds paste-and-host
+(paste/drop an image → hosted CDN URL) to a textarea or input, as either a
+composable or a directive.
+
+## Composable
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { usePaste } from "@pixelvault-dev/paste-vue";
+
+const field = ref<HTMLTextAreaElement | null>(null);
+usePaste(field, { publishableKey: "pv_pub_xxxxxxxx" });
+</script>
+
+<template>
+  <textarea ref="field" />
+</template>
+```
+
+## Directive
+
+```vue
+<script setup lang="ts">
+import { vPaste } from "@pixelvault-dev/paste-vue";
+</script>
+
+<template>
+  <textarea v-paste="{ publishableKey: 'pv_pub_xxxxxxxx' }" />
+</template>
+```
+
+Both attach on mount, re-attach if the element/options change, and detach on
+unmount. See [`@pixelvault-dev/paste`](../paste) for the full `PasteOptions`
+reference. Get a publishable key (`pv_pub_…`) in the PixelVault dashboard.
+
+`vue >= 3` is a peer dependency.

package/dist/index.d.ts

@@ -0,0 +1,24 @@
+import { type Ref, type Directive } from "vue";
+import { type PasteOptions, type PasteTarget } 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.
+ *
+ * ```vue
+ * <script setup lang="ts">
+ * import { ref } from "vue";
+ * import { usePaste } from "@pixelvault-dev/paste-vue";
+ * const field = ref<HTMLTextAreaElement | null>(null);
+ * usePaste(field, { publishableKey: "pv_pub_…" });
+ * </script>
+ * <template><textarea ref="field" /></template>
+ * ```
+ */
+export declare function usePaste(target: Ref<PasteTarget | null | undefined>, options: PasteOptions): void;
+/**
+ * Directive form: `<textarea v-paste="{ publishableKey: 'pv_pub_…' }" />`.
+ * Re-attaches when the bound options change.
+ */
+export declare const vPaste: Directive<HTMLElement, PasteOptions>;
+export { PixelVaultPasteError } from "@pixelvault-dev/paste";
+export type { PasteOptions, PasteTarget, UploadResult } from "@pixelvault-dev/paste";

package/dist/index.js

@@ -0,0 +1,60 @@
+import { onMounted, onBeforeUnmount, watch } from "vue";
+import { attachPaste } 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.
+ *
+ * ```vue
+ * <script setup lang="ts">
+ * import { ref } from "vue";
+ * import { usePaste } from "@pixelvault-dev/paste-vue";
+ * const field = ref<HTMLTextAreaElement | null>(null);
+ * usePaste(field, { publishableKey: "pv_pub_…" });
+ * </script>
+ * <template><textarea ref="field" /></template>
+ * ```
+ */
+export function usePaste(target, options) {
+    let detach = null;
+    const stop = () => {
+        detach?.();
+        detach = null;
+    };
+    const start = () => {
+        stop();
+        const el = target.value;
+        if (el)
+            detach = attachPaste(el, options);
+    };
+    onMounted(start);
+    watch(target, start);
+    onBeforeUnmount(stop);
+}
+// Track each directive-bound element's detach fn without polluting the DOM node.
+const detachers = new WeakMap();
+function bind(el, options) {
+    if (el instanceof HTMLTextAreaElement || el instanceof HTMLInputElement) {
+        detachers.set(el, attachPaste(el, options));
+    }
+}
+function unbind(el) {
+    detachers.get(el)?.();
+    detachers.delete(el);
+}
+/**
+ * Directive form: `<textarea v-paste="{ publishableKey: 'pv_pub_…' }" />`.
+ * Re-attaches when the bound options change.
+ */
+export const vPaste = {
+    mounted(el, binding) {
+        bind(el, binding.value);
+    },
+    updated(el, binding) {
+        unbind(el);
+        bind(el, binding.value);
+    },
+    unmounted(el) {
+        unbind(el);
+    },
+};
+export { PixelVaultPasteError } from "@pixelvault-dev/paste";

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@pixelvault-dev/paste-vue",
+  "version": "0.1.0",
+  "type": "module",
+  "license": "MIT",
+  "description": "Vue 3 binding for @pixelvault-dev/paste — a usePaste composable and vPaste directive for paste-and-host.",
+  "keywords": [
+    "image",
+    "upload",
+    "paste",
+    "vue",
+    "composable",
+    "directive",
+    "cdn",
+    "pixelvault"
+  ],
+  "homepage": "https://pixelvault.dev/docs#paste",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pixelvault-dev/pixelvault.git",
+    "directory": "packages/paste-vue"
+  },
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "clean": "node -e \"require('fs').rmSync('dist',{recursive:true,force:true})\"",
+    "build": "npm run clean && tsc",
+    "typecheck": "tsc --noEmit",
+    "prepack": "npm run build"
+  },
+  "dependencies": {
+    "@pixelvault-dev/paste": "^0.1.0"
+  },
+  "peerDependencies": {
+    "vue": ">=3"
+  },
+  "devDependencies": {
+    "typescript": "^5.7.3",
+    "vue": "^3.5.13"
+  }
+}