renusify 2.5.2 → 3.0.0

package/components/icon/index.vue

@@ -1,42 +1,88 @@
 <template>
     <span ref="icon" :class="classes">
+      <!-- Default slot for icon content. -->
         <slot></slot>
     </span>
 </template>
 
-<script>
-    import './style.scss'
-
-    export default {
-      name: 'index',
-      props: {
-        width: {type: String},
-        height: {type: String},
-        disabled: Boolean,
-        exact: Boolean
-      },
-      mounted() {
-        if (this.width || this.height) {
-          const el = this.$refs.icon.firstElementChild
-          if (el) {
-            if (this.width) {
-              el.setAttribute('width', this.width)
-            }
-            if (this.height) {
-              el.setAttribute('height', this.height)
-            }
-          }
-        }
-      },
-      computed: {
-        classes() {
-          let a = {
-            'icon-disabled': this.disabled,
-            'exact-icon': this.exact
-          }
-          a[`${this.$r.prefix}icon`] = true
-          return a
-        }
+<script setup>
+import {computed, inject, onMounted, ref} from 'vue'
+
+/**
+ * Component properties configuration
+ * @typedef {Object} ComponentProps
+ */
+
+const props = defineProps({
+  /**
+   * Width of the component
+   * @description CSS width value (e.g., '100px', '50%', 'auto')
+   * @example '100%'
+   * @example '300px'
+   */
+  width: {type: String},
+
+  /**
+   * Height of the component
+   * @description CSS height value (e.g., '100px', '50%', 'auto')
+   * @example '200px'
+   * @memberof ComponentProps
+   */
+  height: {type: String},
+
+  /**
+   * Whether the icon is disabled
+   * @description When true, user interaction is prevented and visual styling indicates disabled state
+   */
+  disabled: Boolean,
+
+  /**
+   * Whether to apply exact icon for both rtl and ltr
+   */
+  exact: Boolean
+})
+
+const $r = inject('renusify').$r
+
+const icon = ref(null)
+
+const classes = computed(() => {
+  return {
+    [`${$r.prefix}icon`]: true,
+    'icon-disabled': props.disabled,
+    'exact-icon': props.exact
+  }
+})
+
+onMounted(() => {
+  if (props.width || props.height) {
+    const el = icon.value?.firstElementChild
+    if (el) {
+      if (props.width) {
+        el.setAttribute('width', props.width)
+      }
+      if (props.height) {
+        el.setAttribute('height', props.height)
       }
     }
+  }
+})
 </script>
+<style lang="scss">
+@use "../../style" as *;
+
+.#{$prefix}icon {
+  display: inline-flex;
+  vertical-align: -.5rem;
+
+  &.icon-disabled {
+    @include disable-states();
+  }
+
+  @include rtl() {
+    &:not(.exact-icon) {
+      transform: scale(-1, 1);
+    }
+  }
+}
+</style>

package/components/img/index.vue

@@ -3,16 +3,21 @@
         [$r.prefix+'img']:true,
         'img-hoverZoom':hoverZoom,'img-hoverDark':hoverDark,'img-hover-preview':preview}"
        ref="rImg">
-    <div v-if="preview" class="img-preview w-full h-full d-flex v-center h-center"
+    <div v-if="preview" class="img-preview d-flex v-center h-center"
     >
       <r-btn icon @click="show_preview=true">
         <r-icon v-html="$r.icons.eye"></r-icon>
       </r-btn>
     </div>
-    <img v-if="load &&!isSvg" ref="img" :alt="alt" :height="size.height>0?size.height:'auto'" :src="link" :style="{'height':size.height>0?undefined:'auto',
+    <img v-if="load &&!isSvg" ref="img" :alt="alt"
+         :height="size.height>0?size.height:'auto'"
+         :width="size.width>0?size.width:'auto'"
+         :sizes="size.width>0?size.width+'px':'auto'"
+         :src="link"
+         :srcset="srcset"
+         :style="{'height':size.height>0?undefined:'auto',
          'width':size.width>0?undefined:'auto'
          }"
-         :width="size.width>0?size.width:'auto'"
          draggable="false"/>
     <svg-img v-else-if="load &&isSvg&&link" :link="link" :size="size">
     </svg-img>
@@ -21,165 +26,260 @@
     </teleport>
   </div>
 </template>
-<script>
-import {defineAsyncComponent} from 'vue'
-
-export default {
-  name: 'r-img',
-  components: {
-    SvgImg: defineAsyncComponent(() => import('./svgImg.vue')),
-    previewImg: defineAsyncComponent(() => import('./preview.vue')),
+<script setup>
+import {defineAsyncComponent, ref, computed, onMounted, nextTick} from 'vue'
+
+const props = defineProps({
+  /**
+   * Source URL of the image
+   * Required: true
+   * Example: 'https://codenus.com/pwa/logo'
+   */
+  src: {
+    type: String,
+    required: true
   },
-  props: {
-    src: {
-      type: String,
-      required: true
-    },
-    preview: String,
-    alt: {
-      type: String,
-      required: true
-    },
-    lazy: {
-      type: String,
-      default: 'create',
-      validator: function (value) {
-        return ['no', 'create'].indexOf(value) !== -1
-      }
-    },
-    width: {
-      type: [String, Number]
-    },
-    height: {
-      type: [String, Number]
-    },
-    query: String,
-    autoSize: Boolean,
-    hoverZoom: Boolean,
-    hoverDark: Boolean,
-    isSvg: Boolean,
-    svgCache: {type: Number, default: 86400},
-    wPH: Number
+
+  /**
+   * Preview image URL for high resolution image
+   * Example: 'https://codenus.com/pwa/logo'
+   */
+  preview: String,
+
+  /**
+   * Alternative text for the image (accessibility)
+   * Required: true
+   * Example: 'A beautiful sunset over the mountains'
+   */
+  alt: {
+    type: String,
+    required: true
   },
-  data() {
-    return {
-      show_preview: false,
-      load: false,
-      view: false,
-      modifier: this.lazy !== 'no' ? 'once' : 'pre',
-      time_id: null,
-      size: {width: 0, height: 0}
-    }
+
+  /**
+   * Lazy loading behavior
+   * Allowed values: 'no', 'create'
+   * - 'no': No lazy loading
+   * - 'create': Create lazy loading instance
+   */
+  lazy: {
+    type: String,
+    default: 'create',
+    validator: (value) => ['no', 'create'].includes(value)
   },
-  created() {
-    this.activate()
+
+  /**
+   * Width of the image
+   * Example: '100%', 300, '200px'
+   */
+  width: {
+    type: [String, Number]
   },
-  computed: {
-    link() {
-      if (this.lazy !== 'no' && !this.view) {
-        return null
-      }
-      let res = this.src
-      if (!(res.startsWith('/') || res.startsWith('http://') || res.startsWith('https://') || res.startsWith('data:image/'))) {
-        res = '/' + res
-      }
-      if (this.src.search('[?]') === -1) {
-        res += '?'
-      }
-      if (this.query) {
-        res += this.query
-      }
-      if (this.isSvg && this.svgCache) {
-        res += '&c=' + this.svgCache
-      }
-      if (!this.isSvg && ((this.autoSize && this.size.width > 0) || this.width)) {
-        res += `&w=${this.size.width}`
-      }
-      if (!this.isSvg && ((this.autoSize && this.size.height > 0) || this.height)) {
-        res += `&h=${this.size.height}`
-      }
-      return res
-    }
+
+  /**
+   * Height of the image
+   * Example: 'auto', 200, '150px'
+   */
+  height: {
+    type: [String, Number]
   },
-  methods: {
-    check(isIntersecting) {
-      if (isIntersecting) {
-        this.view = true
-      }
-    },
-    getSize() {
-      let res = {width: 0, height: 0}
-      if (this.width) {
-        res["width"] = this.width
-      }
-      if (this.height) {
-        res["height"] = this.height
-      }
-      let wPH = this.wPH
-      if (!wPH) {
-        const ls = this.src.split('/')
-        if (ls.length > 0) {
-          const p = ls[ls.length - 1].split('_')
-          if (p.length === 3) {
-            const p0 = parseInt(p[0])
-            const p1 = parseInt(p[1])
-            if (p0 && p1) {
-              wPH = p0 / p1
-            }
-          } else {
-            wPH = 1
-          }
-        }
-      }
-      if (wPH) {
-        if (res['width'] !== 0 && res['height'] === 0) {
-          res['height'] = parseInt(res['width'] / wPH)
-        }
-        if (res['width'] === 0 && res['height'] !== 0) {
-          res['width'] = parseInt(res['height'] * wPH)
-        }
-      }
 
-      if (res['width'] !== 0 || res['height'] !== 0) {
-        return this.size = res
-      }
+  /**
+   * Query parameters to append to the image URL
+   * Example: '?quality=80&format=webp'
+   */
+  query: String,
 
-      if (this.$refs.rImg && this.$refs.rImg.parentElement && this.$refs.rImg.parentElement.clientWidth > 0) {
-        let cs = window.getComputedStyle(this.$refs.rImg.parentElement)
-        let paddingX = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight);
-        let borderX = parseFloat(cs.borderLeftWidth) + parseFloat(cs.borderRightWidth);
-        let w = parseInt(parseFloat(cs.getPropertyValue('width')) - paddingX - borderX);
-        return this.size = {
-          width: w,
-          height: parseInt(wPH ? w / wPH : 0)
-        }
-      }
-      return false
+  /**
+   * Whether to automatically generate srcset for responsive images
+   */
+  autoSrcset: {type: Boolean, default: true},
+
+  /**
+   * Whether to automatically calculate image dimensions
+   */
+  autoSize: Boolean,
+
+  /**
+   * Whether to enable zoom on hover effect
+   */
+  hoverZoom: Boolean,
+
+  /**
+   * Whether to apply dark overlay on hover
+   */
+  hoverDark: Boolean,
+
+  /**
+   * Whether the image is an SVG file
+   */
+  isSvg: Boolean,
+
+  /**
+   * Cache duration for SVG files in seconds
+   * Default: 86400 (24 hours)
+   */
+  svgCache: {type: Number, default: 86400},
+
+  /**
+   * Width-per-height ratio (aspect ratio)
+   * Example: 1.777 (for 16:9 aspect ratio)
+   */
+  wPH: Number
+})
+
+const SvgImg = defineAsyncComponent(() => import('./svgImg.vue'))
+const PreviewImg = defineAsyncComponent(() => import('./preview.vue'))
+
+const show_preview = ref(false)
+const load = ref(false)
+const view = ref(false)
+const modifier = computed(() => props.lazy !== 'no' ? 'once' : 'pre')
+const srcset = ref(null)
+const size = ref({width: 0, height: 0})
+
+const rImg = ref(null)
+
+const link = computed(() => {
+  if (props.lazy !== 'no' && !view.value) {
+    return null
+  }
+
+  let res = props.src
+  if (!(res.startsWith('/') || res.startsWith('http://') || res.startsWith('https://') || res.startsWith('data:image/'))) {
+    res = '/' + res
+  }
 
-    },
-    activate() {
-      this.getSize()
-      if (this.size.width !== 0 || this.size.height) {
-        this.load = true
+  if (props.src.search('[?]') === -1) {
+    res += '?'
+  }
+
+  if (props.query) {
+    res += props.query
+  }
+
+  if (props.isSvg && props.svgCache) {
+    res += '&c=' + props.svgCache
+  }
+
+  if (!props.isSvg && ((props.autoSize && size.value.width > 0) || props.width)) {
+    res += `&w=${size.value.width}`
+  }
+
+  if (!props.isSvg && ((props.autoSize && size.value.height > 0) || props.height)) {
+    res += `&h=${size.value.height}`
+  }
+
+  return res
+})
+
+const set_srcset = (wph) => {
+  if (!props.autoSrcset) return
+
+  let src = props.src
+  if (src.search('[?]') === -1) {
+    src += '?'
+  }
+  if (props.query) {
+    src += props.query
+  }
+
+  const sizes = [300, 600, 900, 1200]
+  const srcs = sizes.map(width => {
+    const height = parseInt(width / wph)
+    return `${src}&w=${width}&h=${height} ${width}w`
+  })
+  srcset.value = srcs.join(',')
+}
+
+const check = (isIntersecting) => {
+  if (isIntersecting) {
+    view.value = true
+  }
+}
+
+const getSize = () => {
+  const res = {width: 0, height: 0}
+
+  if (props.width) {
+    res.width = props.width
+  }
+  if (props.height) {
+    res.height = props.height
+  }
+
+  let wPH = props.wPH
+  if (!wPH) {
+    const ls = props.src.split('/')
+    if (ls.length > 0) {
+      const p = ls[ls.length - 1].split('_')
+      if (p.length === 3) {
+        const p0 = parseInt(p[0])
+        const p1 = parseInt(p[1])
+        if (p0 && p1) {
+          wPH = p0 / p1
+        }
       } else {
-        clearTimeout(this.time_id)
-        this.time_id = setTimeout(() => {
-          this.activate()
-        }, 100)
+        wPH = 1
       }
+    }
+  }
 
+  if (wPH) {
+    if (res.width !== 0 && res.height === 0) {
+      res.height = parseInt(res.width / wPH)
     }
-  },
-  beforeUnmount() {
-    clearTimeout(this.time_id)
+    if (res.width === 0 && res.height !== 0) {
+      res.width = parseInt(res.height * wPH)
+    }
+  }
+
+  if (res.width !== 0 || res.height !== 0) {
+    set_srcset(res.width / res.height)
+    size.value = res
+    return size.value
+  }
+
+  if (rImg.value && rImg.value.parentElement && rImg.value.parentElement.clientWidth > 0) {
+    const cs = window.getComputedStyle(rImg.value.parentElement)
+    const paddingX = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight)
+    const borderX = parseFloat(cs.borderLeftWidth) + parseFloat(cs.borderRightWidth)
+    const w = parseInt(parseFloat(cs.getPropertyValue('width')) - paddingX - borderX)
+    set_srcset(wPH)
+    size.value = {
+      width: w,
+      height: parseInt(wPH ? w / wPH : 0)
+    }
+    return size.value
+  }
+
+  return false
+}
+
+const activate = () => {
+  getSize()
+  if (size.value.width !== 0 || size.value.height) {
+    load.value = true
+  } else {
+    nextTick(() => {
+      activate()
+    })
   }
 }
+
+onMounted(() => {
+  nextTick(() => {
+    activate()
+  })
+})
+
 </script>
+
 <style lang="scss">
 @use "sass:map";
-@use "../../style/variables/base";
+@use "../../style" as *;
 
-.#{base.$prefix}img {
+.#{$prefix}img {
   position: relative;
   display: inline-flex;
   max-width: 100%;
@@ -225,18 +325,20 @@ export default {
     left: 0;
     max-width: 0;
     overflow: hidden;
+    width: 100%;
+    height: 100%;
   }
 }
 
-.#{base.$prefix}img-preview-container {
+.#{$prefix}img-preview-container {
   width: 100vw;
-  height: 100vh;
+  height: 100%;
   overflow: hidden;
   position: fixed;
   touch-action: none;
   background: var(--color-overlay);
   backdrop-filter: blur(3px) grayscale(30%);
-  z-index: map.get(base.$z-index, 'important');
+  z-index: map.get($z-index, 'veryImportant');
   top: 0;
   left: 0;