# TT-Core Component Library (Vue 3) Modern, reusable Vue 3 components and utilities for TheTool applications. Built with the Composition API and designed for maximum performance and developer experience. **Version:** 2.0.0 (Vue 3) ## 📦 What's Included ### Components #### Data Display - **``** - Enhanced data table with loading states, skeletons, and placeholders - **``** - Smart online/offline status chip with lazy loading and IP copy #### Feedback - **``** - Processing indicator with animated progress bar - **``** - Skeleton loader for loading states #### Forms - **``** - Advanced autocomplete with mode switching (XINON/ESTMK) - **``** - Drag & drop file upload component #### Overlays - **``** - Modern modal dialog with portal rendering #### Navigation - **``** - Tab-based view switching with mobile support ### Utilities Available globally via `window.TT_CORE`: ```javascript // Clipboard TT_CORE.copyToClipboard(text) // Formatting TT_CORE.formatBytes(bytes, decimals) TT_CORE.formatDuration(seconds) TT_CORE.formatNumber(num, decimals, decimalSep, thousandsSep) TT_CORE.formatBits(bps) // Validation TT_CORE.calculateSimilarity(str1, str2) TT_CORE.validateData(street, zip, city, info, threshold) TT_CORE.validateEmail(email) TT_CORE.generatePassword(length) // Script Loading TT_CORE.loadScript(src) TT_CORE.loadScripts([src1, src2, ...]) ``` ### Composables (Vue 3 Composition API) ```javascript // Use in setup() function with Composition API import { useIntersectionObserver, useInfiniteScroll, useAsyncData } from 'window.TT_CORE'; // Intersection Observer const { targetRef } = TT_CORE.useIntersectionObserver((entry) => { console.log('Element is visible!', entry); }, { threshold: 0.1 }); // Infinite Scroll const items = ref([...]); const { sentinelRef, visibleItems, loadMore } = TT_CORE.useInfiniteScroll(items, { initialCount: 50, incrementBy: 50 }); // Async Data Fetching const { data, isLoading, hasError, fetchData } = TT_CORE.useAsyncData(); await fetchData('/api/users'); ``` ### Mixins (Options API - Backward Compatibility) ```javascript // Use with Options API (if not using Composition API) export default { mixins: [ TT_CORE.createIntersectionObserverMixin({ threshold: 0.1 }), TT_CORE.createInfiniteScrollMixin({ initialCount: 50 }), TT_CORE.createAsyncDataMixin() ] } ``` ## 🚀 Quick Start with Vue 3 CDN ### 1. Include Vue 3 and TT-Core ```html

``` ## 📘 Component Usage Examples ### Data Table ```vue ``` ### Smart Autocomplete (v-model support) ```vue ``` ### File Dropzone ```vue ``` ### Dialog/Modal ```vue ``` ### View Switcher (v-model support) ```vue ``` ## 🎯 Using Composables in Your Components ### Intersection Observer ```vue ``` ### Infinite Scroll ```vue ``` ### Async Data Fetching ```vue ``` ## 🔧 Options API (Traditional Vue Syntax) If you prefer the Options API over Composition API: ```vue ``` ## 📝 Migration from Vue 2 ### Key Changes 1. **Component Registration:** - Vue 2: Components auto-register globally via `Vue.component()` - Vue 3: Must call `TT_CORE.registerComponents(app)` after creating your app 2. **v-model:** - Vue 2: `v-model` → `value` prop + `input` event - Vue 3: `v-model` → `modelValue` prop + `update:modelValue` event 3. **Lifecycle Hooks:** - `beforeDestroy` → `beforeUnmount` - `destroyed` → `unmounted` 4. **Composables:** - Vue 2: Use mixins with `createXxxMixin()` - Vue 3: Use composables with `useXxx()` in `setup()` ### Update Your Code: ```javascript // Vue 2 const app = new Vue({ el: '#app', data: { ... } }); // Vue 3 const { createApp } = Vue; const app = createApp({ setup() { // Composition API } }); TT_CORE.registerComponents(app); // ← REQUIRED! app.mount('#app'); ``` ## 🎨 Styling All components use the `.tt-scope` class for scoping. Customize via CSS variables: ```css :root { --tt-brand-blue: #005384; --tt-accent: #005384; --tt-accent-2: #1e88c9; --tt-ok: #0f9d58; --tt-bad: #e03131; --tt-border: #e6e9ef; --tt-radius: 10px; --tt-shadow: 0 8px 24px rgba(0, 83, 132, .08); } ``` ## 📁 Directory Structure ``` tt-core/ ├── index.js # Main entry point (Vue 3) ├── README.md # This file ├── MIGRATION_GUIDE.md # Detailed migration guide ├── SUMMARY.md # Project summary ├── utils/ # Utility functions │ ├── clipboard.js │ ├── formatting.js │ ├── validation.js │ └── script-loader.js ├── components/ # Vue 3 components │ ├── data-display/ │ │ ├── TtDataTable.js │ │ └── TtStatusChip.js │ ├── feedback/ │ │ ├── TtLoadingIndicator.js │ │ └── TtSkeleton.js │ ├── forms/ │ │ ├── TtSmartAutocomplete.js │ │ └── TtFileDropzone.js │ ├── overlays/ │ │ └── TtDialog.js │ └── navigation/ │ └── TtViewSwitcher.js ├── composables/ # Vue 3 composables + mixins │ ├── useIntersectionObserver.js │ ├── useInfiniteScroll.js │ └── useAsyncData.js └── styles/ # CSS styles └── tt-core.css ``` ## 🚀 Performance Tips 1. **Lazy Load Components:** Only load components you need 2. **Use Composition API:** Better tree-shaking and performance 3. **Leverage Composables:** Reuse logic across components 4. **CSS Variables:** Fast theme changes without re-rendering ## 🐛 Troubleshooting ### Components not rendering? Make sure you called `TT_CORE.registerComponents(app)` after creating your Vue app! ```javascript const app = createApp({...}); TT_CORE.registerComponents(app); // ← Don't forget! app.mount('#app'); ``` ### v-model not working? Vue 3 uses `modelValue` instead of `value`. TT-Core components support both automatically. ### Composables not working? Make sure you're using them inside `setup()` or ` ``` ## 📚 Additional Resources - [Vue 3 Documentation](https://vuejs.org/) - [Composition API Guide](https://vuejs.org/guide/extras/composition-api-faq.html) - [Migration from Vue 2](https://v3-migration.vuejs.org/) ## 📝 License Internal use only - TheTool Development Team --- **Version:** 2.0.0 (Vue 3) **Last Updated:** December 2024