Merge pull request #105 from XiongAmao/bug-fix

v1.8.1

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## [1.8.1] (29 August 2022)
+
+- Fix(composables): `show()` accept wrong param when use in vue template. #104
+
 ## [1.8.0] (12 August 2022)
 
 - Feat: Add `maxZoom` `zoomScale` to specify the zoom level.

README.md

@@ -371,9 +371,9 @@ export declare const useEasyLightbox: (options: UseEasyLightboxOptions) => {
   imgsRef: Ref<Img | string | (Img | string)[]>;
   indexRef: Ref<number | undefined>;
   visibleRef: Ref<boolean>;
-  show: (index?: number | undefined) => void;
+  show: (index?: Ref<number> | number | Event) => void;
   onHide: () => void;
-  changeIndex: (index?: number | undefined) => void;
+  changeIndex: (index?: number) => void;
 };
 ```
 

docs/docs/guide/readme.md

@@ -369,9 +369,9 @@ export declare const useEasyLightbox: (options: UseEasyLightboxOptions) => {
   imgsRef: Ref<Img | string | (Img | string)[]>;
   indexRef: Ref<number | undefined>;
   visibleRef: Ref<boolean>;
-  show: (index?: number | undefined) => void;
+  show: (index?: Ref<number> | number | Event) => void;
   onHide: () => void;
-  changeIndex: (index?: number | undefined) => void;
+  changeIndex: (index?: number) => void;
 };
 ```
 

docs/docs/pt-BR/guide/readme.md

@@ -371,9 +371,9 @@ export declare const useEasyLightbox: (options: UseEasyLightboxOptions) => {
   imgsRef: Ref<Img | string | (Img | string)[]>;
   indexRef: Ref<number | undefined>;
   visibleRef: Ref<boolean>;
-  show: (index?: number | undefined) => void;
+  show: (index?: Ref<number> | number | Event) => void;
   onHide: () => void;
-  changeIndex: (index?: number | undefined) => void;
+  changeIndex: (index?: number) => void;
 };
 ```
 

docs/docs/zh/guide/readme.md

@@ -369,9 +369,9 @@ export declare const useEasyLightbox: (options: UseEasyLightboxOptions) => {
   imgsRef: Ref<Img | string | (Img | string)[]>;
   indexRef: Ref<number | undefined>;
   visibleRef: Ref<boolean>;
-  show: (index?: number | undefined) => void;
+  show: (index?: Ref<number> | number | Event) => void;
   onHide: () => void;
-  changeIndex: (index?: number | undefined) => void;
+  changeIndex: (index?: number) => void;
 };
 ```
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-easy-lightbox",
-  "version": "1.8.0",
+  "version": "1.8.1",
   "description": "A Vue.js 3.0 image lightbox component with Zoom / Drag / Rotate / Switch",
   "keywords": [
     "vue",

src/composables/index.ts

@@ -1,4 +1,4 @@
-import { ref } from 'vue'
+import { isRef, Ref, ref } from 'vue'
 import type { PropsImgs } from '../types'
 
 export interface UseEasyLightboxOptions {
@@ -24,8 +24,16 @@ export const useEasyLightbox = (
   const indexRef = ref(initIndex)
   const visibleRef = ref(false)
 
-  const show = (index = indexRef.value) => {
-    changeIndex(index)
+  const show = (index: Ref<number> | number | Event = indexRef.value) => {
+    if (typeof index === 'number') {
+      changeIndex(index)
+    } else if (isRef(index) && typeof index.value === 'number') {
+      changeIndex(index.value)
+    } else if (index instanceof Event) {
+      // when pass `show()` directly to `@click` in vue template
+      // e.g. @click="show"
+      changeIndex(indexRef.value)
+    }
     visibleRef.value = true
   }
   const changeIndex = (index = indexRef.value) => {

src/dev-entry/AppScriptSetup.vue

@@ -0,0 +1,62 @@
+<template>
+  <div>
+    <button @click="showSingle">Show single picture.</button>
+    <button @click="showMultiple">Show a group of pictures.</button>
+    <br />
+    <button @click="test">test1</button>
+    <button @click="test2">test2</button>
+    <button @click="show">test show</button>
+
+    <vue-easy-lightbox
+      :visible="visibleRef"
+      :imgs="imgsRef"
+      :index="indexRef"
+      @hide="onHide"
+      @on-index-change="onIndexChange"
+    ></vue-easy-lightbox>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { isReactive, ref } from 'vue'
+import { useEasyLightbox } from '../composables'
+
+const imgList = ref([
+  'http://via.placeholder.com/350x150',
+  'http://via.placeholder.com/250x150'
+])
+
+const { visibleRef, indexRef, imgsRef, show, changeIndex, onHide } =
+  useEasyLightbox({
+    imgs: imgList.value,
+    initIndex: 0
+  })
+
+const test = () => {
+  console.log(isReactive(imgList.value))
+  console.log(imgList.value)
+  show()
+}
+const test2 = () => {
+  imgList.value.push('http://via.placeholder.com/250x150')
+  show()
+}
+
+const showSingle = () => {
+  imgsRef.value = 'http://it-does-not-matter.png/'
+  show()
+}
+const showMultiple = () => {
+  imgsRef.value = [
+    'http://via.placeholder.com/350x150',
+    'http://via.placeholder.com/350x150'
+  ]
+  changeIndex()
+  show()
+}
+const showImg = () => show()
+
+const onIndexChange = (old: number, newN: number) => {
+  console.log(old, newN)
+}
+</script>

src/dev-entry/AppSetup.vue

@@ -5,6 +5,7 @@
     <br />
     <button @click="test">test1</button>
     <button @click="test2">test2</button>
+    <button @click="show">test show</button>
 
     <vue-easy-lightbox
       :visible="visibleRef"
@@ -73,7 +74,8 @@ export default defineComponent({
       onHide,
       test,
       test2,
-      onIndexChange
+      onIndexChange,
+      show
     }
   }
 })