Merge branch 'master' of github.com:9th-js/wcui

src/image/index.js

@@ -6,6 +6,7 @@
 
 import { css, html, Component, styleMap } from '@bd/core'
 import '../icon/index.js'
+import './preview.js'
 class Image extends Component {
   static props = {
     src: '',
@@ -55,6 +56,11 @@ class Image extends Component {
     this.status = 'loaded'
     this.$requestUpdate()
   }
+  onClick() {
+    if (this.previewSrcList.length) {
+      window.imagePreview(this.previewSrcList)
+    }
+  }
   render() {
     let {
       lazy,
@@ -62,10 +68,12 @@ class Image extends Component {
       status,
       fit,
       alt,
+      previewSrcList,
       'referrer-policy': referrerPolicy
     } = this
     let styles = styleMap({
-      'object-fit': fit
+      'object-fit': fit,
+      cursor: previewSrcList.length ? 'pointer' : 'default'
     })
     let $slot = ''
     if (status === 'loading') {
@@ -76,7 +84,7 @@ class Image extends Component {
       </slot>`
     }
     return html`
-      <div class="wc-image" ref="wrapper">
+      <div class="wc-image" ref="wrapper" @click=${this.onClick}>
         <img
           style=${styles}
           src=${src}

src/image/preview.js

@@ -14,8 +14,8 @@ class ImagePreview extends Component {
       attribute: false
     },
     visible: false,
-    maxZoom: 3,
-    minZoom: 1 / 3
+    'max-zoom': 3,
+    'min-zoom': 1 / 3
   }
   active = 0
   static styles = css`
@@ -129,7 +129,8 @@ class ImagePreview extends Component {
     this.setZoom(this.#state.scale / 1.2)
   }
   setZoom(val) {
-    const { maxZoom, minZoom } = this
+    const maxZoom = this['max-zoom']
+    const minZoom = this['min-zoom']
     val = Math.max(val, minZoom)
     val = Math.min(val, maxZoom)
     val = val.toFixed(2)
@@ -259,8 +260,12 @@ ImagePreview.reg('image-preview')
 const instance = new ImagePreview()
 document.body.appendChild(instance)
 
-window.imagePreview = function (list) {
-  instance.list = list
+window.imagePreview = function (options) {
+  if (Array.isArray(options)) {
+    instance.list = options
+  } else {
+    Object.assign(instance, options)
+  }
   instance.visible = true
   return instance
 }