@cropvue/vue 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+import './css/variables.css';
+export { default as CropVue } from './components/CropVue.vue';
+export { default as CropEditor } from './components/CropEditor.vue';
+export { default as CropPreview } from './components/CropPreview.vue';
+export { default as CropDropzone } from './components/CropDropzone.vue';
+export { default as CropToolbar } from './components/CropToolbar.vue';
+export { default as CropQueue } from './components/CropQueue.vue';
+export { default as CropStencil } from './components/CropStencil.vue';
+export { useCropper, useDropzone, useImageQueue, useUploader, useCompressor } from '@cropvue/core';
+export type * from '@cropvue/core';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,qBAAqB,CAAA;AAE5B,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,0BAA0B,CAAA;AAC7D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,6BAA6B,CAAA;AACnE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,8BAA8B,CAAA;AACrE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,+BAA+B,CAAA;AACvE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,8BAA8B,CAAA;AACrE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,4BAA4B,CAAA;AACjE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,8BAA8B,CAAA;AACrE,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,aAAa,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAClG,mBAAmB,eAAe,CAAA"}

package/dist/styles.css

@@ -0,0 +1 @@
+:root{--cropvue-overlay-color: rgba(0, 0, 0, .5);--cropvue-overlay-transition: .15s ease;--cropvue-crop-border-color: #fff;--cropvue-crop-border-width: 2px;--cropvue-crop-border-style: solid;--cropvue-grid-color: rgba(255, 255, 255, .3);--cropvue-grid-width: 1px;--cropvue-grid-display: block;--cropvue-handle-color: #fff;--cropvue-handle-size: 10px;--cropvue-handle-border-radius: 50%;--cropvue-dropzone-border-color: #d1d5db;--cropvue-dropzone-border-color-active: #3b82f6;--cropvue-dropzone-bg: transparent;--cropvue-dropzone-bg-active: rgba(59, 130, 246, .05);--cropvue-dropzone-border-style: dashed;--cropvue-dropzone-border-radius: 8px;--cropvue-editor-bg: #1a1a1a;--cropvue-editor-height: auto;--cropvue-editor-aspect-ratio: 4 / 3;--cropvue-editor-max-height: none;--cropvue-editor-min-height: 120px;--cropvue-editor-border-radius: 0;--cropvue-preview-border-radius: 0;--cropvue-preview-bg: transparent;--cropvue-max-width: none;--cropvue-toolbar-bg: #fff;--cropvue-toolbar-btn-size: 36px;--cropvue-toolbar-padding: 8px;--cropvue-toolbar-gap: 4px;--cropvue-toolbar-separator-height: 20px;--cropvue-toolbar-border-radius: 8px;--cropvue-toolbar-border-color: #e5e7eb;--cropvue-toolbar-btn-color: #374151;--cropvue-toolbar-btn-hover-bg: #f3f4f6;--cropvue-toolbar-btn-hover-color: #111827;--cropvue-toolbar-btn-active-bg: #e5e7eb;--cropvue-toolbar-btn-radius: 6px;--cropvue-toolbar-separator-color: #e5e7eb;--cropvue-toolbar-separator-display: block;--cropvue-queue-thumb-size: 64px;--cropvue-queue-thumb-radius: 6px;--cropvue-queue-active-border: #3b82f6;--cropvue-queue-check-bg: #22c55e;--cropvue-btn-padding: 8px 20px;--cropvue-btn-font-size: 14px;--cropvue-btn-bg: #fff;--cropvue-btn-color: #374151;--cropvue-btn-border-color: #d1d5db;--cropvue-btn-radius: 6px;--cropvue-btn-hover-bg: #f9fafb;--cropvue-btn-confirm-bg: #3b82f6;--cropvue-btn-confirm-color: #fff;--cropvue-btn-confirm-border: #3b82f6;--cropvue-btn-confirm-hover-bg: #2563eb;--cropvue-actions-gap: 8px;--cropvue-actions-padding: 12px 0;--cropvue-stencil-bg: transparent;--cropvue-stencil-border: none}.cropvue-editor{position:relative;overflow:hidden;width:100%;height:var(--cropvue-editor-height, auto);aspect-ratio:var(--cropvue-editor-aspect-ratio, 4 / 3);max-height:var(--cropvue-editor-max-height, none);min-height:var(--cropvue-editor-min-height, 120px);border-radius:var(--cropvue-editor-border-radius, 0);background:var(--cropvue-editor-bg, #1a1a1a);-webkit-user-select:none;user-select:none;touch-action:none}.cropvue-editor__viewport{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;cursor:grab;outline:none}.cropvue-editor__viewport--panning{cursor:grabbing}.cropvue-editor__image{pointer-events:none;flex-shrink:0}.cropvue-editor__overlay{position:absolute;inset:0;background:var(--cropvue-overlay-color, rgba(0, 0, 0, .5));pointer-events:none;transition:background var(--cropvue-overlay-transition, .15s ease)}.cropvue-editor__crop-area{position:absolute;border:var(--cropvue-crop-border-width, 2px) var(--cropvue-crop-border-style, solid) var(--cropvue-crop-border-color, #fff);box-sizing:border-box;pointer-events:auto;cursor:move}.cropvue-editor__crop-area--circle{border-radius:50%}.cropvue-editor__grid{position:absolute;inset:0;display:var(--cropvue-grid-display, block)}.cropvue-editor__grid-line{position:absolute;background:var(--cropvue-grid-color, rgba(255, 255, 255, .3))}.cropvue-editor__grid-line--h1,.cropvue-editor__grid-line--h2{left:0;right:0;height:var(--cropvue-grid-width, 1px)}.cropvue-editor__grid-line--h1{top:33.33%}.cropvue-editor__grid-line--h2{top:66.66%}.cropvue-editor__grid-line--v1,.cropvue-editor__grid-line--v2{top:0;bottom:0;width:var(--cropvue-grid-width, 1px)}.cropvue-editor__grid-line--v1{left:33.33%}.cropvue-editor__grid-line--v2{left:66.66%}.cropvue-editor__handle{position:absolute;width:var(--cropvue-handle-size, 10px);height:var(--cropvue-handle-size, 10px);background:var(--cropvue-handle-color, #fff);border-radius:var(--cropvue-handle-border-radius, 50%);pointer-events:auto}.cropvue-editor__handle--nw{top:-5px;left:-5px;cursor:nwse-resize}.cropvue-editor__handle--ne{top:-5px;right:-5px;cursor:nesw-resize}.cropvue-editor__handle--sw{bottom:-5px;left:-5px;cursor:nesw-resize}.cropvue-editor__handle--se{bottom:-5px;right:-5px;cursor:nwse-resize}.cropvue-editor__crop-area--circle .cropvue-editor__handle--ne{top:14.64%;right:auto;left:85.36%;transform:translate(-50%,-50%)}.cropvue-toolbar{display:flex;align-items:center}.cropvue-toolbar__default{display:flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:var(--cropvue-toolbar-gap, 4px);padding:var(--cropvue-toolbar-padding, 8px);background:var(--cropvue-toolbar-bg, #fff);border-radius:var(--cropvue-toolbar-border-radius, 8px);border:1px solid var(--cropvue-toolbar-border-color, #e5e7eb)}.cropvue-toolbar__btn{display:inline-flex;align-items:center;justify-content:center;width:var(--cropvue-toolbar-btn-size, 36px);height:var(--cropvue-toolbar-btn-size, 36px);padding:0;border:none;background:transparent;color:var(--cropvue-toolbar-btn-color, #374151);border-radius:var(--cropvue-toolbar-btn-radius, 6px);cursor:pointer;transition:background .15s ease,color .15s ease}.cropvue-toolbar__btn:hover{background:var(--cropvue-toolbar-btn-hover-bg, #f3f4f6);color:var(--cropvue-toolbar-btn-hover-color, #111827)}.cropvue-toolbar__btn:active{background:var(--cropvue-toolbar-btn-active-bg, #e5e7eb)}.cropvue-toolbar__separator{display:var(--cropvue-toolbar-separator-display, block);width:1px;height:var(--cropvue-toolbar-separator-height, 20px);margin:0 var(--cropvue-toolbar-gap, 4px);background:var(--cropvue-toolbar-separator-color, #e5e7eb)}.cropvue{width:100%;min-width:0;max-width:var(--cropvue-max-width, none)}.cropvue__dropzone{border:2px dashed var(--cropvue-dropzone-border-color, #d1d5db);border-radius:var(--cropvue-dropzone-border-radius, 8px);background:var(--cropvue-dropzone-bg, transparent);display:flex;align-items:center;justify-content:center;min-height:200px;padding:2rem;color:#6b7280;cursor:pointer;transition:border-color .15s ease,background .15s ease}.cropvue__dropzone--active{border-color:var(--cropvue-dropzone-border-color-active, #3b82f6);background:var(--cropvue-dropzone-bg-active, rgba(59, 130, 246, .05))}.cropvue__actions{display:flex;gap:var(--cropvue-actions-gap, 8px);justify-content:flex-end;padding:var(--cropvue-actions-padding, 12px 0)}.cropvue__btn{padding:var(--cropvue-btn-padding, 8px 20px);border:1px solid var(--cropvue-btn-border-color, #d1d5db);border-radius:var(--cropvue-btn-radius, 6px);background:var(--cropvue-btn-bg, #fff);color:var(--cropvue-btn-color, #374151);font-size:var(--cropvue-btn-font-size, 14px);cursor:pointer;transition:background .15s ease}.cropvue__btn:hover{background:var(--cropvue-btn-hover-bg, #f9fafb)}.cropvue__btn--confirm{background:var(--cropvue-btn-confirm-bg, #3b82f6);color:var(--cropvue-btn-confirm-color, #fff);border-color:var(--cropvue-btn-confirm-border, #3b82f6)}.cropvue__btn--confirm:hover{background:var(--cropvue-btn-confirm-hover-bg, #2563eb)}.cropvue__btn--confirm:disabled{opacity:.6;cursor:not-allowed}.cropvue__done{display:flex;flex-direction:column;align-items:center;gap:16px;padding:16px}.cropvue__result-image{max-width:100%;max-height:400px;border-radius:var(--cropvue-preview-border-radius, 8px)}.cropvue-preview{display:inline-block;overflow:hidden;border-radius:var(--cropvue-preview-border-radius, 0);background:var(--cropvue-preview-bg, transparent)}.cropvue-preview__canvas{display:block;max-width:100%;height:auto}.cropvue-dropzone{border:2px var(--cropvue-dropzone-border-style, dashed) var(--cropvue-dropzone-border-color, #d1d5db);border-radius:var(--cropvue-dropzone-border-radius, 8px);background:var(--cropvue-dropzone-bg, transparent);transition:border-color .15s ease,background .15s ease;cursor:pointer}.cropvue-dropzone--active{border-color:var(--cropvue-dropzone-border-color-active, #3b82f6);background:var(--cropvue-dropzone-bg-active, rgba(59, 130, 246, .05))}.cropvue-dropzone__default{display:flex;align-items:center;justify-content:center;min-height:200px;padding:2rem;color:#6b7280}.cropvue-queue__list{display:flex;gap:8px;padding:8px;overflow-x:auto}.cropvue-queue__item{position:relative;flex-shrink:0;width:var(--cropvue-queue-thumb-size, 64px);height:var(--cropvue-queue-thumb-size, 64px);border-radius:var(--cropvue-queue-thumb-radius, 6px);overflow:hidden;cursor:pointer;border:2px solid transparent;transition:border-color .15s ease}.cropvue-queue__item--active{border-color:var(--cropvue-queue-active-border, #3b82f6)}.cropvue-queue__item--done{opacity:.7}.cropvue-queue__thumbnail{width:100%;height:100%;object-fit:cover}.cropvue-queue__remove{position:absolute;top:2px;right:2px;display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:none;border-radius:50%;background:#0009;color:#fff;cursor:pointer;opacity:0;transition:opacity .15s ease}.cropvue-queue__item:hover .cropvue-queue__remove{opacity:1}.cropvue-queue__check{position:absolute;bottom:2px;right:2px;display:flex;align-items:center;justify-content:center;width:20px;height:20px;background:var(--cropvue-queue-check-bg, #22c55e);border-radius:50%;color:#fff}.cropvue-stencil{position:absolute;inset:0;pointer-events:none}.cropvue-stencil__shape{position:absolute;inset:0;background:var(--cropvue-stencil-bg, transparent);border:var(--cropvue-stencil-border, none)}

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@cropvue/vue",
+  "version": "0.1.0",
+  "type": "module",
+  "license": "MIT",
+  "description": "Headless, fully customizable image cropping and upload components for Vue 3",
+  "author": "Philip Rutberg",
+  "keywords": [
+    "vue",
+    "vue3",
+    "cropper",
+    "image-crop",
+    "headless",
+    "upload",
+    "component"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/rutbergphilip/cropvue.git",
+    "directory": "packages/vue"
+  },
+  "homepage": "https://github.com/rutbergphilip/cropvue",
+  "bugs": "https://github.com/rutbergphilip/cropvue/issues",
+  "main": "./dist/cropvue.cjs",
+  "module": "./dist/cropvue.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/cropvue.mjs",
+      "require": "./dist/cropvue.cjs"
+    },
+    "./styles": "./dist/styles.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@cropvue/core": "0.1.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.2.0",
+    "vite": "^7.0.0",
+    "vue": "^3.5.0",
+    "vue-tsc": "^2.2.0"
+  },
+  "scripts": {
+    "build": "vite build && vue-tsc --declaration --emitDeclarationOnly --outDir dist",
+    "dev": "vite build --watch"
+  }
+}