renusify 2.5.2 → 3.0.1

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'
 

package/directive/touch/index.js

@@ -1,3 +1,271 @@
+/**
+ * @example // v-touch usage
+ * <template>
+ *   <div class="touch-container">
+ *     <h1>Touch Gesture Directive</h1>
+ *
+ *     <div class="gesture-areas">
+ *       <div class="gesture-area">
+ *         <h2>Swipe Detection</h2>
+ *         <div
+ *           v-touch="swipeHandlers"
+ *           class="swipe-box"
+ *         >
+ *           <div class="gesture-info">
+ *             <div class="info-item">
+ *               <span>Direction:</span>
+ *               <span class="value direction" :class="swipeDirection">
+ *                 {{ swipeDirection }}
+ *               </span>
+ *             </div>
+ *             <div class="info-item">
+ *               <span>Distance X:</span>
+ *               <span class="value">{{ swipeDistanceX }}px</span>
+ *             </div>
+ *             <div class="info-item">
+ *               <span>Distance Y:</span>
+ *               <span class="value">{{ swipeDistanceY }}px</span>
+ *             </div>
+ *             <div class="info-item">
+ *               <span>Swipe Count:</span>
+ *               <span class="value counter">{{ swipeCount }}</span>
+ *             </div>
+ *           </div>
+ *           <div class="instruction">
+ *             Swipe in any direction
+ *           </div>
+ *         </div>
+ *       </div>
+ *
+ *       <div class="gesture-area">
+ *         <h2>Touch Position</h2>
+ *         <div
+ *           v-touch="touchHandlers"
+ *           class="position-box"
+ *         >
+ *           <div class="gesture-info">
+ *             <div class="info-item">
+ *               <span>Current X:</span>
+ *               <span class="value">{{ currentX }}px</span>
+ *             </div>
+ *             <div class="info-item">
+ *               <span>Current Y:</span>
+ *               <span class="value">{{ currentY }}px</span>
+ *             </div>
+ *             <div class="info-item">
+ *               <span>Move Count:</span>
+ *               <span class="value counter">{{ moveCount }}</span>
+ *             </div>
+ *           </div>
+ *           <div class="touch-indicator" :style="{ left: indicatorX + 'px', top: indicatorY + 'px' }"></div>
+ *           <div class="instruction">
+ *             Touch and move
+ *           </div>
+ *         </div>
+ *       </div>
+ *     </div>
+ *   </div>
+ * </template>
+ *
+ * <script>
+ * import { ref } from 'vue'
+ *
+ * const swipeDirection = ref('none')
+ * const swipeDistanceX = ref(0)
+ * const swipeDistanceY = ref(0)
+ * const swipeCount = ref(0)
+ *
+ * const currentX = ref(0)
+ * const currentY = ref(0)
+ * const moveCount = ref(0)
+ *
+ * const indicatorX = ref(150)
+ * const indicatorY = ref(150)
+ *
+ * const swipeHandlers = ref({
+ *   left: (wrapper) => {
+ *     swipeDirection.value = 'left'
+ *     swipeDistanceX.value = Math.abs(wrapper.goX)
+ *     swipeDistanceY.value = Math.abs(wrapper.goY)
+ *     swipeCount.value++
+ *   },
+ *   right: (wrapper) => {
+ *     swipeDirection.value = 'right'
+ *     swipeDistanceX.value = wrapper.goX
+ *     swipeDistanceY.value = Math.abs(wrapper.goY)
+ *     swipeCount.value++
+ *   },
+ *   up: (wrapper) => {
+ *     swipeDirection.value = 'up'
+ *     swipeDistanceX.value = Math.abs(wrapper.goX)
+ *     swipeDistanceY.value = Math.abs(wrapper.goY)
+ *     swipeCount.value++
+ *   },
+ *   down: (wrapper) => {
+ *     swipeDirection.value = 'down'
+ *     swipeDistanceX.value = Math.abs(wrapper.goX)
+ *     swipeDistanceY.value = wrapper.goY
+ *     swipeCount.value++
+ *   }
+ * })
+ *
+ * const touchHandlers = ref({
+ *   move: (wrapper) => {
+ *     currentX.value = wrapper.current.x
+ *     currentY.value = wrapper.current.y
+ *     moveCount.value++
+ *
+ *     indicatorX.value = wrapper.current.x
+ *     indicatorY.value = wrapper.current.y
+ *   }
+ * })
+ * <//script>
+ *
+ * <style>
+ * .touch-container {
+ *   font-family: Arial, sans-serif;
+ *   padding: 20px;
+ *   max-width: 800px;
+ *   margin: 0 auto;
+ * }
+ *
+ * h1 {
+ *   text-align: center;
+ *   color: #333;
+ *   margin-bottom: 40px;
+ *   font-size: 2rem;
+ * }
+ *
+ * .gesture-areas {
+ *   display: grid;
+ *   grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+ *   gap: 20px;
+ * }
+ *
+ * .gesture-area {
+ *   background: white;
+ *   border-radius: 8px;
+ *   padding: 20px;
+ *   box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+ * }
+ *
+ * .gesture-area h2 {
+ *   margin-top: 0;
+ *   color: #667eea;
+ *   font-size: 1.2rem;
+ *   margin-bottom: 15px;
+ *   text-align: center;
+ * }
+ *
+ * .swipe-box,
+ * .position-box {
+ *   height: 250px;
+ *   border: 2px solid #dee2e6;
+ *   border-radius: 6px;
+ *   padding: 15px;
+ *   display: flex;
+ *   flex-direction: column;
+ *   position: relative;
+ *   overflow: hidden;
+ *   cursor: pointer;
+ *   user-select: none;
+ * }
+ *
+ * .swipe-box {
+ *   background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+ * }
+ *
+ * .position-box {
+ *   background: linear-gradient(135deg, #f0f4ff 0%, #e6e9ff 100%);
+ * }
+ *
+ * .gesture-info {
+ *   background: white;
+ *   border-radius: 4px;
+ *   padding: 10px;
+ *   margin-bottom: 15px;
+ *   box-shadow: 0 1px 4px rgba(0,0,0,0.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;
+ *   font-size: 14px;
+ * }
+ *
+ * .value {
+ *   font-family: monospace;
+ *   font-weight: bold;
+ *   padding: 3px 8px;
+ *   border-radius: 3px;
+ *   background: #f8f9fa;
+ *   min-width: 60px;
+ *   text-align: center;
+ *   font-size: 13px;
+ * }
+ *
+ * .counter {
+ *   background: #667eea;
+ *   color: white;
+ * }
+ *
+ * .direction {
+ *   background: #ff6b6b;
+ *   color: white;
+ * }
+ *
+ * .direction.left {
+ *   background: #4ecdc4;
+ * }
+ *
+ * .direction.right {
+ *   background: #ffa726;
+ * }
+ *
+ * .direction.up {
+ *   background: #43e97b;
+ * }
+ *
+ * .direction.down {
+ *   background: #f093fb;
+ * }
+ *
+ * .instruction {
+ *   text-align: center;
+ *   color: #666;
+ *   font-size: 1rem;
+ *   margin-top: auto;
+ *   padding: 15px;
+ *   background: rgba(255,255,255,0.8);
+ *   border-radius: 4px;
+ * }
+ *
+ * .touch-indicator {
+ *   position: absolute;
+ *   width: 20px;
+ *   height: 20px;
+ *   background: #667eea;
+ *   border-radius: 50%;
+ *   transform: translate(-50%, -50%);
+ *   pointer-events: none;
+ *   box-shadow: 0 0 6px rgba(102, 126, 234, 0.5);
+ * }
+ * </style>
+ * */
 const handleGesture = wrapper => {
     const {
         startX,

package/index.js

@@ -18,38 +18,28 @@ function breakpoint() {
     const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
     const height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
     const points = {
-        'xs': 0,
-        'sm': 600,
-        'md': 960,
-        'lg': 1280,
-        'xl': 1620
+        'sm': 0,
+        'md': 768,
+        'lg': 1200
     }
     let data = {
         points: points,
-        xsOnly: width < points.sm,
-        smOnly: points.sm <= width && width < points.md,
-        smAndDown: width < points.md,
-        smAndUp: width >= points.sm,
+        smOnly: width < points.md,
         mdOnly: points.md <= width && width < points.lg,
         mdAndDown: width < points.lg,
         mdAndUp: width >= points.md,
         lgOnly: points.lg <= width && width < points.xl,
         lgAndDown: width < points.xl,
         lgAndUp: width >= points.lg,
-        xlOnly: points.xl <= width,
         width: width,
         height: height
     }
-    if (data.xsOnly) {
-        data.name = 'xs'
-    } else if (data.smOnly) {
+    if (data.smOnly) {
         data.name = 'sm'
     } else if (data.mdOnly) {
         data.name = 'md'
     } else if (data.lgOnly) {
         data.name = 'lg'
-    } else if (data.xlOnly) {
-        data.name = 'xl'
     }
     return data
 }
@@ -61,7 +51,6 @@ export default {
         app.config.globalProperties.$r = reactive(Object.assign({}, {
             prefix: 'r-',
             rtl: false,
-            inputs: {tile: false},
             lang: 'en',
             langs:
                 {
@@ -118,8 +107,7 @@ export default {
         // renusify validation
         const v = new valid(app.config.globalProperties.$t)
         app.config.globalProperties.$v = (names) => v.checkType(names)
-
-        app.provide('renusify', {
+        let provide = {
             $r: app.config.globalProperties.$r,
             $toast: app.config.globalProperties.$toast,
             $storage: app.config.globalProperties.$storage,
@@ -130,7 +118,11 @@ export default {
             $d: app.config.globalProperties.$d,
             $n: app.config.globalProperties.$n,
             $v: app.config.globalProperties.$v,
-        })
+        }
+        if (app.config.globalProperties.$r.useNotify) {
+            provide.$notify = app.config.globalProperties.$notify
+        }
+        app.provide('renusify', provide)
 
         // install components
         let required_directive = _register(app, options['components'] || {});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "renusify",
-  "version": "2.5.2",
+  "version": "3.0.1",
   "description": "Vue3 Framework",
   "keywords": [
     "vuejs",
@@ -23,5 +23,8 @@
     "email": "ba.smko@gmail.com"
   },
   "license": "BSD",
-  "private": false
+  "private": false,
+  "scripts": {
+    "docs:generate": "node scripts/generate-docs.mjs"
+  }
 }

package/plugins/validation/Validate.js

@@ -4,8 +4,17 @@ export default class Validate {
     }
 
     required() {
-        let msg = this.$t('required_error', 'renusify');
-        return (v) => !!(v !== undefined && v !== null && v !== '') || msg
+        const msg = this.$t('required_error', 'renusify');
+
+        return (v) => {
+            const isEmpty =
+                v == null ||
+                (typeof v === 'string' && v.trim() === '') ||
+                (Array.isArray(v) && v.length === 0) ||
+                (typeof v === 'object' && Object.keys(v).length === 0);
+
+            return !isEmpty || msg;
+        }
     }
 
     requiredArray() {
@@ -14,83 +23,83 @@ export default class Validate {
 
     email() {
         return (v) => (v && v.length > 0 ? /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) : true) || this.$t('validate_email', 'renusify');
-  }
-
-  url() {
-      return (v) => (v && v.length > 0 ? /^((https?|ftp|smtp):\/\/)?(www.)?[a-z0-9]+\.[a-z]+(\/[a-zA-Z0-9#]+\/?)*$/.test(v) : true) || this.$t('validate_url', 'renusify');
-  }
-
-  match(val) {
-    return (v) => {
-      if (v == val) {
-        return true
-      } else {
-          return this.$t(['validate_match', [val]], 'renusify');
-      }
-    }
-  }
-
-  phone() {
-      return (v) => (v && v.length > 0 ? /^[+]?[(]?[0-9]{3}[)]?[-\s.]?[0-9]{3}[-\s.]?[0-9]{4}$/.test(v) : true) || this.$t('validate_phone', 'renusify');
-  }
-
-  number() {
-      return (v) => (v && v.length > 0 ? /^([0-9.])*$/.test(v) : true) || this.$t('numeric_error', 'renusify');
-  }
-
-  english() {
-      return (v) => (v && v.length > 0 ? /^([0-9a-zA-Z])*$/.test(v) : true) || this.$t('english_error', 'renusify');
-  }
-
-  min_len(num) {
-      return v => (v && v.length > 0 ? v.length >= parseInt(num) ? true : this.$t(['min_len_error', [num, v.length]], 'renusify') : true)
-  }
-
-  max_len(num) {
-      return v => (v && v.length > 0 ? v.length <= parseInt(num) ? true : this.$t(['max_len_error', [num, v.length]], 'renusify') : true)
-  }
-
-  len(num) {
-      return v => (v && v.length > 0 ? v.length === parseInt(num) ? true : this.$t(['len_error', [num, v.length]], 'renusify') : true) || msg
-  }
-
-  min(num) {
-      return v => (v ? parseFloat(v) >= parseFloat(num) ? true : this.$t(['min_error', [num, parseFloat(v)]], 'renusify') : true)
-  }
-
-  max(num) {
-      return v => (v ? parseFloat(v) <= parseFloat(num) ? true : this.$t(['max_error', [num, parseFloat(v)]], 'renusify') : true)
-  }
-
-  eq(num) {
-      return v => (v ? parseFloat(v) === parseFloat(num) : true) || this.$t(['validate_eq', [num]], 'renusify');
-  }
-
-  notDefined(name) {
-      return v => this.$t(['validate_notDefined', [name]], 'renusify');
-  }
-
-  checkType(names) {
-    let filters = [];
-    if (Array.isArray(names)) {
-        names.forEach((name) => {
-            let res = name.split(':');
-            let par1 = res[1] ? res[1] : null;
-            let par2 = res[2] ? res[2] : null;
-            let par3 = res[3] ? res[3] : null;
-            if (this[res[0]]) {
-                if (par3 === null && par2 === null) {
-                    filters.push(this[res[0]](par1))
-                } else if (par3 === null) {
-                    filters.push(this[res[0]](par1, par2))
-          } else {
-            filters.push(this[res[0]](par1, par2, par3))
-          }
-        } else {
-          filters.push(this.notDefined(name))
+    }
+
+    url() {
+        return (v) => (v && v.length > 0 ? /^((https?|ftp|smtp):\/\/)?(www.)?[a-z0-9]+\.[a-z]+(\/[a-zA-Z0-9#]+\/?)*$/.test(v) : true) || this.$t('validate_url', 'renusify');
+    }
+
+    match(val) {
+        return (v) => {
+            if (v == val) {
+                return true
+            } else {
+                return this.$t(['validate_match', [val]], 'renusify');
+            }
+        }
+    }
+
+    phone() {
+        return (v) => (v && v.length > 0 ? /^[+]?[(]?[0-9]{3}[)]?[-\s.]?[0-9]{3}[-\s.]?[0-9]{4}$/.test(v) : true) || this.$t('validate_phone', 'renusify');
+    }
+
+    number() {
+        return (v) => (v && v.length > 0 ? /^([0-9.])*$/.test(v) : true) || this.$t('numeric_error', 'renusify');
+    }
+
+    english() {
+        return (v) => (v && v.length > 0 ? /^([0-9a-zA-Z])*$/.test(v) : true) || this.$t('english_error', 'renusify');
+    }
+
+    min_len(num) {
+        return v => (v && v.length > 0 ? v.length >= parseInt(num) ? true : this.$t(['min_len_error', [num, v.length]], 'renusify') : true)
+    }
+
+    max_len(num) {
+        return v => (v && v.length > 0 ? v.length <= parseInt(num) ? true : this.$t(['max_len_error', [num, v.length]], 'renusify') : true)
+    }
+
+    len(num) {
+        return v => (v && v.length > 0 ? v.length === parseInt(num) ? true : this.$t(['len_error', [num, v.length]], 'renusify') : true) || msg
+    }
+
+    min(num) {
+        return v => (v ? parseFloat(v) >= parseFloat(num) ? true : this.$t(['min_error', [num, parseFloat(v)]], 'renusify') : true)
+    }
+
+    max(num) {
+        return v => (v ? parseFloat(v) <= parseFloat(num) ? true : this.$t(['max_error', [num, parseFloat(v)]], 'renusify') : true)
+    }
+
+    eq(num) {
+        return v => (v ? parseFloat(v) === parseFloat(num) : true) || this.$t(['validate_eq', [num]], 'renusify');
+    }
+
+    notDefined(name) {
+        return v => this.$t(['validate_notDefined', [name]], 'renusify');
+    }
+
+    checkType(names) {
+        let filters = [];
+        if (Array.isArray(names)) {
+            names.forEach((name) => {
+                let res = name.split(':');
+                let par1 = res[1] ? res[1] : null;
+                let par2 = res[2] ? res[2] : null;
+                let par3 = res[3] ? res[3] : null;
+                if (this[res[0]]) {
+                    if (par3 === null && par2 === null) {
+                        filters.push(this[res[0]](par1))
+                    } else if (par3 === null) {
+                        filters.push(this[res[0]](par1, par2))
+                    } else {
+                        filters.push(this[res[0]](par1, par2, par3))
+                    }
+                } else {
+                    filters.push(this.notDefined(name))
+                }
+            })
         }
-      })
+        return filters
     }
-    return filters
-  }
 }