{"_id":"@bestvoy/order-tracking","_rev":"3-5b5a18d58b70856908b6dc05789dab52","name":"@bestvoy/order-tracking","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@bestvoy/order-tracking","version":"1.0.0","keywords":["order-tracking","tracking","search","component","framework-agnostic","vanilla-js","react","vue","angular","svelte","web-component","ui-component","shipping","delivery","package-tracking"],"author":{"name":"BestVoy Team","email":"support@bestvoy.com"},"license":"MIT","_id":"@bestvoy/order-tracking@1.0.0","maintainers":[{"name":"haoqianyi","email":"haoqianduan@outlook.com"}],"homepage":"https://github.com/bestvoy/order-tracking#readme","bugs":{"url":"https://github.com/bestvoy/order-tracking/issues"},"dist":{"shasum":"7c89c4894ace9cad459aa761bfaa8a8aa57f3a37","tarball":"https://registry.npmjs.org/@bestvoy/order-tracking/-/order-tracking-1.0.0.tgz","fileCount":18,"integrity":"sha512-p6mgZb5WRCNHowQI0To9nnM7rkW9Lw0erATnGZie11BW9u5Z6WH2GUTrpm3yP+NlxaESlsLf72rZHxgcPUiVZw==","signatures":[{"sig":"MEUCIQCj4ordhCOqY4HCq/015PzDqWAgSGjOdF/NoGtRVuAobgIgW9MNOPdefHLqsTFNSIqOPijET+l5pHzlx4XbeZnLXf4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":218137},"main":"dist/order-tracking.cjs.js","types":"src/order-tracking.d.ts","unpkg":"dist/order-tracking.min.js","module":"dist/order-tracking.esm.js","engines":{"node":">=14.0.0"},"gitHead":"c437d6b44aedcc6871b2b06d2e31cb719fc0baea","scripts":{"dev":"rollup -c -w","build":"rollup -c","prepare":"npm run build","prepublishOnly":"npm run build"},"_npmUser":{"name":"haoqianyi","email":"haoqianduan@outlook.com"},"jsdelivr":"dist/order-tracking.min.js","repository":{"url":"git+https://github.com/bestvoy/order-tracking.git","type":"git"},"_npmVersion":"10.8.2","description":"A framework-agnostic order tracking search component that works with any frontend framework","directories":{},"_nodeVersion":"20.19.3","browserslist":["> 1%","last 2 versions","not dead"],"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"rollup":"^4.9.6","@rollup/plugin-terser":"^0.4.4","rollup-plugin-postcss":"^4.0.2","@rollup/plugin-commonjs":"^25.0.7","@rollup/plugin-node-resolve":"^15.2.3"},"_npmOperationalInternal":{"tmp":"tmp/order-tracking_1.0.0_1760426621519_0.6085959652463806","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@bestvoy/order-tracking","version":"1.0.1","keywords":["order-tracking","tracking","search","component","framework-agnostic","vanilla-js","react","vue","angular","svelte","web-component","ui-component","shipping","delivery","package-tracking"],"author":{"name":"BestVoy Team","email":"support@bestvoy.com"},"license":"MIT","_id":"@bestvoy/order-tracking@1.0.1","maintainers":[{"name":"haoqianyi","email":"haoqianduan@outlook.com"}],"homepage":"https://github.com/bestvoy/order-tracking#readme","bugs":{"url":"https://github.com/bestvoy/order-tracking/issues"},"dist":{"shasum":"a3c6b0a0e3efe8d69bfdb22118e39fe6332f8321","tarball":"https://registry.npmjs.org/@bestvoy/order-tracking/-/order-tracking-1.0.1.tgz","fileCount":18,"integrity":"sha512-kv2vF24ipqbz1Hh1fNeofR5IsFp2Z2P7Mb4f+eBKTFs8lF9xqDAHn0+908BgerQiXdBm8BIP/qAWAkPdt5zCQQ==","signatures":[{"sig":"MEQCIAvUKiRWydJhtsVTvZ8GFSxOxtMt/fx1wTa6mBN88YZyAiAv+EL8QzfS0GJyPvoY/0LJmSHSgGZDqYPcwidzpeyMYg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":218802},"main":"dist/order-tracking.cjs.js","types":"src/order-tracking.d.ts","unpkg":"dist/order-tracking.min.js","module":"dist/order-tracking.esm.js","engines":{"node":">=14.0.0"},"gitHead":"4855c80355eec6698fba5d73f4c9f6ff5b4afe12","scripts":{"dev":"rollup -c -w","build":"rollup -c","prepare":"npm run build","prepublishOnly":"npm run build"},"_npmUser":{"name":"haoqianyi","email":"haoqianduan@outlook.com"},"jsdelivr":"dist/order-tracking.min.js","repository":{"url":"git+https://github.com/bestvoy/order-tracking.git","type":"git"},"_npmVersion":"10.8.2","description":"A framework-agnostic order tracking search component that works with any frontend framework","directories":{},"_nodeVersion":"20.19.3","browserslist":["> 1%","last 2 versions","not dead"],"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"rollup":"^4.9.6","@rollup/plugin-terser":"^0.4.4","rollup-plugin-postcss":"^4.0.2","@rollup/plugin-commonjs":"^25.0.7","@rollup/plugin-node-resolve":"^15.2.3"},"_npmOperationalInternal":{"tmp":"tmp/order-tracking_1.0.1_1760441818747_0.060640217273414176","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@bestvoy/order-tracking","version":"1.0.2","description":"A framework-agnostic order tracking search component that works with any frontend framework","main":"dist/order-tracking.cjs.js","module":"dist/order-tracking.esm.js","unpkg":"dist/order-tracking.min.js","jsdelivr":"dist/order-tracking.min.js","types":"src/order-tracking.d.ts","scripts":{"build":"rollup -c","dev":"rollup -c -w","prepublishOnly":"npm run build","prepare":"npm run build"},"keywords":["order-tracking","tracking","search","component","framework-agnostic","vanilla-js","react","vue","angular","svelte","web-component","ui-component","shipping","delivery","package-tracking"],"author":{"name":"BestVoy Team","email":"support@bestvoy.com"},"license":"MIT","homepage":"https://github.com/haoqianduan/order-tracking#readme","bugs":{"url":"https://github.com/haoqianduan/order-tracking/issues"},"repository":{"type":"git","url":"git+https://github.com/haoqianduan/order-tracking.git"},"devDependencies":{"@rollup/plugin-commonjs":"^25.0.7","@rollup/plugin-node-resolve":"^15.2.3","@rollup/plugin-terser":"^0.4.4","rollup":"^4.9.6","rollup-plugin-postcss":"^4.0.2"},"engines":{"node":">=14.0.0"},"publishConfig":{"access":"public"},"browserslist":["> 1%","last 2 versions","not dead"],"_id":"@bestvoy/order-tracking@1.0.2","gitHead":"3e998aae95b5864c6b61fe3ca24ea9e405c2057d","_nodeVersion":"20.19.3","_npmVersion":"10.8.2","dist":{"integrity":"sha512-5km5n9ebNJs6SL0xXKCFsrNwGVv5C9ExdWthyGr9u0NnGHebYl0fc7fGjVyc2CIzxGUxtSLito7SByhRnMBsuA==","shasum":"1d5e83ff93bcd8e644aa098ede92f4dc1fa9fdfc","tarball":"https://registry.npmjs.org/@bestvoy/order-tracking/-/order-tracking-1.0.2.tgz","fileCount":18,"unpackedSize":218802,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDpYHQlrH5wKrE88xUSAoyLL+G8+LhRa1nc6p2xoiGUOgIgGckFhOrmV1mkqAy5knitAQjLB/k0sdcisnUqnblyU9A="}]},"_npmUser":{"name":"haoqianyi","email":"haoqianduan@outlook.com"},"directories":{},"maintainers":[{"name":"haoqianyi","email":"haoqianduan@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/order-tracking_1.0.2_1760495756467_0.6064324843914839"},"_hasShrinkwrap":false}},"time":{"created":"2025-10-14T07:23:41.437Z","modified":"2025-10-15T02:35:56.870Z","1.0.0":"2025-10-14T07:23:41.728Z","1.0.1":"2025-10-14T11:36:58.912Z","1.0.2":"2025-10-15T02:35:56.662Z"},"bugs":{"url":"https://github.com/haoqianduan/order-tracking/issues"},"author":{"name":"BestVoy Team","email":"support@bestvoy.com"},"license":"MIT","homepage":"https://github.com/haoqianduan/order-tracking#readme","keywords":["order-tracking","tracking","search","component","framework-agnostic","vanilla-js","react","vue","angular","svelte","web-component","ui-component","shipping","delivery","package-tracking"],"repository":{"type":"git","url":"git+https://github.com/haoqianduan/order-tracking.git"},"description":"A framework-agnostic order tracking search component that works with any frontend framework","maintainers":[{"name":"haoqianyi","email":"haoqianduan@outlook.com"}],"readme":"# Order Tracking Component\n\nA framework-agnostic, lightweight order tracking search component that works with any frontend framework or vanilla JavaScript.\n\n## Features\n\n- 🚀 Framework-agnostic (works with React, Vue, Angular, Svelte, or vanilla JS)\n- 📱 Responsive design with mobile support\n- 🎨 Customizable text labels\n- 🌙 Dark mode support\n- 📦 Lightweight (~5KB minified + gzipped)\n- ♿ Accessible\n- 🔌 Easy to integrate\n\n## Installation\n\n```bash\nnpm install @bestvoy/order-tracking\n```\n\nOr via CDN:\n\n```html\n<link rel=\"stylesheet\" href=\"https://unpkg.com/@bestvoy/order-tracking/dist/order-tracking.min.css\">\n<script src=\"https://unpkg.com/@bestvoy/order-tracking/dist/order-tracking.min.js\"></script>\n```\n\n## Usage\n\n### Vanilla JavaScript\n\n```html\n<!DOCTYPE html>\n<html>\n<body>\n  <div id=\"tracking-container\"></div>\n\n  <!-- CSS is automatically injected, no need to include separately -->\n  <script src=\"node_modules/@bestvoy/order-tracking/dist/order-tracking.js\"></script>\n  <script>\n    const tracker = new OrderTracking({\n      apiUrl: '/api/common/order_tracking',\n      container: '#tracking-container',\n      onSuccess: (data) => {\n        console.log('Tracking successful:', data);\n      },\n      onError: (error) => {\n        console.error('Tracking error:', error);\n      }\n    });\n  </script>\n</body>\n</html>\n```\n\n### React\n\n```jsx\nimport { useEffect, useRef } from 'react';\nimport OrderTracking from '@bestvoy/order-tracking';\nimport '@bestvoy/order-tracking/dist/order-tracking.css';\n\nfunction TrackingComponent() {\n  const containerRef = useRef(null);\n  const trackerRef = useRef(null);\n\n  useEffect(() => {\n    if (containerRef.current) {\n      trackerRef.current = new OrderTracking({\n        apiUrl: '/api/common/order_tracking',\n        container: containerRef.current,\n        texts: {\n          title: 'Track Your Order',\n          placeholder: 'Enter order number',\n          trackButton: 'Track'\n        },\n        onSuccess: (data) => {\n          console.log('Success:', data);\n        },\n        onError: (error) => {\n          console.error('Error:', error);\n        }\n      });\n    }\n\n    return () => {\n      if (trackerRef.current) {\n        trackerRef.current.destroy();\n      }\n    };\n  }, []);\n\n  return <div ref={containerRef}></div>;\n}\n```\n\n### Vue 3\n\n```vue\n<template>\n  <div ref=\"trackingContainer\"></div>\n</template>\n\n<script setup>\nimport { ref, onMounted, onUnmounted } from 'vue';\nimport OrderTracking from '@bestvoy/order-tracking';\nimport '@bestvoy/order-tracking/dist/order-tracking.css';\n\nconst trackingContainer = ref(null);\nlet tracker = null;\n\nonMounted(() => {\n  tracker = new OrderTracking({\n    apiUrl: '/api/common/order_tracking',\n    container: trackingContainer.value,\n    onSuccess: (data) => {\n      console.log('Success:', data);\n    },\n    onError: (error) => {\n      console.error('Error:', error);\n    }\n  });\n});\n\nonUnmounted(() => {\n  if (tracker) {\n    tracker.destroy();\n  }\n});\n</script>\n```\n\n### Angular\n\n```typescript\nimport { Component, ElementRef, ViewChild, AfterViewInit, OnDestroy } from '@angular/core';\nimport OrderTracking from '@bestvoy/order-tracking';\n\n@Component({\n  selector: 'app-tracking',\n  template: '<div #trackingContainer></div>',\n  styles: [`@import '@bestvoy/order-tracking/dist/order-tracking.css';`]\n})\nexport class TrackingComponent implements AfterViewInit, OnDestroy {\n  @ViewChild('trackingContainer') containerRef!: ElementRef;\n  private tracker: any;\n\n  ngAfterViewInit() {\n    this.tracker = new OrderTracking({\n      apiUrl: '/api/common/order_tracking',\n      container: this.containerRef.nativeElement,\n      onSuccess: (data) => {\n        console.log('Success:', data);\n      },\n      onError: (error) => {\n        console.error('Error:', error);\n      }\n    });\n  }\n\n  ngOnDestroy() {\n    if (this.tracker) {\n      this.tracker.destroy();\n    }\n  }\n}\n```\n\n### Svelte\n\n```svelte\n<script>\n  import { onMount, onDestroy } from 'svelte';\n  import OrderTracking from '@bestvoy/order-tracking';\n  import '@bestvoy/order-tracking/dist/order-tracking.css';\n\n  let container;\n  let tracker;\n\n  onMount(() => {\n    tracker = new OrderTracking({\n      apiUrl: '/api/common/order_tracking',\n      container: container,\n      onSuccess: (data) => {\n        console.log('Success:', data);\n      },\n      onError: (error) => {\n        console.error('Error:', error);\n      }\n    });\n  });\n\n  onDestroy(() => {\n    if (tracker) {\n      tracker.destroy();\n    }\n  });\n</script>\n\n<div bind:this={container}></div>\n```\n\n## API\n\n### Constructor Options\n\n| Option | Type | Required | Default | Description |\n|--------|------|----------|---------|-------------|\n| `apiUrl` | `string` | Yes | - | API endpoint URL (e.g., '/api/common/order_tracking') |\n| `container` | `string \\| HTMLElement` | Yes | - | CSS selector or DOM element for the container |\n| `texts` | `object` | No | See below | Custom text labels |\n| `onError` | `function` | No | `() => {}` | Error callback function |\n| `onSuccess` | `function` | No | `() => {}` | Success callback function |\n\n### Text Options\n\n```javascript\n{\n  title: 'Order Tracking',\n  placeholder: 'Enter your order number',\n  trackButton: 'Track',\n  errorEmpty: 'Please enter an order number',\n  errorNotFound: 'Could Not Find Order',\n  errorNotShipped: 'This order has not been shipped yet. Please check again after it has been shipped',\n  errorGeneric: 'An error occurred while tracking your order'\n}\n```\n\n### Methods\n\n#### `destroy()`\nClean up and remove the component.\n\n```javascript\ntracker.destroy();\n```\n\n#### `updateConfig(options)`\nUpdate component configuration.\n\n```javascript\ntracker.updateConfig({\n  texts: {\n    title: 'New Title'\n  }\n});\n```\n\n## API Response Format\n\nThe component expects the API to return JSON in the following format:\n\n```json\n{\n  \"delivery_id\": \"1234567890\"\n}\n```\n\nIf `delivery_id` exists, the component will open a tracking page at 17track.net.\n\n## Styling\n\nThe component uses CSS classes prefixed with `order-tracking-` to avoid conflicts. You can override styles:\n\n```css\n.order-tracking-search-title {\n  color: #your-color;\n  font-size: 32px;\n}\n\n.order-tracking-search-button {\n  background: #your-brand-color;\n}\n```\n\n## Browser Support\n\n- Chrome (latest)\n- Firefox (latest)\n- Safari (latest)\n- Edge (latest)\n- Mobile browsers\n\n## License\n\nMIT\n\n## Support\n\nFor issues and questions, please visit [GitHub Issues](https://github.com/bestvoy/order-tracking/issues)\n\n","readmeFilename":"README.md"}