renusify 2.5.2 → 3.0.1

package/components/skeleton/index.vue

@@ -1,37 +1,62 @@
 <template>
   <div :class="[$r.prefix+'skeleton']">
+    <!--  Main content slot - shown when loading is true or showPreData is true
+     @example
+     <div class="tilte-1">title</div>
+     -->
     <slot v-if="loading||showPreData"></slot>
+
+    <!-- Skeleton slot - shown when loading is false -->
     <slot v-if="!loading" name="case">
       <div :class="['sk-'+type]" :style="{width:width,height:height}"></div>
     </slot>
   </div>
 </template>
 
-<script>
-export default {
-  name: "r-skeleton",
-  props: {
-    showPreData: Boolean,
-    loading: Boolean,
-    width: String,
-    height: String,
-    type: {
-      type: String,
-      default: 'card',
-      validator: function (value) {
-        return ['line', 'avatar', 'card'].indexOf(value) !== -1
-      }
-    },
-  }
-};
+<script setup>
+defineProps({
+  /**
+   * Shows pre-loaded data content instead of skeleton
+   * @type {Boolean}
+   */
+  showPreData: Boolean,
+  /**
+   * Controls loading state - shows skeleton when false, shows content when true
+   * @type {Boolean}
+   */
+  loading: Boolean,
+  /**
+   * Width of the skeleton element
+   * @type {String}
+   */
+  width: String,
+  /**
+   * Height of the skeleton element
+   * @type {String}
+   */
+  height: String,
+  /**
+   * Type of skeleton to display
+   * @type {String}
+   * @default 'card'
+   * @values 'line', 'avatar', 'card'
+   */
+  type: {
+    type: String,
+    default: 'card',
+    validator: function (value) {
+      return ['line', 'avatar', 'card'].indexOf(value) !== -1
+    }
+  },
+})
 </script>
 
 <style lang="scss">
 @use "sass:map";
-@use "../../style/variables/base";
+@use "../../style" as *;
 
 
-.#{base.$prefix}skeleton {
+.#{$prefix}skeleton {
   .sk-card, .sk-line, .sk-avatar {
     background: rgba(0, 0, 0, 0.12);
     overflow: hidden;
@@ -57,7 +82,7 @@ export default {
   }
 
   .sk-card {
-    border-radius: map.get(base.$borders, 'sm');
+    border-radius: map.get($borders, 'sm');
   }
 
   .sk-line {

package/components/slider/index.vue

@@ -4,7 +4,7 @@
         width:width+'px',
         height:(width/wPH)+'px'
            }"
-       ref="slider"
+       ref="sliderRef"
        v-touch="{
                 'left':$r.rtl?prev:next,
                 'right':$r.rtl?next:prev
@@ -22,6 +22,8 @@
            class="slider-slides">
         <r-progress-line v-if="autoplay&&progress" :model-value="remain" class="slider-progress"
                          color="color-one"></r-progress-line>
+        <!-- @slot Default slot for slide content.
+        Provide item(Current slide data), width(Width of the slide container), height(Height of the slide container) -->
         <slot v-if="width>0" :item="currentSlide" :width="width" :height="width/wPH">
           {{ currentSlide }}
         </slot>
@@ -33,8 +35,11 @@
             :key="n"
             class="slider-dot"
             v-for="(i,n) in slides">
+          <!-- Slot for custom dots rendering
+           Provide {Function} go - Function to go to a specific slide
+           Provide {Number} index - Slide index -->
           <slot name="dots" :go="goToSlide" :index="n">
-            <button @click.prevent="goToSlide(n)" type="button">{{ n }}</button>
+            <span @click.prevent="goToSlide(n)">{{ n }}</span>
           </slot>
         </li>
       </ul>
@@ -42,154 +47,312 @@
   </div>
 </template>
 
-<script>
-
-export default {
-  name: 'r-slider',
-  props: {
-    slides: {
-      type: Array,
-      default: () => {
-        return []
-      }
-    },
-    speed: {
-      type: Number,
-      default: 5000
-    },
-    wPH: {
-      type: Number,
-      default: 2
-    },
-    startIndex: {
-      type: Number,
-      default: 0
-    },
-    autoplay: {
-      type: Boolean,
-      default: false
-    },
-    progress: {
-      type: Boolean,
-      default: false
-    },
-    arrow: {
-      type: Boolean,
-      default: false
-    },
-    dots: {
-      type: Boolean,
-      default: true
-    },
-    appear: {
-      type: Boolean,
-      default: true
-    },
-    slidesClass: [String, Object, Array],
-    mode: {type: String, default: 'out-in'},
-    transitionRight: {type: String, default: 'slider-right'},
-    transitionLeft: {type: String, default: 'slider-left'}
+<script setup>
+import {ref, computed, onMounted, onUnmounted,watch} from 'vue'
+
+/**
+ * @example // Slider usage
+ * <template>
+ *   <r-slider
+ *     :slides="slides"
+ *     :startIndex="startIndex"
+ *     :appear="appear"
+ *     :speed="speed"
+ *     :w-p-h="wPH"
+ *     :slidesClass="slidesClass"
+ *     :mode="mode"
+ *     :transitionRight="transitionRight"
+ *     :transitionLeft="transitionLeft"
+ *     :autoplay="autoplay"
+ *     :progress="progress"
+ *     :arrow="arrow"
+ *     :dots="dots"
+ *     @index="log('index', $event)"
+ *   >
+ *     <template v-slot="{ item }">
+ *       <div
+ *         class="d-flex w-full h-full v-center h-center display-4 color-white-text"
+ *         :style="{ backgroundColor: item.color }"
+ *       >
+ *         {{ item.name }}
+ *       </div>
+ *     </template>
+ *   </r-slider>
+ * </template>
+ *
+ * <script>
+ * import { ref } from 'vue'
+ *
+ * const slides = ref([
+ *   { name: "one", color: "red" },
+ *   { name: "two", color: "blue" },
+ *   { name: "three", color: "green" }
+ * ])
+ *
+ * const speed = ref(5000)
+ * const wPH = ref(2)
+ * const autoplay = ref(false)
+ * const progress = ref(false)
+ * const arrow = ref(false)
+ * const dots = ref(true)
+ * const startIndex = ref(0)
+ * const appear = ref(true)
+ * const slidesClass = ref("position-absolute h-full")
+ * const mode = ref("")
+ * const transitionRight = ref("slide-start-to-end")
+ * const transitionLeft = ref("slide-end-to-start")
+ *
+ * // Methods
+ * const log = (name, e) => {
+ *   console.log(name, e)
+ * }
+ * <//script>
+ *
+ * */
+const props = defineProps({
+  /**
+   * Array of slide data items
+   * @type {Array}
+   * @default () => []
+   */
+  slides: {
+    type: Array,
+    default: () => []
   },
-  emits:['index'],
-  data() {
-    return {
-      direction: this.transitionRight,
-      loaded: false,
-      currentIndex: this.startIndex,
-      loaded_timer: null,
-      timer: null,
-      width: null,
-      remain_id: null,
-      remain: 0,
-    }
+  /**
+   * Autoplay interval in milliseconds
+   * @type {Number}
+   * @default 5000
+   */
+  speed: {
+    type: Number,
+    default: 5000
   },
-
-  mounted: function () {
-    this.init()
+  /**
+   * Width to height ratio (width/height)
+   * @type {Number}
+   * @default 2
+   */
+  wPH: {
+    type: Number,
+    default: 2
   },
-  methods: {
-    do_remain() {
-      this.remain = 0
-      clearInterval(this.remain_id)
-      this.remain_id = setInterval(() => {
-        this.remain += 10000 / this.speed
-        if (this.remain >= 100) {
-          this.remain = 100
-          clearInterval(this.remain_id)
-        }
-      }, 100)
-    },
-    init() {
-      const w = this.$refs.slider.clientWidth
-      this.width = w || 1200
-      this.startSlide()
-      this.loaded = true
-    },
-    toggle() {
-      clearInterval(this.timer)
-      this.loaded = false
-      clearTimeout(this.loaded_timer)
-      this.loaded_timer = setTimeout(() => {
-        this.loaded = true
-      }, 500)
-      this.startSlide()
-    },
-    startSlide: function () {
-      if (this.autoplay) {
-        this.timer = setInterval(this.next, this.speed)
-        this.do_remain()
-      }
-    },
-
-    next: function () {
-      this.toggle()
-      this.direction = this.transitionRight
-      if (this.currentIndex > this.slides.length - 2) {
-        this.currentIndex = 0
-      } else {
-        this.currentIndex += 1
-      }
-      this.$emit('index', this.currentIndex)
-    },
-    prev: function () {
-      this.toggle()
-      this.direction = this.transitionLeft
-      if (this.currentIndex === 0) {
-        this.currentIndex = this.slides.length - 1
-      } else {
-        this.currentIndex -= 1
-      }
-      this.$emit('index', this.currentIndex)
-    },
-    goToSlide(i) {
-      this.toggle()
-      if (i < this.currentIndex) {
-        this.direction = this.transitionLeft
-      } else {
-        this.direction = this.transitionRight
-      }
-
-      this.currentIndex = i
-      this.$emit('index', this.currentIndex)
-    }
+  /**
+   * Initial slide index to display
+   * @type {Number}
+   * @default 0
+   */
+  startIndex: {
+    type: Number,
+    default: 0
   },
-  computed: {
-    currentSlide: function () {
-      return this.slides[
-      (this.currentIndex) % this.slides.length]
-    }
+  /**
+   * Enables automatic slide progression
+   * @type {Boolean}
+   * @default false
+   */
+  autoplay: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * Shows progress bar during autoplay
+   * @type {Boolean}
+   * @default false
+   */
+  progress: {
+    type: Boolean,
+    default: false
   },
-  beforeUnmount() {
-    clearInterval(this.timer)
-    clearTimeout(this.loaded_timer)
-    clearInterval(this.remain_id)
+  /**
+   * Shows navigation arrows
+   * @type {Boolean}
+   * @default false
+   */
+  arrow: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * Shows navigation dots
+   * @type {Boolean}
+   * @default true
+   */
+  dots: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * Enables appear transition on initial render
+   * @type {Boolean}
+   * @default true
+   */
+  appear: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * Additional CSS classes for slides container
+   * @type {String|Object|Array}
+   */
+  slidesClass: [String, Object, Array],
+  /**
+   * Vue transition mode
+   * @type {String}
+   * @default 'out-in'
+   */
+  mode: {type: String, default: 'out-in'},
+  /**
+   * CSS transition name for right/next direction
+   * @type {String}
+   * @default 'slider-right'
+   */
+  transitionRight: {type: String, default: 'slider-right'},
+  /**
+   * CSS transition name for left/previous direction
+   * @type {String}
+   * @default 'slider-left'
+   */
+  transitionLeft: {type: String, default: 'slider-left'}
+})
+
+const emit = defineEmits([
+  /**
+   * Emitted when slide index changes
+   * @param {Number} index - New slide index
+   */
+  'index'
+])
+
+const direction = ref(props.transitionRight)
+const loaded = ref(false)
+const currentIndex = ref(props.startIndex)
+const loadedTimer = ref(null)
+const timer = ref(null)
+const width = ref(null)
+const remainId = ref(null)
+const remain = ref(0)
+const sliderRef = ref(null)
+
+const currentSlide = computed(() => {
+  if (!props.slides.length) return null
+  return props.slides[currentIndex.value % props.slides.length]
+})
+
+const doRemain = () => {
+  remain.value = 0
+  clearInterval(remainId.value)
+
+  if (!props.autoplay || !props.progress) return
+
+  remainId.value = setInterval(() => {
+    remain.value += 10000 / props.speed
+    if (remain.value >= 100) {
+      remain.value = 100
+      clearInterval(remainId.value)
+    }
+  }, 100)
+}
+
+const init = () => {
+  if (sliderRef.value) {
+    const w = sliderRef.value.clientWidth
+    width.value = w || 1200
+    startSlide()
+    loaded.value = true
+  }
+}
+
+const toggle = () => {
+  clearInterval(timer.value)
+  loaded.value = false
+
+  clearTimeout(loadedTimer.value)
+  loadedTimer.value = setTimeout(() => {
+    loaded.value = true
+  }, 500)
+
+  startSlide()
+}
+
+const startSlide = () => {
+  if (props.autoplay && props.slides.length > 1) {
+    clearInterval(timer.value)
+    timer.value = setInterval(next, props.speed)
+    doRemain()
+  }
+}
+
+/**
+ * Navigates to the next slide
+ */
+const next = () => {
+  if (props.slides.length <= 1) return
+
+  toggle()
+  direction.value = props.transitionRight
+
+  if (currentIndex.value > props.slides.length - 2) {
+    currentIndex.value = 0
+  } else {
+    currentIndex.value += 1
   }
+
+  emit('index', currentIndex.value)
 }
+
+/**
+ * Navigates to the previous slide
+ */
+const prev = () => {
+  if (props.slides.length <= 1) return
+
+  toggle()
+  direction.value = props.transitionLeft
+
+  if (currentIndex.value === 0) {
+    currentIndex.value = props.slides.length - 1
+  } else {
+    currentIndex.value -= 1
+  }
+
+  emit('index', currentIndex.value)
+}
+
+/**
+ * Navigates to a specific slide
+ * @param {Number} i - Slide index to navigate to
+ */
+const goToSlide = (i) => {
+  if (i === currentIndex.value || i < 0 || i >= props.slides.length) return
+
+  toggle()
+
+  if (i < currentIndex.value) {
+    direction.value = props.transitionLeft
+  } else {
+    direction.value = props.transitionRight
+  }
+
+  currentIndex.value = i
+  emit('index', currentIndex.value)
+}
+
+watch(()=>props.slides,()=>{init()})
+onMounted(() => {
+  init()
+})
+
+onUnmounted(() => {
+  clearInterval(timer.value)
+  clearTimeout(loadedTimer.value)
+  clearInterval(remainId.value)
+})
 </script>
+
 <style lang="scss">
 @use "sass:map";
-@use "../../style/variables/base";
-@use "../../style/mixins";
+@use "../../style" as *;
 
 
 .slider-progress {
@@ -202,25 +365,25 @@ export default {
 .btn-left-arrow {
   position: absolute;
   top: 50%;
-  @include mixins.ltr() {
+  @include ltr() {
     left: 20px;
   }
-  @include mixins.rtl() {
+  @include rtl() {
     right: 20px
   }
-  z-index: map.get(base.$z-index, 'low');
+  z-index: map.get($z-index, 'low');
 }
 
 .btn-right-arrow {
   position: absolute;
   top: 50%;
-  @include mixins.rtl() {
+  @include rtl() {
     left: 20px;
   }
-  @include mixins.ltr() {
+  @include ltr() {
     right: 20px
   }
-  z-index: map.get(base.$z-index, 'low');
+  z-index: map.get($z-index, 'low');
 }
 
 .slider-right {
@@ -233,10 +396,10 @@ export default {
   }
 
   &-enter-from {
-    @include mixins.rtl() {
+    @include rtl() {
       transform: translateX(-200px);
     }
-    @include mixins.ltr() {
+    @include ltr() {
       transform: translateX(200px);
     }
 
@@ -244,10 +407,10 @@ export default {
   }
 
   &-leave-to {
-    @include mixins.rtl() {
+    @include rtl() {
       transform: translateX(200px);
     }
-    @include mixins.ltr() {
+    @include ltr() {
       transform: translateX(-200px);
     }
 
@@ -265,10 +428,10 @@ export default {
   }
 
   &-enter-from {
-    @include mixins.rtl() {
+    @include rtl() {
       transform: translateX(200px);
     }
-    @include mixins.ltr() {
+    @include ltr() {
       transform: translateX(-200px);
     }
 
@@ -276,10 +439,10 @@ export default {
   }
 
   &-leave-to {
-    @include mixins.rtl() {
+    @include rtl() {
       transform: translateX(-200px);
     }
-    @include mixins.ltr() {
+    @include ltr() {
       transform: translateX(200px);
     }
 
@@ -318,7 +481,7 @@ export default {
     display: flex;
     padding: 5px;
 
-    button {
+    span {
       transition: 0.3s all ease-in-out;
       background-color: #bfbfbf;
       outline: none;
@@ -335,7 +498,7 @@ export default {
     }
   }
 
-  .slider-dot--current button {
+  .slider-dot--current span {
     transition: 0.5s all ease-in-out;
     background-color: currentColor;
     width: 30px;