@akccakcctw/vue-grab 1.0.0 → 1.3.0

package/src/core/widget.ts

@@ -1,289 +0,0 @@
-type ToggleWidgetOptions = {
-  onToggle: (nextActive: boolean) => void;
-};
-
-type ToggleWidgetController = {
-  mount: () => void;
-  unmount: () => void;
-  setActive: (active: boolean) => void;
-};
-
-type DragState = {
-  dragging: boolean;
-  offsetX: number;
-  offsetY: number;
-  moved: boolean;
-};
-
-const CURSOR_ICON = `<svg data-v-6fdbd1c9="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="height: 1.2em; width: 1.2em; pointer-events: none;"><g data-v-6fdbd1c9="" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><circle data-v-6fdbd1c9="" cx="12" cy="12" r=".5" fill="currentColor"></circle><path data-v-6fdbd1c9="" d="M5 12a7 7 0 1 0 14 0a7 7 0 1 0-14 0m7-9v2m-9 7h2m7 7v2m7-9h2"></path></g></svg>`;
-const CHEVRON_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" width="12" height="12" style="transform: rotate(180deg); pointer-events: none;"><path d="m18 15-6-6-6 6"></path></svg>`;
-
-function createToolbar(targetWindow: Window) {
-  const doc = targetWindow.document;
-  const container = doc.createElement('div');
-  
-  // Outer Container Styles
-  Object.assign(container.style, {
-    position: 'fixed',
-    left: '16px',
-    top: '16px',
-    zIndex: '2147483647',
-    fontFamily: 'sans-serif',
-    fontSize: '13px',
-    userSelect: 'none',
-    cursor: 'grab',
-    filter: 'drop-shadow(0px 0px 4px rgba(81, 81, 81, 0.5))',
-    transition: 'opacity 300ms ease-out, padding 0.2s ease',
-    opacity: '1',
-  });
-  container.setAttribute('data-vue-grab-toolbar', '');
-  container.setAttribute('data-vue-grab-ignore-events', '');
-
-  const inner = doc.createElement('div');
-  Object.assign(inner.style, {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: '4px',
-    backgroundColor: 'white',
-    gap: '6px',
-    padding: '6px 8px',
-    transition: 'gap 0.2s ease, padding 0.2s ease',
-  });
-  
-  // Toggle Button Wrapper
-  const toggleWrapper = doc.createElement('div');
-  Object.assign(toggleWrapper.style, {
-    display: 'flex',
-    alignItems: 'center',
-    gap: '6px',
-    overflow: 'hidden',
-    maxWidth: '200px',
-    transition: 'max-width 0.2s ease, opacity 0.2s ease'
-  });
-
-  // Toggle Button
-  const toggleBtn = doc.createElement('button');
-  toggleBtn.setAttribute('data-vue-grab-toggle', '');
-  Object.assign(toggleBtn.style, {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    cursor: 'pointer',
-    border: 'none',
-    background: 'transparent',
-    padding: '0',
-    transition: 'transform 0.1s',
-    color: 'rgba(0, 0, 0, 0.7)'
-  });
-  toggleBtn.innerHTML = CURSOR_ICON;
-  toggleBtn.onmouseenter = () => toggleBtn.style.transform = 'scale(1.05)';
-  toggleBtn.onmouseleave = () => toggleBtn.style.transform = 'scale(1)';
-
-  toggleWrapper.appendChild(toggleBtn);
-
-  // Collapse Button
-  const collapseBtn = doc.createElement('button');
-  collapseBtn.setAttribute('data-vue-grab-collapse', '');
-  Object.assign(collapseBtn.style, {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    cursor: 'pointer',
-    border: 'none',
-    background: 'transparent',
-    padding: '0',
-    transition: 'transform 0.1s',
-    color: '#B3B3B3'
-  });
-  collapseBtn.innerHTML = CHEVRON_ICON;
-  collapseBtn.onmouseenter = () => collapseBtn.style.transform = 'scale(1.05)';
-  collapseBtn.onmouseleave = () => collapseBtn.style.transform = 'scale(1)';
-
-  inner.appendChild(toggleWrapper);
-  inner.appendChild(collapseBtn);
-  container.appendChild(inner);
-
-  return { container, toggleBtn, collapseBtn, toggleWrapper };
-}
-
-function setButtonState(toggleBtn: HTMLElement, active: boolean) {
-  // Use color to indicate state: Blue for active, Gray for inactive
-  toggleBtn.style.color = active ? '#3b82f6' : 'rgba(0, 0, 0, 0.7)';
-}
-
-export function createToggleWidget(
-  targetWindow: Window,
-  options: ToggleWidgetOptions
-): ToggleWidgetController {
-  let elements:
-    | {
-        container: HTMLDivElement;
-        toggleBtn: HTMLButtonElement;
-        collapseBtn: HTMLButtonElement;
-        toggleWrapper: HTMLDivElement;
-      }
-    | null = null;
-  let mounted = false;
-  let isActive = false;
-  let isCollapsed = false;
-  let lastPosition = {
-    left: '',
-    top: '',
-    right: '',
-    bottom: ''
-  };
-  const defaultInnerGap = '6px';
-  const defaultInnerPadding = '6px 8px';
-  const dragState: DragState = {
-    dragging: false,
-    offsetX: 0,
-    offsetY: 0,
-    moved: false
-  };
-
-  const startDrag = (event: MouseEvent) => {
-    if (!elements) return;
-    // Don't drag if clicking buttons directly might be better handled by stopPropagation, 
-    // but here we allow dragging from anywhere on the container.
-    // However, if we click a button, we might want to prevent drag start or ensure click works?
-    // Usually standard behavior: mousedown + mouseup without move = click. mousedown + move = drag.
-    
-    dragState.dragging = true;
-    dragState.moved = false;
-    const rect = elements.container.getBoundingClientRect();
-    dragState.offsetX = event.clientX - rect.left;
-    dragState.offsetY = event.clientY - rect.top;
-    
-    // Switch to explicit coords for dragging
-    elements.container.style.right = 'auto';
-    elements.container.style.bottom = 'auto';
-    elements.container.style.left = `${rect.left}px`;
-    elements.container.style.top = `${rect.top}px`;
-    elements.container.style.cursor = 'grabbing';
-  };
-
-  const onDrag = (event: MouseEvent) => {
-    if (!elements || !dragState.dragging) return;
-    dragState.moved = true;
-    const nextLeft = event.clientX - dragState.offsetX;
-    const nextTop = event.clientY - dragState.offsetY;
-    const maxLeft = targetWindow.innerWidth - elements.container.offsetWidth;
-    const maxTop = targetWindow.innerHeight - elements.container.offsetHeight;
-    const clampedLeft = Math.max(0, Math.min(maxLeft, nextLeft));
-    const clampedTop = Math.max(0, Math.min(maxTop, nextTop));
-    elements.container.style.left = `${clampedLeft}px`;
-    elements.container.style.top = `${clampedTop}px`;
-  };
-
-  const endDrag = () => {
-    if (!elements) return;
-    dragState.dragging = false;
-    elements.container.style.cursor = 'grab';
-  };
-
-  const toggleCollapse = () => {
-    if (!elements) return;
-    const { container, toggleWrapper, collapseBtn } = elements;
-    const inner = container.firstElementChild as HTMLDivElement | null;
-    const svg = collapseBtn.querySelector('svg') as SVGElement | null;
-
-    if (!isCollapsed) {
-      const rect = container.getBoundingClientRect();
-      lastPosition = {
-        left: container.style.left,
-        top: container.style.top,
-        right: container.style.right,
-        bottom: container.style.bottom
-      };
-      const stickLeft = rect.left + rect.width / 2 < targetWindow.innerWidth / 2;
-      container.style.top = `${rect.top}px`;
-      if (stickLeft) {
-        container.style.left = '0px';
-        container.style.right = 'auto';
-      } else {
-        container.style.left = 'auto';
-        container.style.right = '0px';
-      }
-      container.style.bottom = 'auto';
-      container.style.transform = 'scale(0.8)';
-      container.style.padding = '0';
-      toggleWrapper.style.maxWidth = '0px';
-      toggleWrapper.style.opacity = '0';
-      toggleWrapper.style.pointerEvents = 'none';
-      if (inner) {
-        inner.style.gap = '0';
-        inner.style.padding = '6px';
-      }
-      if (svg) svg.style.transform = 'rotate(0deg)';
-      isCollapsed = true;
-    } else {
-      container.style.left = lastPosition.left;
-      container.style.top = lastPosition.top;
-      container.style.right = lastPosition.right;
-      container.style.bottom = lastPosition.bottom;
-      container.style.transform = 'scale(1)';
-      container.style.padding = '';
-      toggleWrapper.style.maxWidth = '200px';
-      toggleWrapper.style.opacity = '1';
-      toggleWrapper.style.pointerEvents = 'auto';
-      if (inner) {
-        inner.style.gap = defaultInnerGap;
-        inner.style.padding = defaultInnerPadding;
-      }
-      if (svg) svg.style.transform = 'rotate(180deg)';
-      isCollapsed = false;
-    }
-  };
-
-  return {
-    mount() {
-      if (mounted) return;
-      mounted = true;
-      elements = createToolbar(targetWindow);
-      if (!elements) return;
-
-      setButtonState(elements.toggleBtn, isActive);
-
-      // Drag listeners on the container
-      elements.container.addEventListener('mousedown', startDrag);
-      
-      // Toggle logic
-      elements.toggleBtn.addEventListener('click', (event) => {
-        event.preventDefault();
-        event.stopPropagation(); // Prevent affecting container?
-        if (dragState.moved) return; // Prevent toggle if it was a drag
-        
-        isActive = !isActive;
-        setButtonState(elements!.toggleBtn, isActive);
-        options.onToggle(isActive);
-      });
-
-      // Collapse logic (Placeholder)
-      elements.collapseBtn.addEventListener('click', (event) => {
-        event.preventDefault();
-        event.stopPropagation();
-        if (dragState.moved) return;
-        toggleCollapse();
-      });
-
-      targetWindow.addEventListener('mousemove', onDrag);
-      targetWindow.addEventListener('mouseup', endDrag);
-      targetWindow.document.body.appendChild(elements.container);
-    },
-    unmount() {
-      if (!mounted || !elements) return;
-      mounted = false;
-      elements.container.removeEventListener('mousedown', startDrag);
-      elements.container.remove();
-      elements = null;
-      targetWindow.removeEventListener('mousemove', onDrag);
-      targetWindow.removeEventListener('mouseup', endDrag);
-    },
-    setActive(active: boolean) {
-      isActive = active;
-      if (!elements) return;
-      setButtonState(elements.toggleBtn, active);
-    }
-  };
-}

package/src/index.ts

@@ -1,8 +0,0 @@
-export { createVueGrabAPI, installVueGrab } from './core/api';
-export type { VueGrabOptions } from './core/api';
-export type { OverlayOptions, OverlayStyle } from './core/overlay';
-export { createToggleWidget } from './core/widget';
-export { identifyComponent, extractMetadata } from './core/identifier';
-export { createOverlayController } from './core/overlay';
-export { createVueGrabPlugin } from './plugin';
-export { default } from './plugin';

package/src/nuxt/module.ts

@@ -1,102 +0,0 @@
-import { addPlugin, createResolver, defineNuxtModule, addVitePlugin } from '@nuxt/kit';
-
-export type VueGrabNuxtModuleOptions = {
-  enabled?: boolean;
-  overlayStyle?: Record<string, string>;
-  copyOnClick?: boolean;
-  rootDir?: string;
-};
-
-export default defineNuxtModule<VueGrabNuxtModuleOptions>({
-  meta: {
-    name: 'vue-grab',
-    configKey: 'vueGrab'
-  },
-  defaults: {
-    enabled: true
-  },
-  setup(options, nuxt) {
-    if (options.enabled === false) return;
-    const shouldEnable = nuxt.options.dev || options.enabled === true;
-    if (!shouldEnable) return;
-
-    const publicConfig = (nuxt.options.runtimeConfig.public ||= {});
-    const { enabled, overlayStyle, copyOnClick, rootDir } = options;
-    publicConfig.vueGrab = {
-      ...(publicConfig.vueGrab as Record<string, any> | undefined),
-      enabled,
-      overlayStyle,
-      copyOnClick,
-      rootDir: rootDir || nuxt.options.rootDir
-    };
-
-    nuxt.options.build.transpile = nuxt.options.build.transpile || [];
-    if (!nuxt.options.build.transpile.includes('vue-grab')) {
-      nuxt.options.build.transpile.push('vue-grab');
-    }
-
-    const resolver = createResolver(import.meta.url);
-    addPlugin({
-      src: resolver.resolve('./runtime/plugin'),
-      mode: 'client'
-    });
-
-    addVitePlugin({
-      name: 'vite-plugin-vue-grab-injector',
-      enforce: 'post',
-      transform(code, id) {
-        if (!id.match(/\.vue($|\?)/) || id.includes('node_modules')) return;
-        const [filename] = id.split('?');
-        if (!filename) return;
-        
-        const file = filename.replace(nuxt.options.rootDir, '');
-        
-        const getLineCol = (index: number) => {
-          const pre = code.slice(0, index);
-          const lines = pre.split('\n');
-          const line = lines.length;
-          const column = lines[lines.length - 1].length + 1;
-          return { line, column };
-        };
-
-        // 1. Handle "export default _sfc_main" (common in script setup)
-        const matchVar = code.match(/export default\s+([a-zA-Z0-9_$]+)/);
-        if (matchVar && matchVar.index !== undefined) {
-          const name = matchVar[1];
-          // For variable export, the definition is usually earlier. 
-          // We can't easily find the definition line without parsing.
-          // But we can fallback to 1, or try to find "const name ="?
-          // For script setup, the variable is defined near the top or bottom.
-          // Let's use 1 as fallback for variable export, or try to find definition.
-          // Actually, let's just stick to file path for now for variable, or use 1.
-          // Nuxt DevTools often uses 1 for SFCs unless it parses the template.
-          const inject = `\n${name}.__file = ${JSON.stringify(file)};\n${name}.__line = 1;\n${name}.__column = 1;\n`;
-          return {
-            code: code.replace(matchVar[0], inject + matchVar[0]),
-            map: null
-          };
-        }
-        
-        // 2. Handle "export default { ... }"
-        const matchObj = code.match(/export default\s*\{/);
-        if (matchObj && matchObj.index !== undefined) {
-          const { line, column } = getLineCol(matchObj.index);
-          return {
-            code: code.replace(/export default\s*\{/, `export default { __file: ${JSON.stringify(file)}, __line: ${line}, __column: ${column},`),
-            map: null
-          };
-        }
-        
-        // 3. Handle "export default defineComponent({ ... })"
-        const matchDef = code.match(/export default\s+defineComponent\s*\(\s*\{/);
-        if (matchDef && matchDef.index !== undefined) {
-          const { line, column } = getLineCol(matchDef.index);
-          return {
-            code: code.replace(/export default\s+defineComponent\s*\(\s*\{/, `export default defineComponent({ __file: ${JSON.stringify(file)}, __line: ${line}, __column: ${column},`),
-            map: null
-          };
-        }
-      }
-    });
-  }
-});

package/src/nuxt/runtime/plugin.ts

@@ -1,13 +0,0 @@
-import { defineNuxtPlugin, useRuntimeConfig } from '#app';
-import { installVueGrab } from '../../core/api';
-
-export default defineNuxtPlugin(() => {
-  const config = useRuntimeConfig().public?.vueGrab ?? {};
-  if (config.enabled === false) return;
-  if (typeof window === 'undefined') return;
-  installVueGrab(window, {
-    overlayStyle: config.overlayStyle,
-    copyOnClick: config.copyOnClick,
-    rootDir: config.rootDir
-  });
-});

package/src/plugin.ts

@@ -1,48 +0,0 @@
-import { installVueGrab } from './core/api';
-import type { VueGrabOptions } from './core/api';
-
-export type VueGrabPluginOptions = VueGrabOptions & {
-  enabled?: boolean;
-};
-
-function isDevEnvironment() {
-  if (typeof import.meta !== 'undefined' && (import.meta as any).env) {
-    return Boolean((import.meta as any).env.DEV);
-  }
-  
-  try {
-    const globalScope = 
-      typeof globalThis !== 'undefined' ? globalThis : 
-      typeof window !== 'undefined' ? window : 
-      typeof self !== 'undefined' ? self : 
-      typeof global !== 'undefined' ? global : {};
-
-    const proc = (globalScope as any).process;
-    if (proc && proc.env) {
-      return proc.env.NODE_ENV !== 'production';
-    }
-  } catch {
-    // ignore
-  }
-  return false;
-}
-
-export function createVueGrabPlugin(options: VueGrabPluginOptions = {}) {
-  return {
-    install() {
-      const enabled =
-        typeof options.enabled === 'boolean' ? options.enabled : isDevEnvironment();
-      if (enabled && typeof window !== 'undefined') {
-        installVueGrab(window, {
-          overlayStyle: options.overlayStyle,
-          onCopy: options.onCopy,
-          copyOnClick: options.copyOnClick,
-          rootDir: options.rootDir,
-          domFileResolver: options.domFileResolver
-        });
-      }
-    }
-  };
-}
-
-export default createVueGrabPlugin();

package/tsconfig.json

@@ -1,44 +0,0 @@
-{
-  // Visit https://aka.ms/tsconfig to read more about this file
-  "compilerOptions": {
-    // File Layout
-    // "rootDir": "./src",
-    // "outDir": "./dist",
-
-    // Environment Settings
-    // See also https://aka.ms/tsconfig/module
-    "module": "nodenext",
-    "target": "esnext",
-    "types": [],
-    // For nodejs:
-    // "lib": ["esnext"],
-    // "types": ["node"],
-    // and npm install -D @types/node
-
-    // Other Outputs
-    "sourceMap": true,
-    "declaration": true,
-    "declarationMap": true,
-
-    // Stricter Typechecking Options
-    "noUncheckedIndexedAccess": true,
-    "exactOptionalPropertyTypes": true,
-
-    // Style Options
-    // "noImplicitReturns": true,
-    // "noImplicitOverride": true,
-    // "noUnusedLocals": true,
-    // "noUnusedParameters": true,
-    // "noFallthroughCasesInSwitch": true,
-    // "noPropertyAccessFromIndexSignature": true,
-
-    // Recommended Options
-    "strict": true,
-    "jsx": "react-jsx",
-    "verbatimModuleSyntax": true,
-    "isolatedModules": true,
-    "noUncheckedSideEffectImports": true,
-    "moduleDetection": "force",
-    "skipLibCheck": true,
-  }
-}

package/vitest.config.ts

@@ -1,9 +0,0 @@
-import { defineConfig } from 'vitest/config'
-import vue from '@vitejs/plugin-vue'
-
-export default defineConfig({
-  plugins: [vue() as any],
-  test: {
-    environment: 'jsdom',
-  },
-})