nexa-ui-kit 0.7.0 → 0.7.1

package/dist/components/NImage.js

@@ -1,7 +1,7 @@
 import { signal, computed, onMounted, onUnmounted, h, hText, effect, defineComponent, registerComponent, reloadComponent, injectStyle } from 'nexa-framework'
 
 const _sfc_main = defineComponent({
-  __scopeId: 'data-v-1f83e1a6',
+  __scopeId: 'data-v-309b6eb8',
   __hmrId: 'NImage_nexa',
   props: {
   src: { type: String, required: true },
@@ -20,7 +20,7 @@ const _sfc_main = defineComponent({
     const error = signal(false)
     const visible = signal(!props.lazy)
     let observer = null
-    let imgRef = null
+    const imgRef = signal(null)
     const currentSrc = computed(() => {
       if (error.value && props.fallback) return props.fallback
       return props.src
@@ -41,6 +41,10 @@ const _sfc_main = defineComponent({
       opacity: loaded.value ? '1' : '0',
       filter: (props.blur && !loaded.value) ? 'blur(8px)' : 'none'
     }))
+    const setRef = (el) => {
+      imgRef.value = el
+      if (observer && el) observer.observe(el)
+    }
     onMounted(() => {
       if (!props.lazy) return
       observer = new IntersectionObserver(entries => {
@@ -49,36 +53,36 @@ const _sfc_main = defineComponent({
           observer?.disconnect()
         }
       }, { rootMargin: '200px' })
-      if (imgRef) observer.observe(imgRef)
+      if (imgRef.value) observer.observe(imgRef.value)
     })
     onUnmounted(() => {
       observer?.disconnect()
     })
-    const onLoad = () => { console.log('ON_LOAD_CALLED'); loaded.value = true }
-    const onError = () => { console.log('ON_ERROR_CALLED'); error.value = true; loaded.value = true }
-    return { loaded, error, visible, observer, imgRef, currentSrc, wrapperStyle, imgStyle, onLoad, onError, $slots }
+    const onLoad = () => { loaded.value = true }
+    const onError = () => { error.value = true; loaded.value = true }
+    return { loaded, error, visible, observer, imgRef, currentSrc, wrapperStyle, imgStyle, setRef, onLoad, onError, $slots }
   }
 })
 // Injected render function
 _sfc_main.render = function(ctx) {
-  const { loaded, error, visible, observer, imgRef, currentSrc, wrapperStyle, imgStyle, onLoad, onError, $slots, src, alt, fallback, fit, lazy, width, height, rounded, blur, Fragment: _ntc_Fragment } = ctx
-    return h('span', { class: "n-image-wrapper", style: wrapperStyle.value, ref: el => imgRef = el, "data-v-1f83e1a6": "" }, [
+  const { loaded, error, visible, observer, imgRef, currentSrc, wrapperStyle, imgStyle, setRef, onLoad, onError, $slots, src, alt, fallback, fit, lazy, width, height, rounded, blur, Fragment: _ntc_Fragment } = ctx
+    return h('span', { class: "n-image-wrapper", style: wrapperStyle.value, ref: setRef, "data-v-309b6eb8": "" }, [
         "\n    ",
-        (!loaded.value) ? h('span', { class: "n-image-skeleton", "data-v-1f83e1a6": "" }) : null,
-        (visible.value) ? h('img', { class: "n-image", src: currentSrc.value, alt: alt, style: { width: '100%', height: '100%', objectFit: fit, transition: 'opacity 0.3s ease, filter 0.4s ease', opacity: loaded.value ? '1' : '0', filter: (blur && !loaded.value) ? 'blur(8px)' : 'none' }, onLoad: onLoad, onError: onError, "data-v-1f83e1a6": "" }) : null
+        (!loaded.value) ? h('span', { class: "n-image-skeleton", "data-v-309b6eb8": "" }) : null,
+        (visible.value) ? h('img', { class: "n-image", src: currentSrc.value, alt: alt, style: imgStyle.value, onLoad: onLoad, onError: onError, "data-v-309b6eb8": "" }) : null
       ])
 }
-_sfc_main.__scopeId = 'data-v-1f83e1a6'
+_sfc_main.__scopeId = 'data-v-309b6eb8'
 _sfc_main.__hmrId = 'NImage_nexa'
 
 export default _sfc_main
 
-const __style = `.n-image-wrapper[data-v-1f83e1a6]{
+const __style = `.n-image-wrapper[data-v-309b6eb8]{
   background: var(--n-color-surface-hover, #1a1a2e);
   display: inline-block;
 }
 
-.n-image-skeleton[data-v-1f83e1a6]{
+.n-image-skeleton[data-v-309b6eb8]{
   position: absolute;
   inset: 0;
   background: linear-gradient(
@@ -92,13 +96,13 @@ const __style = `.n-image-wrapper[data-v-1f83e1a6]{
 }
 
 @keyframes n-img-shimmer {
-0%[data-v-1f83e1a6]{ background-position: 200% 0; }
-100%[data-v-1f83e1a6]{ background-position: -200% 0; }
+0%[data-v-309b6eb8]{ background-position: 200% 0; }
+100%[data-v-309b6eb8]{ background-position: -200% 0; }
 }
 
-.n-image[data-v-1f83e1a6]{
+.n-image[data-v-309b6eb8]{
   display: block;
   position: relative;
   z-index: 1;
 }`
-injectStyle('data-v-1f83e1a6', __style)
+injectStyle('data-v-309b6eb8', __style)

package/dist/components/NImage.nexa

@@ -17,7 +17,7 @@ const loaded = signal(false)
 const error = signal(false)
 const visible = signal(!props.lazy)
 let observer = null
-let imgRef = null
+const imgRef = signal(null)
 
 const currentSrc = computed(() => {
   if (error.value && props.fallback) return props.fallback
@@ -42,6 +42,11 @@ const imgStyle = computed(() => ({
   filter: (props.blur && !loaded.value) ? 'blur(8px)' : 'none'
 }))
 
+const setRef = (el) => {
+  imgRef.value = el
+  if (observer && el) observer.observe(el)
+}
+
 onMounted(() => {
   if (!props.lazy) return
   observer = new IntersectionObserver(entries => {
@@ -50,29 +55,29 @@ onMounted(() => {
       observer?.disconnect()
     }
   }, { rootMargin: '200px' })
-  if (imgRef) observer.observe(imgRef)
+  if (imgRef.value) observer.observe(imgRef.value)
 })
 
 onUnmounted(() => {
   observer?.disconnect()
 })
 
-const onLoad = () => { console.log('ON_LOAD_CALLED'); loaded.value = true }
-const onError = () => { console.log('ON_ERROR_CALLED'); error.value = true; loaded.value = true }
+const onLoad = () => { loaded.value = true }
+const onError = () => { error.value = true; loaded.value = true }
 </script>
 
 <template>
   <span
     class="n-image-wrapper"
     :style="wrapperStyle.value"
-    :ref="el => imgRef = el"
+    :ref="setRef"
   >
     <span v-if="!loaded.value" class="n-image-skeleton" />
     <img
       v-if="visible.value"
       :src="currentSrc.value"
       :alt="alt"
-      :style="{ width: '100%', height: '100%', objectFit: fit, transition: 'opacity 0.3s ease, filter 0.4s ease', opacity: loaded.value ? '1' : '0', filter: (blur && !loaded.value) ? 'blur(8px)' : 'none' }"
+      :style="imgStyle.value"
       class="n-image"
       @load="onLoad"
       @error="onError"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nexa-ui-kit",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "description": "Premium component library for Nexa Framework",
   "type": "module",
   "main": "./dist/index.js",
@@ -18,12 +18,12 @@
     "src"
   ],
   "dependencies": {
-    "nexa-framework": "0.7.0",
-    "nexa-mobile": "0.7.0"
+    "nexa-framework": "0.7.1",
+    "nexa-mobile": "0.7.1"
   },
   "devDependencies": {
     "cpx": "^1.5.0",
-    "nexa-compiler": "0.7.0"
+    "nexa-compiler": "0.7.1"
   },
   "scripts": {
     "build": "tsc && node scripts/compile-nexa.js && node scripts/patch-imports.js && cpx \"src/**/*.nexa\" dist",

package/src/components/NImage.nexa

@@ -17,7 +17,7 @@ const loaded = signal(false)
 const error = signal(false)
 const visible = signal(!props.lazy)
 let observer = null
-let imgRef = null
+const imgRef = signal(null)
 
 const currentSrc = computed(() => {
   if (error.value && props.fallback) return props.fallback
@@ -42,6 +42,11 @@ const imgStyle = computed(() => ({
   filter: (props.blur && !loaded.value) ? 'blur(8px)' : 'none'
 }))
 
+const setRef = (el) => {
+  imgRef.value = el
+  if (observer && el) observer.observe(el)
+}
+
 onMounted(() => {
   if (!props.lazy) return
   observer = new IntersectionObserver(entries => {
@@ -50,29 +55,29 @@ onMounted(() => {
       observer?.disconnect()
     }
   }, { rootMargin: '200px' })
-  if (imgRef) observer.observe(imgRef)
+  if (imgRef.value) observer.observe(imgRef.value)
 })
 
 onUnmounted(() => {
   observer?.disconnect()
 })
 
-const onLoad = () => { console.log('ON_LOAD_CALLED'); loaded.value = true }
-const onError = () => { console.log('ON_ERROR_CALLED'); error.value = true; loaded.value = true }
+const onLoad = () => { loaded.value = true }
+const onError = () => { error.value = true; loaded.value = true }
 </script>
 
 <template>
   <span
     class="n-image-wrapper"
     :style="wrapperStyle.value"
-    :ref="el => imgRef = el"
+    :ref="setRef"
   >
     <span v-if="!loaded.value" class="n-image-skeleton" />
     <img
       v-if="visible.value"
       :src="currentSrc.value"
       :alt="alt"
-      :style="{ width: '100%', height: '100%', objectFit: fit, transition: 'opacity 0.3s ease, filter 0.4s ease', opacity: loaded.value ? '1' : '0', filter: (blur && !loaded.value) ? 'blur(8px)' : 'none' }"
+      :style="imgStyle.value"
       class="n-image"
       @load="onLoad"
       @error="onError"