renusify 2.5.2 → 3.0.1

package/components/swiper/index.vue

@@ -1,11 +1,17 @@
 <template>
   <div :class="`${$r.prefix}swiper`"
-       ref="swiper"
+       ref="swiperRef"
   >
-    <slot name="left" :left="left"></slot>
-    <slot name="right" :right="right"></slot>
+    <!-- @slot Previous navigation slot
+     @binding {Function} previous - Function to navigate previous -->
+    <slot name="previous" :previous="previous"></slot>
+
+    <!-- @slot Next navigation slot
+     @binding {Function} next - Function to navigate next -->
+    <slot name="next" :next="next"></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,239 @@
   </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
+})
+
+
+/**
+ * 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 slide
+ */
+const next = () => {
+  if(currentSlide.value+1>slides.value)return
+  goToSlide(currentSlide.value+1)
+}
+
+/**
+ * Navigates to the previous slide
+ */
+const previous = () => {
+  if(currentSlide.value===1)return
+  goToSlide(currentSlide.value-1)
+}
+
+/**
+ * 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 })
+
+defineExpose({
+  /**
+   * Navigates to the previous slide
+   */
+  previous,
+  /**
+   * Navigates to the next slide
+   */
+  next,
+  /**
+   * Return Current Slide
+   */
+  currentSlide
+})
 </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>

package/components/table/crud/header.vue

@@ -60,7 +60,7 @@
                              :label="$t('search','renusify')"
                              v-bind="headers[1][info.key].props"></component>
                 </div>
-                <r-btn :rounded="!$r.inputs.tile" class="ms-1 color-success" @click.prevent="added(info,add)">
+                <r-btn class="ms-1 color-success" @click.prevent="added(info,add)">
                   {{ $t('add', 'renusify') }}
                 </r-btn>
               </template>
@@ -82,79 +82,78 @@
     />
   </div>
 </template>
-<script>
-export default {
-  name: 'manageHeader',
-  props: {
-    headerTable: Object,
-    loading: Boolean,
-    disableAdd: Boolean,
-    advanceSearch: Boolean,
-    mcud: Boolean,
-    newItem: Function,
-    modelValue: String
-  },
-  emits: ['update:modelValue', 'copy', 'edit', 'delete', 'a-search'],
-  data() {
-    return {
-      show: false,
-      showConfirm: false,
-      advance: null
+
+<script setup>
+import {ref, computed, inject} from 'vue'
+
+const props = defineProps({
+  headerTable: Object,
+  loading: Boolean,
+  disableAdd: Boolean,
+  advanceSearch: Boolean,
+  mcud: Boolean,
+  newItem: Function,
+  modelValue: String
+})
+
+const emit = defineEmits(['update:modelValue', 'copy', 'edit', 'delete', 'a-search'])
+
+const {$t} = inject('renusify')
+
+const show = ref(false)
+const showConfirm = ref(false)
+const advance = ref({})
+
+const headers = computed(() => {
+  let r = []
+  let r2 = {}
+  for (let i = 0; i < props.headerTable.length; i++) {
+    r.push({'name': $t(props.headerTable[i].text), 'value': props.headerTable[i].value})
+    r2[props.headerTable[i].value] = props.headerTable[i].option
+    if (props.headerTable[i].option.type === 'r-date-input' || props.headerTable[i].option.type === 'r-time-ago') {
+      r2[props.headerTable[i].value]['withTime'] = true
     }
-  },
-  computed: {
-    headers() {
-      let r = []
-      let r2 = {}
-      for (let i = 0; i < this.headerTable.length; i++) {
-        r.push({'name': this.$t(this.headerTable[i].text), 'value': this.headerTable[i].value})
-        r2[this.headerTable[i].value] = this.headerTable[i].option
-        if (this.headerTable[i].option.type === 'r-date-input' || this.headerTable[i].option.type === 'r-time-ago') {
-          r2[this.headerTable[i].value]['withTime'] = true
-        }
-      }
-      return [r, r2]
+  }
+  return [r, r2]
+})
+
+const added = (info, add) => {
+  let item = headers[1][info.key]
+  if (info.key === '_id' || item.is_object_id === true) {
+    info.value = {'$oid': info.value}
+  } else if (item.is_object_id) {
+    info.value[item.is_object_id] = {'$oid': info.value[item.is_object_id]}
+  } else if (item.type === 'r-date-input' || item.type === 'r-time-ago') {
+    if (info.action === 'eq') {
+      info.value = {'$date': info.value}
+    } else if (info.action === 'ne') {
+      info.value = {'$ne': {'$date': info.value}}
+    } else if (info.action === 'gt') {
+      info.value = {'$gt': {'$date': info.value}}
+    } else if (info.action === 'lt') {
+      info.value = {'$lt': {'$date': info.value}}
+    }
+  } else {
+    if (info.action === 'ne') {
+      info.value = {'$ne': info.value}
+    } else if (info.action === 'gt') {
+      info.value = {'$gt': info.value}
+    } else if (info.action === 'lt') {
+      info.value = {'$lt': info.value}
     }
-  },
-  methods: {
-    added(info, add) {
-      let item = this.headers[1][info.key]
-      if (info.key === '_id' || item.is_object_id === true) {
-        info.value = {'$oid': info.value}
-      } else if (item.is_object_id) {
-        info.value[item.is_object_id] = {'$oid': info.value[item.is_object_id]}
-      } else if (item.type === 'r-date-input' || item.type === 'r-time-ago') {
-        if (info.action === 'eq') {
-          info.value = {'$date': info.value}
-        } else if (info.action === 'ne') {
-          info.value = {'$ne': {'$date': info.value}}
-        } else if (info.action === 'gt') {
-          info.value = {'$gt': {'$date': info.value}}
-        } else if (info.action === 'lt') {
-          info.value = {'$lt': {'$date': info.value}}
-        }
-      } else {
-        if (info.action === 'ne') {
-          info.value = {'$ne': info.value}
-        } else if (info.action === 'gt') {
-          info.value = {'$gt': info.value}
-        } else if (info.action === 'lt') {
-          info.value = {'$lt': info.value}
-        }
-      }
-      add()
-    },
-    accept() {
-      this.$emit('delete', true)
-      this.showConfirm = false
-    },
-    send() {
-      this.$emit('update:modelValue', '')
-      this.$emit('a-search', this.advance)
-    },
-    open() {
-      this.show = !this.show
-    },
   }
+  add()
+}
+const accept = () => {
+  emit('delete', true)
+  showConfirm.value = false
 }
+const send = () => {
+  emit('update:modelValue', '')
+  emit('a-search', advance.value)
+}
+const open = () => {
+  show.value = !show.value
+}
+
 </script>