{"id":34807640,"url":"https://github.com/xiaxiangfeng/vue-flip-clock","last_synced_at":"2026-05-22T18:31:21.308Z","repository":{"id":325918147,"uuid":"1104432777","full_name":"xiaxiangfeng/vue-flip-clock","owner":"xiaxiangfeng","description":"🤖 AI-Generated Vue 3 Flip Clock | 100% coded by AI - A showcase of AI's coding capabilities","archived":false,"fork":false,"pushed_at":"2025-11-27T06:29:07.000Z","size":64,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-11-27T19:46:50.211Z","etag":null,"topics":["clock","countdown","flip-clock","timer","vue","vue3"],"latest_commit_sha":null,"homepage":"","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xiaxiangfeng.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-11-26T07:54:42.000Z","updated_at":"2025-11-27T06:40:12.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/xiaxiangfeng/vue-flip-clock","commit_stats":null,"previous_names":["xiaxiangfeng/vue-flip-clock"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/xiaxiangfeng/vue-flip-clock","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaxiangfeng%2Fvue-flip-clock","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaxiangfeng%2Fvue-flip-clock/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaxiangfeng%2Fvue-flip-clock/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaxiangfeng%2Fvue-flip-clock/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xiaxiangfeng","download_url":"https://codeload.github.com/xiaxiangfeng/vue-flip-clock/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaxiangfeng%2Fvue-flip-clock/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28028885,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-12-25T02:00:05.988Z","response_time":58,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["clock","countdown","flip-clock","timer","vue","vue3"],"created_at":"2025-12-25T12:04:45.726Z","updated_at":"2025-12-25T12:05:16.340Z","avatar_url":"https://github.com/xiaxiangfeng.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 时钟、倒计时和计时器\n# Vue Flip Clock\n\nCheck out the [live demo](https://xiaxiangfeng.github.io/vue-flip-clock/) to see all modes in action.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://img.shields.io/npm/v/@xiaxiangfeng/vue-flip-clock.svg\" alt=\"npm version\"\u003e\n  \u003cimg src=\"https://img.shields.io/npm/l/@xiaxiangfeng/vue-flip-clock.svg\" alt=\"license\"\u003e\n  \u003cimg src=\"https://img.shields.io/npm/dm/@xiaxiangfeng/vue-flip-clock.svg\" alt=\"downloads\"\u003e\n\u003c/p\u003e\n\nA beautiful 3D flip clock component for Vue 3 with smooth animations and multiple modes.\n\n## ✨ Features\n\n- 🎯 **Three Modes**: Clock, Countdown, and Timer\n- 🎨 **Smooth 3D Animations**: Realistic flip card animations\n- 📦 **Lightweight**: Minimal dependencies\n- 🔧 **Easy to Use**: Simple API with Vue 3 Composition API\n- 💪 **TypeScript Support**: Full type hints via JSDoc\n- 🎭 **Customizable**: SCSS styling that can be themed\n\n## 📦 Installation\n\n```bash\nnpm install @xiaxiangfeng/vue-flip-clock\n```\n\nOr with yarn:\n\n```bash\nyarn add @xiaxiangfeng/vue-flip-clock\n```\n\nOr with pnpm:\n\n```bash\npnpm add @xiaxiangfeng/vue-flip-clock\n```\n\n## 🚀 Quick Start\n\n### Global Registration\n\n```javascript\nimport { createApp } from 'vue'\nimport VueFlipClock from '@xiaxiangfeng/vue-flip-clock'\nimport '@xiaxiangfeng/vue-flip-clock/dist/style.css'\n\nconst app = createApp(App)\napp.use(VueFlipClock)\napp.mount('#app')\n```\n\nThen use it in your template:\n\n```vue\n\u003ctemplate\u003e\n  \u003cFlipClock /\u003e\n\u003c/template\u003e\n```\n\n### Local Registration\n\n```vue\n\u003ctemplate\u003e\n  \u003cFlipClock mode=\"countdown\" :value=\"targetTime\" /\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nimport { FlipClock } from '@xiaxiangfeng/vue-flip-clock'\nimport '@xiaxiangfeng/vue-flip-clock/dist/style.css'\n\nconst targetTime = Date.now() + 60 * 60 * 1000 // 1 hour from now\n\u003c/script\u003e\n```\n\n## 📖 Usage Examples\n\n### Clock Mode (Default)\n\nDisplay current time:\n\n```vue\n\u003cFlipClock /\u003e\n```\n\n### Countdown Mode\n\nCountdown to a specific time:\n\n```vue\n\u003cscript setup\u003e\nimport { FlipClock } from '@xiaxiangfeng/vue-flip-clock'\n\n// Countdown to a specific date\nconst targetDate = new Date('2024-12-31T23:59:59').getTime()\n// Or countdown 1 hour from now\nconst oneHourLater = Date.now() + 60 * 60 * 1000\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cFlipClock mode=\"countdown\" :value=\"targetDate\" /\u003e\n\u003c/template\u003e\n```\n\n### Timer Mode\n\nCount up from a start time:\n\n```vue\n\u003cscript setup\u003e\nimport { FlipClock } from '@xiaxiangfeng/vue-flip-clock'\n\n// Timer started 5 minutes ago\nconst startTime = Date.now() - 5 * 60 * 1000\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cFlipClock mode=\"timer\" :value=\"startTime\" /\u003e\n\u003c/template\u003e\n```\n\n## 🔧 API\n\n### Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `mode` | `'clock' \\| 'countdown' \\| 'timer'` | `'clock'` | Display mode of the flip clock |\n| `value` | `Date \\| number` | `Date.now()` | Reference time (timestamp or Date object) |\n\n#### Mode Details\n\n- **clock**: Displays current time (HH:MM:SS). `value` prop is ignored.\n- **countdown**: Counts down to the target time specified in `value`. Stops at 00:00:00.\n- **timer**: Counts up from the start time specified in `value`.\n\n### Styling\n\nThe component uses SCSS for styling. You can customize the appearance by overriding CSS variables or classes:\n\n```css\n.flip-clock-wrapper {\n  /* Customize size */\n  --flip-width: 60px;\n  --flip-height: 90px;\n  --flip-font-size: 80px;\n}\n\n.flip-clock-wrapper .inn {\n  /* Customize colors */\n  background-color: #502d2d;\n  color: #ccc;\n}\n```\n\n## 🎨 Demo\n\nCheck out the [live demo](https://xiaxiangfeng.github.io/vue-flip-clock/) to see all modes in action.\n\n## 📋 Requirements\n\n- Vue 3.5.0 or higher\n\n## 🛠️ Development\n\n### Setup\n\n```bash\n# Clone the repository\ngit clone https://github.com/xiaxiangfeng/vue-flip-clock.git\ncd vue-flip-clock\n\n# Install dependencies\nnpm install\n\n# Start dev server for demo\nnpm run dev\n\n# Build library\nnpm run build\n\n# Build demo\nnpm run build:demo\n```\n\n### Project Structure\n\n```\nvue-flip-clock/\n├── lib/              # Component library source\n│   ├── FlipClock.vue\n│   ├── components/\n│   └── index.js\n├── demo/             # Demo application\n│   ├── App.vue\n│   └── main.js\n├── dist/             # Build output (library)\n└── dist-demo/        # Build output (demo)\n```\n\n## 🤝 Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m 'Add some amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n## 📄 License\n\n[MIT](LICENSE) © Your Name\n\n## 🙏 Acknowledgments\n\n- Inspired by classic flip clocks\n- Built with Vue 3 and Vite\n\n---\n\n**Note**: Replace `xiaxiangfeng` in URLs with your actual GitHub username before publishing.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxiaxiangfeng%2Fvue-flip-clock","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxiaxiangfeng%2Fvue-flip-clock","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxiaxiangfeng%2Fvue-flip-clock/lists"}