renusify 2.5.1 → 3.0.0

package/directive/parallax/index.js

@@ -1,4 +1,82 @@
 //https://github.com/gerasimvol/vue-prlx
+/**
+ * @example // v-parallax usage
+ * <template>
+ *   <div class="parallax-container">
+ *
+ *     <div class="scroll-content">
+ *       <div class="placeholder" style="height: 100vh"></div>
+ *
+ *       <div
+ *         v-parallax="{ speed: 0.3 }"
+ *         class="parallax-box box1"
+ *       >
+ *         <h2>Default Parallax</h2>
+ *         <p>Speed: 0.3, Direction: Y</p>
+ *       </div>
+ *
+ *
+ *     </div>
+ *
+ *   </div>
+ * </template>
+ *
+ * <script>
+ *
+ * </script>
+ *
+ * <style>
+ *
+ * .scroll-content {
+ *   position: relative;
+ *   background: #f0f2f5;
+ * }
+ *
+ * .placeholder {
+ *   background: linear-gradient(90deg, #e0e0e0 25%, #d0d0d0 50%, #e0e0e0 75%);
+ *   background-size: 200% 100%;
+ *   animation: loading 2s infinite;
+ *   border-radius: 4px;
+ *   margin: 10px 0;
+ * }
+ *
+ * @keyframes loading {
+ *   0% { background-position: 200% 0; }
+ *   100% { background-position: -200% 0; }
+ * }
+ *
+ * .parallax-box {
+ *   width: 80%;
+ *   max-width: 600px;
+ *   height: 300px;
+ *   margin: 0 auto 40px;
+ *   border-radius: 12px;
+ *   display: flex;
+ *   flex-direction: column;
+ *   justify-content: center;
+ *   align-items: center;
+ *   text-align: center;
+ *   padding: 30px;
+ *   color: white;
+ *   box-shadow: 0 10px 30px rgba(0,0,0,0.15);
+ *   overflow: hidden;
+ * }
+ *
+ * .parallax-box h2 {
+ *   font-size: 2rem;
+ *   margin-bottom: 10px;
+ * }
+ *
+ * .parallax-box p {
+ *   font-size: 1rem;
+ *   opacity: 0.9;
+ * }
+ *
+ * .box1 {
+ *   background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
+ * }
+ * </style>
+ * */
 function mounted (el, { modifiers = {}, value = {} }) {
   // SETUP SETTING
   const settings = {

package/directive/ripple/index.js

@@ -1,6 +1,20 @@
 // MIT License https://github.com/vuetifyjs/vuetify
 import './style.scss'
 
+/**
+ * @example // v-ripple usage
+ * <template>
+ *     <div class="text-center">
+ *         <span v-ripple class="mt-12 pa-12 rippl br-md cursor-pointer">click me</span>
+ *     </div>
+ * </template>
+ * <style>
+ *     .rippl{
+ *             background-color: var(--color-sheet-container-low);
+ *     color: var(--color-on-sheet);
+ *     }
+ *     </style>
+ * */
 function transform (el, value) {
   el.style.transform = value
   el.style.webkitTransform = value

package/directive/scroll/index.js

@@ -1,3 +1,247 @@
+/**
+ * @example // v-scroll usage
+ * <template>
+ *   <div class="scroll-container">
+ *     <div class="scroll-areas">
+ *       <div class="scroll-area">
+ *         <h3>Window Scroll</h3>
+ *         <div v-scroll.window="handleWindowScroll" class="scroll-content window-scroll">
+ *           <div class="scroll-info">
+ *             <div class="info-item">
+ *               <span>Scroll Top:</span>
+ *               <span class="value">{{ windowScrollTop }}px</span>
+ *             </div>
+ *             <div class="info-item">
+ *               <span>Scroll %:</span>
+ *               <span class="value">{{ windowScrollPercent }}%</span>
+ *             </div>
+ *             <div class="info-item">
+ *               <span>Events:</span>
+ *               <span class="value counter">{{ windowScrollCount }}</span>
+ *             </div>
+ *           </div>
+ *           <div class="scroll-indicator">
+ *             <div class="indicator-bar" :style="{ height: windowScrollPercent + '%' }"></div>
+ *           </div>
+ *         </div>
+ *       </div>
+ *
+ *       <div class="scroll-area">
+ *         <h3>Element Scroll</h3>
+ *         <div ref="elementScroll" v-scroll="handleElementScroll" class="scroll-content element-scroll">
+ *           <div class="scroll-info">
+ *             <div class="info-item">
+ *               <span>Scroll Top:</span>
+ *               <span class="value">{{ elementScrollTop }}px</span>
+ *             </div>
+ *             <div class="info-item">
+ *               <span>Direction:</span>
+ *               <span class="value direction" :class="elementScrollDirection">
+ *                 {{ elementScrollDirection }}
+ *               </span>
+ *             </div>
+ *             <div class="info-item">
+ *               <span>Events:</span>
+ *               <span class="value counter">{{ elementScrollCount }}</span>
+ *             </div>
+ *           </div>
+ *           <div class="scroll-content-placeholder">
+ *             <div v-for="n in 10" :key="n" class="content-item">
+ *               Item {{ n }}
+ *             </div>
+ *           </div>
+ *         </div>
+ *       </div>
+ *     </div>
+ *   </div>
+ * </template>
+ *
+ * <script>
+ * import { ref, computed } from 'vue'
+ *
+ * const windowScrollTop = ref(0)
+ * const windowScrollCount = ref(0)
+ * const elementScrollTop = ref(0)
+ * const elementScrollCount = ref(0)
+ * const elementScrollDirection = ref('none')
+ * const targetScrollTop = ref(0)
+ * const lastElementScroll = ref(0)
+ *
+ * const elementScroll = ref(null)
+ * const targetElement = ref(null)
+ *
+ * const windowScrollPercent = computed(() => {
+ *   const docHeight = document.documentElement.scrollHeight - window.innerHeight
+ *   return docHeight > 0 ? Math.round((windowScrollTop.value / docHeight) * 100) : 0
+ * })
+ *
+ * const handleWindowScroll = () => {
+ *   windowScrollTop.value = window.pageYOffset || document.documentElement.scrollTop
+ *   windowScrollCount.value++
+ * }
+ *
+ * const handleElementScroll = (event) => {
+ *   elementScrollTop.value = event.target.scrollTop
+ *   elementScrollCount.value++
+ *
+ *   if (lastElementScroll.value < elementScrollTop.value) {
+ *     elementScrollDirection.value = 'down'
+ *   } else if (lastElementScroll.value > elementScrollTop.value) {
+ *     elementScrollDirection.value = 'up'
+ *   }
+ *   lastElementScroll.value = elementScrollTop.value
+ * }
+ * <//script>
+ *
+ * <style>
+ *     body{height:200vh}
+ * .scroll-container {
+ *   font-family: Arial, sans-serif;
+ *   padding: 20px;
+ *   max-width: 1200px;
+ *   margin: 0 auto;
+ * }
+ *
+ * .scroll-areas {
+ *   display: grid;
+ *   grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+ *   gap: 25px;
+ * }
+ *
+ * .scroll-area {
+ *   background: white;
+ *   border-radius: 12px;
+ *   padding: 20px;
+ *   box-shadow: 0 4px 20px rgba(0,0,0,0.1);
+ * }
+ *
+ * .scroll-area h3 {
+ *   margin-top: 0;
+ *   color: #667eea;
+ *   font-size: 1.3rem;
+ *   margin-bottom: 15px;
+ * }
+ *
+ * .scroll-content {
+ *   height: 250px;
+ *   overflow-y: auto;
+ *   border: 2px solid #e9ecef;
+ *   border-radius: 8px;
+ *   padding: 15px;
+ *   position: relative;
+ * }
+ *
+ * .window-scroll {
+ *   background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+ * }
+ *
+ * .element-scroll {
+ *   background: linear-gradient(135deg, #f0f4ff 0%, #e6e9ff 100%);
+ * }
+ *
+ * .scroll-info {
+ *   position: sticky;
+ *   top: 0;
+ *   background: white;
+ *   padding: 10px;
+ *   border-radius: 6px;
+ *   margin-bottom: 15px;
+ *   box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+ *   z-index: 1;
+ * }
+ *
+ * .info-item {
+ *   display: flex;
+ *   justify-content: space-between;
+ *   align-items: center;
+ *   margin-bottom: 8px;
+ *   padding: 6px 0;
+ *   border-bottom: 1px solid #eee;
+ * }
+ *
+ * .info-item:last-child {
+ *   margin-bottom: 0;
+ *   border-bottom: none;
+ * }
+ *
+ * .info-item span:first-child {
+ *   color: #555;
+ *   font-weight: bold;
+ * }
+ *
+ * .value {
+ *   font-family: monospace;
+ *   font-weight: bold;
+ *   padding: 4px 10px;
+ *   border-radius: 4px;
+ *   background: #f8f9fa;
+ *   min-width: 70px;
+ *   text-align: center;
+ * }
+ *
+ * .counter {
+ *   background: #667eea !important;
+ *   color: white !important;
+ * }
+ *
+ * .direction {
+ *   background: #ff6b6b !important;
+ *   color: white !important;
+ * }
+ *
+ * .direction.up {
+ *   background: #4ecdc4 !important;
+ * }
+ *
+ * .direction.down {
+ *   background: #ffa726 !important;
+ * }
+ *
+ * .scroll-indicator {
+ *   position: absolute;
+ *   right: 20px;
+ *   top: 100px;
+ *   width: 10px;
+ *   height: 100px;
+ *   background: #e9ecef;
+ *   border-radius: 5px;
+ *   overflow: hidden;
+ * }
+ *
+ * .indicator-bar {
+ *   position: absolute;
+ *   bottom: 0;
+ *   width: 100%;
+ *   background: linear-gradient(to top, #667eea, #764ba2);
+ *   border-radius: 5px;
+ *   transition: height 0.1s;
+ * }
+ *
+ * .scroll-content-placeholder {
+ *   padding: 20px;
+ * }
+ *
+ * .content-item {
+ *   padding: 15px;
+ *   margin: 10px 0;
+ *   background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
+ *   color: white;
+ *   border-radius: 6px;
+ *   text-align: center;
+ *   font-weight: bold;
+ *   box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+ * }
+ *
+ *
+ * .monitoring-panel {
+ *   background: rgba(102, 126, 234, 0.1);
+ *   border: 2px dashed #667eea;
+ *   border-radius: 8px;
+ *   padding: 15px;
+ *   color: #667eea;
+ * }
+ * </style>
+ * */
 function mounted (el, binding) {
   const callback = binding.value
   const options = binding.options || {

package/directive/sortable/index.js

@@ -1,6 +1,280 @@
 import './style.scss'
 import {cleanArray, ifHas} from '../../tools/helper.js'
 
+/**
+ * @example // v-sortable usage
+ *
+ * <template>
+ *   <div class="sortable-container">
+ *     <div class="sortable-lists">
+ *       <div class="sortable-list">
+ *         <h3>Task List</h3>
+ *         <div v-sortable="{ items: tasks, end: onTaskReorder }" class="sortable-area">
+ *           <div v-for="task in tasks" :key="task.id" class="sortable-item">
+ *             <div class="task-content">
+ *               <div class="task-icon">📋</div>
+ *               <div class="task-info">
+ *                 <div class="task-title">{{ task.title }}</div>
+ *                 <div class="task-desc">{{ task.description }}</div>
+ *               </div>
+ *             </div>
+ *             <div class="task-drag-handle">
+ *               ⋮⋮
+ *             </div>
+ *           </div>
+ *         </div>
+ *       </div>
+ *
+ *
+ *     <div class="sortable-info">
+ *       <div class="info-item">
+ *         <span>Task Order:</span>
+ *         <span class="order-value">{{ taskOrder }}</span>
+ *       </div>
+ *     </div>
+ *   </div>
+ * </template>
+ *
+ * <script>
+ * import { ref, computed } from 'vue'
+ *
+ * const tasks = ref([
+ *   { id: 1, title: 'Design Homepage', description: 'Create wireframes and mockups' },
+ *   { id: 2, title: 'Implement Login', description: 'Build authentication system' },
+ *   { id: 3, title: 'Write Documentation', description: 'Document API endpoints' },
+ *   { id: 4, title: 'Fix Mobile Bugs', description: 'Resolve responsive issues' },
+ *   { id: 5, title: 'Add Analytics', description: 'Integrate tracking tools' }
+ * ])
+ *
+ * const taskOrder = computed(() => tasks.value.map(t => t.id).join(', '))
+ *
+ * const onTaskReorder = (newOrder) => {
+ *  console.log(newOrder)
+ * }
+ *
+ * const onDragStart = () => {
+ *   console.log('Drag started')
+ * }
+ *
+ * <//script>
+ *
+ * <style>
+ * .sortable-container {
+ *   font-family: Arial, sans-serif;
+ *   padding: 20px;
+ *   max-width: 1400px;
+ *   margin: 0 auto;
+ * }
+ *
+ * .sortable-lists {
+ *   display: grid;
+ *   grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+ *   gap: 30px;
+ *   margin-bottom: 30px;
+ * }
+ *
+ * .sortable-list {
+ *   background: white;
+ *   border-radius: 12px;
+ *   padding: 25px;
+ *   box-shadow: 0 4px 20px rgba(0,0,0,0.1);
+ * }
+ *
+ * .sortable-list h3 {
+ *   margin-top: 0;
+ *   color: #667eea;
+ *   font-size: 1.4rem;
+ *   margin-bottom: 20px;
+ *   text-align: center;
+ * }
+ *
+ * .sortable-area {
+ *   min-height: 400px;
+ *   border: 2px dashed #e9ecef;
+ *   border-radius: 8px;
+ *   padding: 10px;
+ * }
+ *
+ * .sortable-item {
+ *   background: white;
+ *   border: 2px solid #dee2e6;
+ *   border-radius: 8px;
+ *   padding: 15px;
+ *   margin-bottom: 10px;
+ *   display: flex;
+ *   align-items: center;
+ *   justify-content: space-between;
+ *   cursor: move;
+ *   user-select: none;
+ *   transition: all 0.3s;
+ *   position: relative;
+ * }
+ *
+ * .sortable-item:hover {
+ *   border-color: #667eea;
+ *   box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
+ * }
+ *
+ * .sortable-item.on-drag {
+ *   position: absolute;
+ *   z-index: 1000;
+ *   opacity: 0.9;
+ *   transform: scale(1.05);
+ *   box-shadow: 0 10px 30px rgba(0,0,0,0.3);
+ * }
+ *
+ * .task-content {
+ *   display: flex;
+ *   align-items: center;
+ *   gap: 15px;
+ *   flex: 1;
+ * }
+ *
+ * .task-icon {
+ *   font-size: 1.5rem;
+ * }
+ *
+ * .task-info {
+ *   flex: 1;
+ * }
+ *
+ * .task-title {
+ *   font-weight: bold;
+ *   color: #333;
+ *   margin-bottom: 4px;
+ * }
+ *
+ * .task-desc {
+ *   color: #666;
+ *   font-size: 0.9rem;
+ * }
+ *
+ * .task-drag-handle {
+ *   color: #adb5bd;
+ *   font-size: 1.2rem;
+ *   padding: 0 10px;
+ *   cursor: grab;
+ *   user-select: none;
+ * }
+ *
+ * .image-item {
+ *   flex-direction: column;
+ *   align-items: stretch;
+ *   gap: 15px;
+ * }
+ *
+ * .image-content {
+ *   display: flex;
+ *   align-items: center;
+ *   gap: 15px;
+ * }
+ *
+ * .image-preview {
+ *   width: 60px;
+ *   height: 60px;
+ *   border-radius: 6px;
+ *   object-fit: cover;
+ * }
+ *
+ * .image-info {
+ *   flex: 1;
+ * }
+ *
+ * .image-title {
+ *   font-weight: bold;
+ *   color: #333;
+ *   margin-bottom: 4px;
+ * }
+ *
+ * .image-size {
+ *   color: #666;
+ *   font-size: 0.9rem;
+ * }
+ *
+ * .image-drag {
+ *   align-self: flex-end;
+ *   color: #adb5bd;
+ *   font-size: 1.2rem;
+ *   padding: 5px 10px;
+ *   background: #f8f9fa;
+ *   border-radius: 4px;
+ *   cursor: grab;
+ *   user-select: none;
+ * }
+ *
+ * .user-content {
+ *   display: flex;
+ *   align-items: center;
+ *   gap: 15px;
+ *   flex: 1;
+ * }
+ *
+ * .user-avatar {
+ *   width: 50px;
+ *   height: 50px;
+ *   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ *   color: white;
+ *   border-radius: 50%;
+ *   display: flex;
+ *   align-items: center;
+ *   justify-content: center;
+ *   font-weight: bold;
+ *   font-size: 1.2rem;
+ * }
+ *
+ * .user-info {
+ *   flex: 1;
+ * }
+ *
+ * .user-name {
+ *   font-weight: bold;
+ *   color: #333;
+ *   margin-bottom: 4px;
+ * }
+ *
+ * .user-email {
+ *   color: #666;
+ *   font-size: 0.9rem;
+ * }
+ *
+ * .sortable-info {
+ *   background: white;
+ *   border-radius: 12px;
+ *   padding: 25px;
+ *   box-shadow: 0 4px 20px rgba(0,0,0,0.1);
+ * }
+ *
+ * .sortable-info .info-item {
+ *   display: flex;
+ *   justify-content: space-between;
+ *   align-items: center;
+ *   padding: 12px;
+ *   margin-bottom: 10px;
+ *   background: #f8f9fa;
+ *   border-radius: 8px;
+ *   border-left: 4px solid #667eea;
+ * }
+ *
+ * .sortable-info .info-item:last-child {
+ *   margin-bottom: 0;
+ * }
+ *
+ * .sortable-info .info-item span:first-child {
+ *   font-weight: bold;
+ *   color: #555;
+ * }
+ *
+ * .order-value {
+ *   font-family: monospace;
+ *   font-weight: bold;
+ *   background: #e9ecef;
+ *   padding: 6px 12px;
+ *   border-radius: 4px;
+ *   min-width: 150px;
+ *   text-align: center;
+ * }
+ * </style>
+ * */
 let scopeObj;
 
 function defineScope(elementArray) {

package/directive/title/index.js

@@ -1,5 +1,80 @@
 import './style.scss'
 
+/**
+ * @example // v-title usage
+ * <template>
+ *     <div class="tooltip-section">
+ *         <h2>Top Tooltips</h2>
+ *         <div class="d-flex h-space-around">
+ *           <button v-title.top="'This is a top tooltip'" class="tooltip-btn btn-primary">
+ *             Top Tooltip
+ *           </button>
+ *
+ *           <div v-title.top="'Save your changes'" class="tooltip-icon">
+ *             💾
+ *           </div>
+ *
+ *           <a v-title.top="'Visit our documentation'" href="#" class="tooltip-link">
+ *             Documentation
+ *           </a>
+ *         </div>
+ *       </div>
+ *
+ *       <!-- Bottom Tooltips -->
+ *       <div class="tooltip-section">
+ *         <h2>Bottom Tooltips</h2>
+ *         <div class="d-flex h-space-around">
+ *           <button v-title.bottom="'Click to download file'" class="tooltip-btn btn-success">
+ *             Download
+ *           </button>
+ *
+ *           <div v-title.bottom="'Delete this item'" class="tooltip-icon">
+ *             🗑️
+ *           </div>
+ *
+ *           <a v-title.bottom="'Contact support team'" href="#" class="tooltip-link">
+ *             Support
+ *           </a>
+ *         </div>
+ *       </div>
+ *
+ *       <!-- Left Tooltips -->
+ *       <div class="tooltip-section">
+ *         <h2>Left Tooltips</h2>
+ *         <div class="d-flex h-space-around">
+ *           <button v-title.left="'Previous page'" class="tooltip-btn btn-info">
+ *             ← Back
+ *           </button>
+ *
+ *           <div v-title.left="'User settings'" class="tooltip-icon">
+ *             ⚙️
+ *           </div>
+ *
+ *           <a v-title.left="'View your profile'" href="#" class="tooltip-link">
+ *             Profile
+ *           </a>
+ *         </div>
+ *       </div>
+ *
+ *       <!-- Right Tooltips -->
+ *       <div class="tooltip-section">
+ *         <h2>Right Tooltips</h2>
+ *         <div class="d-flex h-space-around">
+ *           <button v-title.right="'Next page'" class="tooltip-btn btn-warning">
+ *             Next →
+ *           </button>
+ *
+ *           <div v-title.right="'Open notifications'" class="tooltip-icon">
+ *             🔔
+ *           </div>
+ *
+ *           <a v-title.right="'Go to home page'" href="#" class="tooltip-link">
+ *             Home
+ *           </a>
+ *         </div>
+ *       </div>
+ * </template>
+ * */
 function mousestart(el, binding) {
     let d = 'top'