Merge pull request #100 from XiongAmao/dev

v1.7.0

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## [1.7.0] (18 July 2022)
+
+- Feat: Add composable `useEasyLightbox()` for `setup()`.
+
 ## [1.6.0] (15 July 2022)
 
 - Breaking Change: `ES5` bundles is removed.

README-CN.md

@@ -287,6 +287,95 @@ export default defineComponent({
 
 参考：[插槽 - Vue.js](https://staging-cn.vuejs.org/guide/components/slots.html)
 
+### 组合式函数 Composables
+
+> Added in `v1.7.0`
+
+`useEasyLightbox` 提供了一些简单的方法和state，方便你使用`setup()`。
+这个composable是可选的。你可以自定义自己的状态和方法。
+
+Usage:
+
+```html
+<template>
+  <div>
+    <button @click="show">show</button>
+    <vue-easy-lightbox
+      :visible="visibleRef"
+      :imgs="imgsRef"
+      :index="indexRef"
+      @hide="onHide"
+    />
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+import VueEasyLightbox, { useEasyLightbox } from 'vue-easy-lightbox'
+
+export default defineComponent({
+  components: {
+    VueEasyLightbox
+  },
+  setup() {
+    const {
+      // methods
+      show, onHide, changeIndex,
+      // refs
+      visibleRef, indexRef, imgsRef
+    } = useEasyLightbox({
+      // src / src[]
+      imgs: [
+        'http://via.placeholder.com/250x150',
+        'http://via.placeholder.com/300x150',
+        'http://via.placeholder.com/350x150'
+      ],
+      // initial index
+      initIndex: 0
+    })
+
+    return {
+      visibleRef,
+      indexRef,
+      imgsRef,
+      show,
+      onHide
+    }
+  }
+})
+</script>
+```
+
+#### Type declaration
+
+```ts
+export interface Img {
+  src?: string
+  title?: string
+  alt?: string
+}
+export interface UseEasyLightboxOptions {
+  /**
+   * image src/Img or list of images src/Img
+   * @default ''
+   */
+  imgs: Img | string | (Img | string)[];
+  /**
+   * initial index of imgList
+   * @default 0
+   */
+  initIndex?: number;
+}
+export declare const useEasyLightbox: (options: UseEasyLightboxOptions) => {
+  imgsRef: Ref<Img | string | (Img | string)[]>;
+  indexRef: Ref<number | undefined>;
+  visibleRef: Ref<boolean>;
+  show: (index?: number | undefined) => void;
+  onHide: () => void;
+  changeIndex: (index?: number | undefined) => void;
+};
+```
+
 ## 配置项
 
 Props

README.md

@@ -288,6 +288,96 @@ export default defineComponent({
 
 Reference: [Slots](https://vuejs.org/guide/components/slots.html)
 
+### Composables
+
+> Added in `v1.7.0`
+
+`useEasyLightbox` provides some simple methods and states to help you use `setup()`.
+It is optional. You can customize your state.
+
+Usage:
+
+```html
+<template>
+  <div>
+    <button @click="show">show</button>
+    <vue-easy-lightbox
+      :visible="visibleRef"
+      :imgs="imgsRef"
+      :index="indexRef"
+      @hide="onHide"
+    />
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+import VueEasyLightbox, { useEasyLightbox } from 'vue-easy-lightbox'
+
+export default defineComponent({
+  components: {
+    VueEasyLightbox
+  },
+  setup() {
+    const {
+      // methods
+      show, onHide, changeIndex,
+      // refs
+      visibleRef, indexRef, imgsRef
+    } = useEasyLightbox({
+      // src / src[]
+      imgs: [
+        'http://via.placeholder.com/250x150',
+        'http://via.placeholder.com/300x150',
+        'http://via.placeholder.com/350x150'
+      ],
+      // initial index
+      initIndex: 0
+    })
+
+    return {
+      visibleRef,
+      indexRef,
+      imgsRef,
+      show,
+      onHide
+    }
+  }
+})
+</script>
+```
+
+#### Type declaration
+
+```ts
+export interface Img {
+  src?: string
+  title?: string
+  alt?: string
+}
+export interface UseEasyLightboxOptions {
+  /**
+   * image src/Img or list of images src/Img
+   * @default ''
+   */
+  imgs: Img | string | (Img | string)[];
+  /**
+   * initial index of imgList
+   * @default 0
+   */
+  initIndex?: number;
+}
+export declare const useEasyLightbox: (options: UseEasyLightboxOptions) => {
+  imgsRef: Ref<Img | string | (Img | string)[]>;
+  indexRef: Ref<number | undefined>;
+  visibleRef: Ref<boolean>;
+  show: (index?: number | undefined) => void;
+  onHide: () => void;
+  changeIndex: (index?: number | undefined) => void;
+};
+```
+
+
 ## Options
 
 Props

build-scripts/gen-types.js

@@ -6,3 +6,4 @@ const resolveTypesPath = (...paths) => path.resolve(__dirname, '../types', ...pa
 
 // remove useless types
 fs.rm(resolveTypesPath('./dev-entry'), { recursive: true })
+fs.rm(resolveTypesPath('./index.umd.d.ts'))

build-scripts/rollup.config.js

@@ -79,6 +79,7 @@ const configs = builds.map((buildType) => {
     external: ['vue']
   }
   if (config.output.format === 'umd') {
+    config.input = 'src/index.umd.ts'
     config.output.name = Case.pascal(libraryName)
     config.output.globals = { vue: 'Vue' }
     config.output.exports = 'default'

docs/docs/guide/readme.md

@@ -286,6 +286,95 @@ export default defineComponent({
 
 Reference: [Slots-Vue.js](https://vuejs.org/guide/components/slots.html)
 
+### Composables
+
+> Added in `v1.7.0`
+
+`useEasyLightbox()` provides some simple methods and states to help you use `setup()`.
+It is optional. You can customize your state.
+
+Usage:
+
+```html
+<template>
+  <div>
+    <button @click="show">show</button>
+    <vue-easy-lightbox
+      :visible="visibleRef"
+      :imgs="imgsRef"
+      :index="indexRef"
+      @hide="onHide"
+    />
+  </div>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+import VueEasyLightbox, { useEasyLightbox } from 'vue-easy-lightbox'
+
+export default defineComponent({
+  components: {
+    VueEasyLightbox
+  },
+  setup() {
+    const {
+      // methods
+      show, onHide, changeIndex,
+      // refs
+      visibleRef, indexRef, imgsRef
+    } = useEasyLightbox({
+      // src / src[]
+      imgs: [
+        'http://via.placeholder.com/250x150',
+        'http://via.placeholder.com/300x150',
+        'http://via.placeholder.com/350x150'
+      ],
+      // initial index
+      initIndex: 0
+    })
+
+    return {
+      visibleRef,
+      indexRef,
+      imgsRef,
+      show,
+      onHide
+    }
+  }
+})
+</script>
+```
+
+#### Type declaration
+
+```ts
+export interface Img {
+  src?: string
+  title?: string
+  alt?: string
+}
+export interface UseEasyLightboxOptions {
+  /**
+   * image src/Img or list of images src/Img
+   * @default ''
+   */
+  imgs: Img | string | (Img | string)[];
+  /**
+   * initial index of imgList
+   * @default 0
+   */
+  initIndex?: number;
+}
+export declare const useEasyLightbox: (options: UseEasyLightboxOptions) => {
+  imgsRef: Ref<Img | string | (Img | string)[]>;
+  indexRef: Ref<number | undefined>;
+  visibleRef: Ref<boolean>;
+  show: (index?: number | undefined) => void;
+  onHide: () => void;
+  changeIndex: (index?: number | undefined) => void;
+};
+```
+
 ## Options
 
 ### Props