renusify 2.5.1 → 3.0.0

package/directive/animate/index.js

@@ -1,5 +1,82 @@
 import 'renusify/directive/animate/style.scss'
 
+/**
+ * @example // v-animate usage
+ * <template>
+ *   <div class="container">
+ *     <h1>Scroll to see animations</h1>
+ *
+ *     <div v-animate="{ name: 'fade-up', duration: 0.5 }" class="box">
+ *       Fade Up
+ *     </div>
+ *
+ *     <div v-animate="{ name: 'scaleIn', duration: 0.7, delay: 100 }" class="box">
+ *       Scale In
+ *     </div>
+ *
+ *     <div v-animate.once="{ name: 'right', duration: 0.6, threshold: 0.2 }" class="box">
+ *       Right (once)
+ *     </div>
+ *
+ *     <div v-animate="{ name: 'flipLeft', duration: 1, timing: 'ease-in-out' }" class="box">
+ *       Flip Left
+ *     </div>
+ *
+ *     <div v-animate="{ name: 'down', duration: 0.4 }" class="box">
+ *       Down
+ *     </div>
+ *
+ *     <div v-animate="{ name: 'left-fade', duration: 0.8 }" class="box">
+ *       Left Fade
+ *     </div>
+ *
+ *     <div v-animate="{ name: 'scaleOut', duration: 0.9, delay: 200 }" class="box">
+ *       Scale Out
+ *     </div>
+ *
+ *     <div v-animate.once="{ name: 'flipUp', duration: 1.2, threshold: 0.3 }" class="box">
+ *       Flip Up (once)
+ *     </div>
+ *
+ *     <div v-animate="{ name: 'up', duration: 0.5 }" class="box">
+ *       Up
+ *     </div>
+ *
+ *     <div v-animate="{ name: 'flipRight', duration: 1 }" class="box">
+ *       Flip Right
+ *     </div>
+ *   </div>
+ * </template>
+ *
+ *
+ * <style>
+ * .container {
+ *   padding: 2rem;
+ *   min-height: 200vh;
+ * }
+ *
+ * h1 {
+ *   text-align: center;
+ *   margin-bottom: 3rem;
+ *   font-size: 2.5rem;
+ * }
+ *
+ * .box {
+ *   width: 300px;
+ *   height: 150px;
+ *   margin: 2rem auto;
+ *   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ *   color: white;
+ *   display: flex;
+ *   align-items: center;
+ *   justify-content: center;
+ *   font-size: 1.5rem;
+ *   font-weight: bold;
+ *   border-radius: 12px;
+ *   box-shadow: 0 10px 20px rgba(0,0,0,0.1);
+ * }
+ * </style>
+ * */
 function mounted(el, binding) {
     const modifiers = binding.modifiers || {}
     const value = binding.value

package/directive/clickOutSide/index.js

@@ -1,3 +1,101 @@
+/**
+ * @example // v-click-outside usage
+ * <template>
+ *   <div>
+ *     <div class="dropdown-container">
+ *       <button @click="toggleDropdown">
+ *         {{ selectedOption || 'Select an option' }}
+ *       </button>
+ *
+ *       <div v-if="isOpen" v-click-outside="closeDropdown" class="dropdown-menu">
+ *         <div
+ *           v-for="option in options"
+ *           :key="option"
+ *           @click="selectOption(option)"
+ *           class="dropdown-item"
+ *         >
+ *           {{ option }}
+ *         </div>
+ *       </div>
+ *     </div>
+ *   </div>
+ * </template>
+ *
+ * <script>
+ * import { ref } from 'vue'
+ *
+ * const isOpen = ref(false)
+ * const selectedOption = ref('')
+ * const isModalOpen = ref(false)
+ *
+ * const options = ['Option 1', 'Option 2', 'Option 3', 'Option 4']
+ *
+ * const toggleDropdown = () => {
+ *   isOpen.value = !isOpen.value
+ * }
+ *
+ * const closeDropdown = () => {
+ *   isOpen.value = false
+ * }
+ *
+ * const selectOption = (option) => {
+ *   selectedOption.value = option
+ *   isOpen.value = false
+ * }
+ *
+ * const onClickOutside = () => {
+ *   console.log('Clicked outside the box')
+ * }
+ *
+ * const handleOutsideClick = () => {
+ *   isModalOpen.value = false
+ * }
+ *
+ * const toggleModal = () => {
+ *   isModalOpen.value = !isModalOpen.value
+ * }
+ * <//script>
+ *
+ * <style>
+ * .dropdown-container {
+ *   position: relative;
+ *   display: inline-block;
+ *   margin: 2rem;
+ * }
+ *
+ * .dropdown-container button {
+ *   padding: 0.5rem 1rem;
+ *   background: #007bff;
+ *   color: white;
+ *   border: none;
+ *   border-radius: 4px;
+ *   cursor: pointer;
+ * }
+ *
+ * .dropdown-menu {
+ *   position: absolute;
+ *   top: 100%;
+ *   left: 0;
+ *   background: white;
+ *   border: 1px solid #ddd;
+ *   border-radius: 4px;
+ *   box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+ *   z-index: 1000;
+ *   margin-top: 0.5rem;
+ *   min-width: 200px;
+ * }
+ *
+ * .dropdown-item {
+ *   padding: 0.75rem 1rem;
+ *   cursor: pointer;
+ * }
+ *
+ * .dropdown-item:hover {
+ *   background: #f5f5f5;
+ * }
+ *
+ * </style>
+ * */
 const IS_TOUCH =
   typeof window !== 'undefined' &&
   ('ontouchstart' in window ||

package/directive/drag/index.js

@@ -1,5 +1,158 @@
 import {ifHas} from '../../tools/helper.js'
 
+/**
+ * @example // v-drag usage
+ * <template>
+ *   <div class="drag-container">
+ *     <h2>Draggable Elements</h2>
+ *
+ *     <div
+ *       v-drag="{
+ *         start: onDragStart,
+ *         move: onDragMove,
+ *         end: onDragEnd
+ *       }"
+ *       class="draggable-box box1"
+ *       :style="{ top: box1Top + 'px', left: box1Left + 'px' }"
+ *     >
+ *       Box 1<br>
+ *       X: {{ box1Left }}<br>
+ *       Y: {{ box1Top }}
+ *     </div>
+ *
+ *
+ *     <div class="info-panel">
+ *       <div class="info-item">
+ *         <strong>Active Box:</strong> {{ activeBox }}
+ *       </div>
+ *       <div class="info-item">
+ *         <strong>Total Distance:</strong> {{ totalDistance }}px
+ *       </div>
+ *       <button @click="resetPositions" class="reset-btn">
+ *         Reset Positions
+ *       </button>
+ *     </div>
+ *   </div>
+ * </template>
+ *
+ * <script>
+ * import { ref } from 'vue'
+ *
+ * const box1Top = ref(50)
+ * const box1Left = ref(50)
+ *
+ * const activeBox = ref('None')
+ * const totalDistance = ref(0)
+ *
+ * const onDragStart = (data) => {
+ *   activeBox.value = 'Box 1'
+ *   console.log('Box 1 drag started:', data)
+ * }
+ *
+ * const onDragMove = (data) => {
+ *   box1Top.value = data.top
+ *   box1Left.value = data.left
+ *
+ *   const dx = data.endX - data.startX
+ *   const dy = data.endY - data.startY
+ *   totalDistance.value = Math.sqrt(dx * dx + dy * dy).toFixed(2)
+ * }
+ *
+ * const onDragEnd = (data) => {
+ *   console.log('Box 1 drag ended:', data)
+ *   activeBox.value = 'None'
+ * }
+ *
+ *
+ *
+ * const resetPositions = () => {
+ *   box1Top.value = 50
+ *   box1Left.value = 50
+ *   totalDistance.value = 0
+ *   activeBox.value = 'None'
+ * }
+ * <//script>
+ *
+ * <style>
+ * .drag-container {
+ *   position: relative;
+ *   width: 100%;
+ *   height: 600px;
+ *   border: 2px solid #333;
+ *   border-radius: 8px;
+ *   padding: 20px;
+ *   background: #f8f9fa;
+ * }
+ *
+ * h2 {
+ *   text-align: center;
+ *   margin-bottom: 30px;
+ *   color: #333;
+ * }
+ *
+ * .draggable-box {
+ *   position: absolute;
+ *   width: 120px;
+ *   height: 120px;
+ *   border-radius: 8px;
+ *   cursor: move;
+ *   user-select: none;
+ *   display: flex;
+ *   align-items: center;
+ *   justify-content: center;
+ *   text-align: center;
+ *   font-size: 14px;
+ *   font-weight: bold;
+ *   box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+ *   transition: box-shadow 0.3s;
+ * }
+ *
+ * .draggable-box:hover {
+ *   box-shadow: 0 6px 16px rgba(0,0,0,0.2);
+ * }
+ *
+ * .box1 {
+ *   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ *   color: white;
+ * }
+ *
+ *
+ * .info-panel {
+ *   position: absolute;
+ *   bottom: 20px;
+ *   left: 20px;
+ *   background: white;
+ *   padding: 15px;
+ *   border-radius: 8px;
+ *   box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+ *   min-width: 200px;
+ * }
+ *
+ * .info-item {
+ *   margin-bottom: 10px;
+ *   padding: 8px;
+ *   background: #f8f9fa;
+ *   border-radius: 4px;
+ * }
+ *
+ * .reset-btn {
+ *   width: 100%;
+ *   padding: 10px;
+ *   background: #dc3545;
+ *   color: white;
+ *   border: none;
+ *   border-radius: 4px;
+ *   cursor: pointer;
+ *   font-weight: bold;
+ *   transition: background 0.3s;
+ * }
+ *
+ * .reset-btn:hover {
+ *   background: #c82333;
+ * }
+ * </style>
+ * */
+
 let wrapper = {}
 let current=null
 function mousestart(e,uid) {

package/directive/index.js

@@ -1,16 +1,14 @@
-export * as animate from './animate/index'
-export * as clickOutside from './clickOutSide/index'
-export * as drag from './drag/index'
-export * as intersect from './intersect/index'
-export * as mask from './mask/index'
-export * as parallax from './parallax/index'
-export * as resize from './resize/index'
-export * as ripple from './ripple/index'
-export * as scroll from './scroll/index'
-export * as sortable from './sortable/index'
-export * as touch from './touch/index'
-export * as title from './title/index'
-export * as skeleton from './skeleton/index'
+export * as animate from './animate/index.js'
+export * as clickOutside from './clickOutSide/index.js'
+export * as drag from './drag/index.js'
+export * as intersect from './intersect/index.js'
+export * as mask from './mask/index.js'
+export * as parallax from './parallax/index.js'
+export * as ripple from './ripple/index.js'
+export * as scroll from './scroll/index.js'
+export * as sortable from './sortable/index.js'
+export * as touch from './touch/index.js'
+export * as title from './title/index.js'
 
 export const _registers = (app, directives) => {
     for (const arrayKey in directives) {

package/directive/intersect/index.js

@@ -1,3 +1,266 @@
+/**
+ * @example // v-intersect usage
+ * <template>
+ *   <div class="intersection-container">
+ *     <h1>Intersection Observer Examples</h1>
+ *
+ *     <div class="scroll-area">
+ *       <div class="placeholder" style="height: 300px"></div>
+ *
+ *       <div
+ *         v-intersect="handleIntersection"
+ *         class="observed-box box1"
+ *         :class="{ visible: box1Visible }"
+ *       >
+ *         Box 1 - Default
+ *         <div v-if="box1Visible" class="status">IN VIEWPORT</div>
+ *       </div>
+ *
+ *       <div class="placeholder" style="height: 400px"></div>
+ *
+ *       <div
+ *         v-intersect.once="handleIntersectionOnce"
+ *         class="observed-box box2"
+ *         :class="{ visible: box2Visible }"
+ *       >
+ *         Box 2 - Once
+ *         <div v-if="box2Visible" class="status">TRIGGERED ONCE</div>
+ *       </div>
+ *
+ *       <div class="placeholder" style="height: 500px"></div>
+ *
+ *       <div
+ *         v-intersect.silent="handleIntersectionSilent"
+ *         class="observed-box box3"
+ *         :class="{ visible: box3Visible }"
+ *       >
+ *         Box 3 - Silent
+ *         <div v-if="box3Visible" class="status">SILENT MODE</div>
+ *       </div>
+ *
+ *       <div class="placeholder" style="height: 400px"></div>
+ *
+ *       <div
+ *         v-intersect.pre=""
+ *         class="observed-box box4"
+ *         :class="{ visible: box4Visible }"
+ *       >
+ *         Box 4 - Pre (No Callback)
+ *         <div v-if="box4Visible" class="status">PRE MODIFIED</div>
+ *       </div>
+ *
+ *       <div class="placeholder" style="height: 300px"></div>
+ *
+ *       <div
+ *         v-intersect="{
+ *           handler: handleIntersectionWithOptions,
+ *           options: { threshold: 0.5, rootMargin: '50px' }
+ *         }"
+ *         class="observed-box box5"
+ *         :class="{ visible: box5Visible }"
+ *       >
+ *         Box 5 - Custom Options
+ *         <div v-if="box5Visible" class="status">50% THRESHOLD</div>
+ *       </div>
+ *
+ *       <div class="placeholder" style="height: 600px"></div>
+ *     </div>
+ *
+ *     <div class="info-panel">
+ *       <div class="info-row">
+ *         <span>Box 1 Visible:</span>
+ *         <span :class="{ active: box1Visible }">{{ box1Visible ? 'YES' : 'NO' }}</span>
+ *       </div>
+ *       <div class="info-row">
+ *         <span>Box 2 Visible:</span>
+ *         <span :class="{ active: box2Visible }">{{ box2Visible ? 'YES' : 'NO' }}</span>
+ *       </div>
+ *       <div class="info-row">
+ *         <span>Box 3 Visible:</span>
+ *         <span :class="{ active: box3Visible }">{{ box3Visible ? 'YES' : 'NO' }}</span>
+ *       </div>
+ *       <div class="info-row">
+ *         <span>Box 4 Visible:</span>
+ *         <span :class="{ active: box4Visible }">{{ box4Visible ? 'YES' : 'NO' }}</span>
+ *       </div>
+ *       <div class="info-row">
+ *         <span>Box 5 Visible:</span>
+ *         <span :class="{ active: box5Visible }">{{ box5Visible ? 'YES' : 'NO' }}</span>
+ *       </div>
+ *       <div class="info-row">
+ *         <span>Total Entries:</span>
+ *         <span class="counter">{{ entryCount }}</span>
+ *       </div>
+ *     </div>
+ *   </div>
+ * </template>
+ *
+ * <script>
+ * import { ref } from 'vue'
+ *
+ * const box1Visible = ref(false)
+ * const box2Visible = ref(false)
+ * const box3Visible = ref(false)
+ * const box4Visible = ref(false)
+ * const box5Visible = ref(false)
+ * const entryCount = ref(0)
+ *
+ * const handleIntersection = (isIntersecting, entries, observer) => {
+ *   box1Visible.value = isIntersecting
+ *   entryCount.value++
+ *   console.log('Default intersection:', isIntersecting, entries)
+ * }
+ *
+ * const handleIntersectionOnce = (isIntersecting, entries, observer) => {
+ *   box2Visible.value = isIntersecting
+ *   entryCount.value++
+ *   console.log('Once intersection:', isIntersecting, entries)
+ * }
+ *
+ * const handleIntersectionSilent = (isIntersecting, entries, observer) => {
+ *   box3Visible.value = isIntersecting
+ *   entryCount.value++
+ *   console.log('Silent intersection:', isIntersecting, entries)
+ * }
+ *
+ * const handleIntersectionWithOptions = (isIntersecting, entries, observer) => {
+ *   box5Visible.value = isIntersecting
+ *   entryCount.value++
+ *   console.log('Custom options intersection:', isIntersecting, entries)
+ * }
+ * <//script>
+ *
+ * <style>
+ * .intersection-container {
+ *   font-family: Arial, sans-serif;
+ * }
+ *
+ * h1 {
+ *   text-align: center;
+ *   margin-bottom: 30px;
+ *   color: #333;
+ * }
+ *
+ * .scroll-area {
+ *   height: 80vh;
+ *   overflow-y: auto;
+ *   border: 2px solid #ddd;
+ *   border-radius: 8px;
+ *   padding: 20px;
+ *   background: #f9f9f9;
+ * }
+ *
+ * .placeholder {
+ *   background: linear-gradient(90deg, #eee 25%, #ddd 50%, #eee 75%);
+ *   background-size: 200% 100%;
+ *   animation: loading 1.5s infinite;
+ *   border-radius: 4px;
+ *   margin: 10px 0;
+ * }
+ *
+ * @keyframes loading {
+ *   0% { background-position: 200% 0; }
+ *   100% { background-position: -200% 0; }
+ * }
+ *
+ * .observed-box {
+ *   height: 200px;
+ *   display: flex;
+ *   align-items: center;
+ *   justify-content: center;
+ *   font-size: 1.2rem;
+ *   font-weight: bold;
+ *   border-radius: 8px;
+ *   margin: 20px 0;
+ *   opacity: 0.3;
+ *   transition: all 0.5s ease;
+ *   position: relative;
+ *   overflow: hidden;
+ * }
+ *
+ * .observed-box.visible {
+ *   opacity: 1;
+ *   transform: scale(1.05);
+ *   box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+ * }
+ *
+ * .box1 {
+ *   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ *   color: white;
+ * }
+ *
+ * .box2 {
+ *   background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+ *   color: white;
+ * }
+ *
+ * .box3 {
+ *   background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+ *   color: white;
+ * }
+ *
+ * .box4 {
+ *   background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
+ *   color: white;
+ * }
+ *
+ * .box5 {
+ *   background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
+ *   color: white;
+ * }
+ *
+ * .status {
+ *   position: absolute;
+ *   bottom: 10px;
+ *   right: 10px;
+ *   background: rgba(0,0,0,0.8);
+ *   color: white;
+ *   padding: 5px 10px;
+ *   border-radius: 4px;
+ *   font-size: 0.8rem;
+ * }
+ *
+ * .info-panel {
+ *   position: fixed;
+ *   bottom: 20px;
+ *   right: 20px;
+ *   background: white;
+ *   padding: 20px;
+ *   border-radius: 8px;
+ *   box-shadow: 0 4px 20px rgba(0,0,0,0.15);
+ *   min-width: 250px;
+ * }
+ *
+ * .info-row {
+ *   display: flex;
+ *   justify-content: space-between;
+ *   align-items: center;
+ *   padding: 8px 0;
+ *   border-bottom: 1px solid #eee;
+ * }
+ *
+ * .info-row:last-child {
+ *   border-bottom: none;
+ * }
+ *
+ * .info-row span:last-child {
+ *   font-weight: bold;
+ *   padding: 4px 12px;
+ *   border-radius: 4px;
+ *   background: #f0f0f0;
+ * }
+ *
+ * .info-row span.active {
+ *   background: #4CAF50;
+ *   color: white;
+ * }
+ *
+ * .counter {
+ *   background: #2196F3 !important;
+ *   color: white !important;
+ * }
+ * </style>
+ * */
 function mounted (el, binding) {
     const modifiers = binding.modifiers || {}
     if (modifiers.pre) {

package/directive/mask/index.js

@@ -1,3 +1,70 @@
+/**
+ * @example // v-mask usage
+ * <template>
+ *     <div class="title-1 my-3">Number input (N)</div>
+ *     <input
+ *      class="input-mask"
+ *         v-model="lazy1"
+ *         placeholder="2020/04/01"
+ *         @complete="log('complete',$event)"
+ *         @accept="log('accept',$event)"
+ *         @backspace="log('backspace',$event)"
+ *         @paste.prevent="log('paste',$event)"
+ *         v-mask="'NNNN/NN/NN'"
+ *     />
+ *     <div class="title-1 my-3">[a-z] input (A)</div>
+ *     <input
+ *      class="input-mask"
+ *         v-model="lazy2"
+ *         placeholder="aaaa - bbbb"
+ *         @complete="log('complete',$event)"
+ *         @accept="log('accept',$event)"
+ *         @backspace="log('backspace',$event)"
+ *         @paste.prevent="log('paste',$event)"
+ *         v-mask="'AAAA - AAAA'"
+ *     />
+ *     <div class="title-1 my-3">[a-z0-9] input (B)</div>
+ *     <input
+ *      class="input-mask"
+ *         v-model="lazy3"
+ *         placeholder="aaaa - 22"
+ *         @complete="log('complete',$event)"
+ *         @accept="log('accept',$event)"
+ *         @backspace="log('backspace',$event)"
+ *         @paste.prevent="log('paste',$event)"
+ *         v-mask="'BBBB - BB'"
+ *     />
+ *     <div class="title-1 my-3">Any input (X)</div>
+ *     <input
+ *      class="input-mask"
+ *         v-model="lazy4"
+ *         placeholder="aa - 22 - #@"
+ *         @complete="log('complete',$event)"
+ *         @accept="log('accept',$event)"
+ *         @backspace="log('backspace',$event)"
+ *         @paste.prevent="log('paste',$event)"
+ *         v-mask="'XX XX XX'"
+ *     />
+ *
+ * </template>
+ * <script>
+ *     import {ref} from 'vue'
+ *     const lazy1=ref(null)
+ *     const lazy2=ref(null)
+ *     const lazy3=ref(null)
+ *     const lazy4=ref(null)
+ *     const log=(name,e)=>{
+ *         console.log(name,e)
+ *     }
+ * <//script>
+ * <style>
+ *     .input-mask{
+ *         width:100%;
+ *         border:1px solid;
+ *         padding:8px
+ *     }
+ * </style>
+ * */
 function fireEvent(el, eventName, data) {
     var e = document.createEvent('CustomEvent');
     e.initCustomEvent(eventName, true, true, data);