renusify 2.5.2 → 3.0.0

package/components/swiper/index.vue

@@ -1,11 +1,17 @@
 <template>
   <div :class="`${$r.prefix}swiper`"
-       ref="swiper"
+       ref="swiperRef"
   >
+    <!-- @slot Left navigation slot
+     @binding {Function} left - Function to navigate left/previous -->
     <slot name="left" :left="left"></slot>
+
+    <!-- @slot Right navigation slot
+     @binding {Function} right - Function to navigate right/next -->
     <slot name="right" :right="right"></slot>
+
     <div class="swiper-container"
-         ref="container"
+         ref="containerRef"
          :class="{
             'in-move':inMove
              }"
@@ -18,6 +24,9 @@
            draggable="false"
            :style="{'min-width':itemWidth&&itemWidth+'px','width':itemWidth&&itemWidth+'px'}"
            v-for="(item,i) in items" :key="i">
+        <!-- @slot Default slot for swiper item content
+         @binding {*} item - Current item data
+         @binding {Number} index - Item index -->
         <slot :item="item" :index="i">{{ item }}</slot>
       </div>
     </div>
@@ -27,6 +36,9 @@
             :key="n"
             class="swiper-dot"
             v-for="n in slides">
+          <!-- @slot Slot for custom dots rendering
+           @binding {Function} go - Function to go to a specific slide
+           @binding {Number} index - Slide index -->
           <slot name="dots" :go="goToSlide" :index="n">
             <button @click.prevent="goToSlide(n)" type="button">{{ n }}</button>
           </slot>
@@ -36,122 +48,258 @@
   </div>
 </template>
 
-<script>
-
-export default {
-  name: 'r-swiper',
-  props: {
-    items: Array,
-    widthItem: Number,
-    dots: Boolean,
-    numShow: [Number, Object]
-  },
-  data() {
-    return {
-      timer: null,
-      inMove: false,
-      x: 0,
-      prePosition: 0,
-      width: null,
-      slides: 0,
-      currentSlide: 1
-    }
-  },
-  mounted() {
-    if (this.numShow && this.$refs.swiper) {
-      if (typeof this.numShow === 'object') {
-        for (let name in this.numShow) {
-          if (this.$r.breakpoint[name]) {
-            this.width = this.$refs.swiper.getBoundingClientRect().width / this.numShow[name]
-            break
-          }
-        }
-      } else {
-        this.width = this.$refs.swiper.getBoundingClientRect().width / this.numShow
-      }
+<script setup>
+import {ref, computed, onMounted, onUnmounted, inject, nextTick, watch} from 'vue'
+
+/**
+ * @example // Swiper usage
+ * <template>
+ *   <r-swiper
+ *     :items="items"
+ *     :width-Item="widthItem"
+ *     :dots="dots"
+ *     :num-Show="numShow"
+ *   >
+ *     <template v-slot="{ item }">
+ *       <r-card class="d-flex h-center v-center ma-2" style="height: 200px">
+ *         {{ item.name }}
+ *       </r-card>
+ *     </template>
+ *   </r-swiper>
+ * </template>
+ *
+ * <script>
+ * import { ref } from 'vue'
+ *
+ * const items = ref([
+ *   { name: 'One' },
+ *   { name: 'Two' },
+ *   { name: 'Three' },
+ *   { name: 'Four' },
+ *   { name: 'Five' },
+ *   { name: 'Six' },
+ *   { name: 'Seven' },
+ *   { name: 'Eight' },
+ *   { name: 'Nine' },
+ *   { name: 'Ten' }
+ * ])
+ *
+ * const widthItem = ref(null)
+ * const dots = ref(true)
+ * const numShow = ref(5)
+ * <//script>
+ *
+ *
+ * */
+const props = defineProps({
+  /**
+   * Array of items to display in the swiper
+   * @type {Array}
+   */
+  items: Array,
+  /**
+   * Fixed width for each swiper item in pixels
+   * @type {Number}
+   */
+  widthItem: Number,
+  /**
+   * Shows navigation dots
+   * @type {Boolean}
+   */
+  dots: Boolean,
+  /**
+   * Number of items to show simultaneously, or responsive object
+   * @type {Number|Object}
+   */
+  numShow: [Number, Object]
+})
+
+const {$r} = inject('renusify')
+
+const timer = ref(null)
+const inMove = ref(false)
+const x = ref(0)
+const prePosition = ref(0)
+const width = ref(null)
+const slides = ref(0)
+const currentSlide = ref(1)
+
+const swiperRef = ref(null)
+const containerRef = ref(null)
+
+const itemWidth = computed(() => {
+  if (width.value) {
+    return width.value
+  }
+  if (props.widthItem) {
+    return props.widthItem
+  }
+  return false
+})
+
+
+const canGoNext = computed(() => {
+  const r = $r.rtl ? 1 : -1
+  const maxX = (containerRef.value?.scrollWidth - swiperRef.value?.offsetWidth) / r
+  return x.value * r < maxX
+})
+
+const canGoPrev = computed(() => {
+  const r = $r.rtl ? 1 : -1
+  return x.value * r > 0
+})
+
+
+/**
+ * Navigates to a specific slide
+ * @param {Number} n - Slide number (1-indexed)
+ */
+const goToSlide = (n) => {
+  if (!swiperRef.value) return
+
+  inMove.value = false
+  const s = $r.rtl ? 1 : -1
+  x.value = swiperRef.value.offsetWidth * (n - 1) * s
+  prePosition.value = 0
+  end(n)
+}
+
+/**
+ * Navigates to the next/right slide
+ * @param {Number|null} customX - Custom distance to move in pixels
+ */
+const right = (customX = null) => {
+  if (!canGoNext.value) return
+
+  const moveX = customX || itemWidth.value || 200
+  clearTimeout(timer.value)
+
+  timer.value = nextTick(() => {
+    inMove.value = true
+    const direction = $r.rtl ? 1 : -1
+    x.value = prePosition.value - (moveX * direction)
+    end()
+    clearTimeout(timer.value)
+  })
+}
+
+/**
+ * Navigates to the previous/left slide
+ * @param {Number|null} customX - Custom distance to move in pixels
+ */
+const left = (customX = null) => {
+  if (!canGoPrev.value) return
+
+  const moveX = customX || itemWidth.value || 200
+  clearTimeout(timer.value)
+
+  timer.value = setTimeout(() => {
+    inMove.value = true
+    const direction = $r.rtl ? 1 : -1
+    x.value = prePosition.value + (moveX * direction)
+    end()
+    clearTimeout(timer.value)
+  }, 50)
+}
+
+/**
+ * Handles touch/mouse move events
+ * @param {Object} e - Move event object with goX property
+ */
+const move = (e) => {
+  if (inMove.value || !e?.goX) return
+
+  inMove.value = true
+  clearTimeout(timer.value)
+
+  timer.value = setTimeout(() => {
+    x.value = prePosition.value + e.goX
+    inMove.value = false
+  }, 50)
+}
+
+/**
+ * Handles touch/mouse end events
+ * @param {Number|null} current - Current slide number for direct navigation
+ */
+const end = (current = null) => {
+  setTimeout(() => {
+    inMove.value = false
+
+    if (!swiperRef.value || !containerRef.value) return
+
+    const r = $r.rtl ? 1 : -1
+    const swiperWidth = swiperRef.value.offsetWidth
+    const containerWidth = containerRef.value.scrollWidth
+
+    if (x.value * r + swiperWidth >= containerWidth) {
+      x.value = (containerWidth - swiperWidth) / r
+    } else if (itemWidth.value) {
+      const diff = x.value - prePosition.value
+      const snapSteps = Math.round(diff / itemWidth.value)
+      x.value = prePosition.value + (snapSteps * itemWidth.value)
     }
-    setTimeout(() => {
-      this.slides = Math.ceil(this.$refs.container.scrollWidth / this.$refs.swiper.offsetWidth)
-    }, 1000)
-  },
-  computed: {
-    itemWidth() {
-      if (this.width) {
-        return this.width
-      }
-      if (this.widthItem) {
-        return this.widthItem
-      }
 
-      return false
+    if (x.value * r < 0) {
+      x.value = 0
     }
-  },
-  methods: {
-    goToSlide(n) {
-      this.inMove = false
-      let s = -1
-      if (this.$r.rtl) {
-        s = 1
-      }
-      this.x = this.$refs.swiper.offsetWidth * (n - 1) * s
-      this.end()
-    },
-    right(x = null) {
-      if (x === null) {
-        x = this.itemWidth || 200
-      }
-      this.timer = setTimeout(() => {
-        this.inMove = true
-        this.x = this.prePosition - x
-        this.end()
-        clearTimeout(this.timer)
-      }, 50)
-    }, left(x = null) {
-      if (x === null) {
-        x = this.itemWidth || 200
-      }
-      this.timer = setTimeout(() => {
-        this.inMove = true
-        this.x = this.prePosition + x
-        this.end()
-        clearTimeout(this.timer)
-      }, 50)
-    }, move(e) {
-      if (this.inMove) {
-        return
-      }
-      this.inMove = true
-      this.timer = setTimeout(() => {
-        this.x = this.prePosition + e.goX
-        this.inMove = false
-      }, 50)
-    },
-    end(e) {
-      setTimeout(() => {
-        this.inMove = false
-        const r = this.$r.rtl ? 1 : -1
-        if (this.x * r + this.$refs.swiper.offsetWidth >= this.$refs.container.scrollWidth) {
-          this.x = (this.$refs.container.scrollWidth - this.$refs.swiper.offsetWidth) / r
-        } else if (this.itemWidth) {
-          this.x = this.prePosition + Math.round((this.x - this.prePosition) / this.itemWidth) * this.itemWidth
-        }
 
-        if (this.x * r < 0) {
-          this.x = 0
-        }
-        this.prePosition = this.x
+    prePosition.value = x.value
+    if (typeof current === 'number') {
+      currentSlide.value = current
+    } else if (swiperWidth > 0) {
+      currentSlide.value = Math.ceil(x.value / swiperWidth * r) + 1
+    }
+  }, 60)
+}
 
-        this.currentSlide = Math.ceil(this.x / this.$refs.swiper.offsetWidth * r) + 1
-      }, 60)
+const handleResize = () => {
+  if (!swiperRef.value) return
 
+  if (props.numShow) {
+    if (typeof props.numShow === 'object') {
+      for (let name in props.numShow) {
+        if ($r.breakpoint && $r.breakpoint[name]) {
+          width.value = swiperRef.value.getBoundingClientRect().width / props.numShow[name]
+          break
+        }
+      }
+    } else {
+      width.value = swiperRef.value.getBoundingClientRect().width / props.numShow
     }
   }
+
+  nextTick(() => {
+    if (containerRef.value) {
+      slides.value = Math.ceil(containerRef.value.scrollWidth / swiperRef.value.offsetWidth)
+    }
+  })
+
 }
+
+
+onMounted(() => {
+  handleResize()
+})
+
+onUnmounted(() => {
+  clearTimeout(timer.value)
+})
+
+
+watch(() => props.items, () => {
+  x.value = 0
+  prePosition.value = 0
+  currentSlide.value = 1
+
+  handleResize()
+}, {deep: true})
 </script>
+
 <style lang="scss">
-@use "../../style/variables/base";
+@use "../../style" as *;
 
-.#{base.$prefix}swiper {
+.#{$prefix}swiper {
   width: 100%;
   max-width: 100%;
   height: 100%;

package/components/table/crud/footer.vue

@@ -20,14 +20,14 @@
                         <r-btn :disabled="page===1" @click.prevent="pageBtn('prev')" class="btn-shaped"
                                icon
                                text>
-                            <r-icon v-html="this.$r.icons.chevron_left"></r-icon>
+                          <r-icon v-html="$r.icons.chevron_left"></r-icon>
 
                         </r-btn>
                       <input name="input-page" type="text" :value="page" @input="pageN" class="input-page text-center">
                         <r-btn :disabled="endPage" @click.prevent="pageBtn('next')" class="btn-shaped"
                                icon
                                text>
-                            <r-icon v-html="this.$r.icons.chevron_right"></r-icon>
+                          <r-icon v-html="$r.icons.chevron_right"></r-icon>
 
                         </r-btn>
                     </div>
@@ -36,55 +36,79 @@
         </r-container>
     </div>
 </template>
-<script>
-    export default {
-        name: 'manageFooter',
-        props: {
-            page: {type: Number, default: 1},
-            total: {},
-            perPage: {
-                type: Object, default: () => {
-                    return {name: '10', value: 10}
-                }
-            }
-        },
-        emits: ['update:per-page', 'update:page'],
-        computed: {
-            totalSetup() {
-                let to = this.page * this.perPage.value
-                const from = to - this.perPage.value
-                if (to > this.total) {
-                    to = this.total
-                }
-                return this.$t(['from_to_manage', [from, to, this.total]], 'renusify')
-            },
-            endPage() {
-                let to = this.page * this.perPage.value
-                if (to > this.total) {
-                    to = this.total
-                }
-
-                return to === this.total
-            }
-        },
-        methods: {
-            perPageE(e) {
-                this.$emit('update:per-page', e)
-            },
-            pageN(e) {
-                e = parseInt(e.target.value)
-                if (e < 1) {
-                    e = 1
-                }
-                this.$emit('update:page', e)
-            },
-            pageBtn(v) {
-                if (v === 'prev') {
-                    this.$emit('update:page', this.page - 1)
-                } else {
-                    this.$emit('update:page', this.page + 1)
-                }
-            },
-        }
-    }
+<script setup>
+import {computed, inject} from 'vue'
+
+const props = defineProps({
+  page: {type: Number, default: 1},
+  total: {},
+  perPage: {
+    type: Object,
+    default: () => ({name: '10', value: 10})
+  }
+})
+
+const emit = defineEmits(['update:per-page', 'update:page'])
+
+const {$t} = inject('renusify')
+
+const totalSetup = computed(() => {
+  let to = props.page * props.perPage.value
+  const from = to - props.perPage.value
+
+  if (to > props.total) {
+    to = props.total
+  }
+
+  return $t(['from_to_manage', [from, to, props.total]], 'renusify')
+})
+
+const endPage = computed(() => {
+  let to = props.page * props.perPage.value
+  if (to > props.total) {
+    to = props.total
+  }
+
+  return to === props.total
+})
+
+
+const totalPages = computed(() => {
+  if (!props.total || !props.perPage.value) return 1
+  return Math.ceil(props.total / props.perPage.value)
+})
+
+const perPageE = (e) => {
+  emit('update:per-page', e)
+}
+
+const pageN = (e) => {
+  let value = parseInt(e.target.value)
+
+  if (isNaN(value) || value < 1) {
+    value = 1
+  }
+
+  if (value > totalPages.value) {
+    value = totalPages.value
+  }
+
+  emit('update:page', value)
+}
+
+const pageBtn = (direction) => {
+  let newPage = props.page
+
+  if (direction === 'prev') {
+    newPage = Math.max(1, props.page - 1)
+  } else if (direction === 'next') {
+    newPage = Math.min(totalPages.value, props.page + 1)
+  } else if (direction === 'first') {
+    newPage = 1
+  } else if (direction === 'last') {
+    newPage = totalPages.value
+  }
+
+  emit('update:page', newPage)
+}
 </script>