feat(omiu): lightbox 🎉

packages/omiu/README.md

@@ -4,4 +4,13 @@
 
 Coming soon...
 
-https://omi.cdn-go.cn/omiu/latest/
+https://omi.cdn-go.cn/omiu/latest/
+
+
+
+## Many thanks to
+
+* tw-elements
+* photo-swipe
+* swiper
+* pdfjs

packages/omiu/package.json

@@ -19,6 +19,7 @@
     "omi-router": "^4.1.1",
     "omi-suspense": "^0.0.5",
     "omi-transition": "^0.1.0",
+    "photoswipe": "^5.4.2",
     "prismjs": "^1.29.0",
     "swiper": "^11.0.4"
   },

packages/omiu/src/common/md.css

@@ -243,6 +243,10 @@ h2 {
   font-weight: 600;
 }
 
+h2:not(:first-child) {
+  margin-top: 2rem;
+}
+
 h3 {
   font-size: 1.2em;
 }

packages/omiu/src/components/lightbox/api.md

@@ -0,0 +1,7 @@
+## Lightbox Props
+
+Supports all PhotoSwipe properties [https://photoswipe.com/options/](https://photoswipe.com/options/)
+
+## Lightbox 属性
+
+支持所有 PhotoSwipe 的属性 [https://photoswipe.com/options/](https://photoswipe.com/options/)

packages/omiu/src/components/lightbox/api.tsx

@@ -0,0 +1,10 @@
+import content from './api.md?raw'
+import { tag, Component } from 'omi'
+import '../../common/markdown-renderer'
+
+@tag('lightbox-api')
+export class API extends Component {
+  render() {
+    return <markdown-renderer content={content}></markdown-renderer>
+  }
+}

packages/omiu/src/components/lightbox/index.tsx

@@ -0,0 +1,69 @@
+import { tag, Component, classNames } from 'omi'
+import { tailwind } from '@/tailwind'
+
+import PhotoSwipeLightbox from 'photoswipe/lightbox'
+// 插入到 head
+import 'photoswipe/style.css'
+
+@tag('o-lightbox')
+export class Button extends Component {
+  static css = [
+    tailwind,
+    `:host {
+  display: block;
+}`,
+  ]
+
+  static defaultProps = {
+    className: '',
+  }
+
+  installed() {
+    const slot = this.shadowRoot.querySelector('slot')
+
+    const gallery = slot.assignedNodes()[0]
+
+    // todo 按需加载？
+    // 加载所有 a 标签的 href 属性作为 img 的 src，然后获取 img 的 width 和 height 属性设置到 a 标签的  data-pswp-width 和 data-pswp-height
+    const anchors = gallery.querySelectorAll('a')
+    anchors.forEach((anchor) => {
+      const imgSrc = anchor.getAttribute('href')
+      const img = new Image()
+      img.src = imgSrc
+      img.onload = () => {
+        const width = img.width
+        const height = img.height
+        anchor.setAttribute('data-pswp-width', width)
+        anchor.setAttribute('data-pswp-height', height)
+      }
+    })
+
+    const { children, ...options } = this.props
+    // dom 会插入到 body，而不是 shadowRoot 内
+    const lightbox = new PhotoSwipeLightbox({
+      gallery: gallery,
+      children: 'a',
+      ...options,
+      pswpModule: () => import('photoswipe'),
+    })
+    lightbox.init()
+  }
+
+  render(props) {
+    return <slot></slot>
+  }
+}
+
+window.Omiu = window.Omiu || {}
+
+class Lightbox {
+  constructor(options) {
+    this.lightbox = new PhotoSwipeLightbox({
+      ...options,
+      pswpModule: () => import('photoswipe'),
+    })
+    lightbox.init()
+  }
+}
+
+Omiu.Lightbox = Lightbox

packages/omiu/src/components/lightbox/page.tsx

@@ -0,0 +1,109 @@
+import '@/site/code-showcase'
+
+import { tag, Component } from 'omi'
+import { tailwind } from '@/tailwind'
+
+import './index'
+
+@tag('lightbox-page')
+export class ButtonPage extends Component {
+  static css = [
+    tailwind,
+    `
+  o-button{ margin: 0.2em; }
+  code-showcase{ margin-bottom: 2em; }
+  `,
+  ]
+
+  render() {
+    return (
+      <div className="container my-12 !max-w-full mb-48">
+        {/* <!-- Section: Basic example --> */}
+        <section>
+          {/* <!-- Title --> */}
+          <h2 className="mb-5 mt-0 text-3xl font-semibold leading-normal" id="basic_example" data-te-spy-item>
+            Basic example
+          </h2>
+          {/* <!-- Description --> */}
+          <p className="mb-3">
+            An alert displays a short, important message in a way that attracts the user's attention without
+            interrupting the user's task.
+          </p>
+
+          <code-showcase
+            code={`<o-lightbox>
+  <div class="flex flex-col space-y-5 lg:flex-row lg:space-x-5 lg:space-y-0">
+    <div class="flex h-full w-full flex-1 flex-col">
+      <a
+        href="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp"
+        target="_blank"
+      >
+        <img
+          src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp"
+          alt="Table Full of Spices"
+          class="mb-5 w-full cursor-zoom-in data-[te-lightbox-disabled]:cursor-auto"
+        />
+      </a>
+
+      <a
+        href="https://mdbcdn.b-cdn.net/img/Photos/Square/1.webp"
+        target="_blank"
+      >
+        <img
+          src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Square/1.webp"
+          alt="Coconut with Strawberries"
+          class="w-full cursor-zoom-in data-[te-lightbox-disabled]:cursor-auto"
+        />
+      </a>
+    </div>
+    <div class="flex h-full w-full flex-1 flex-col">
+      <a
+        href="https://mdbcdn.b-cdn.net/img/Photos/Vertical/1.webp"
+        target="_blank"
+      >
+        <img
+          src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Vertical/1.webp"
+          alt="Dark Roast Iced Coffee"
+          class="w-full cursor-zoom-in data-[te-lightbox-disabled]:cursor-auto"
+        />
+      </a>
+    </div>
+  </div>
+</o-lightbox>`}
+          >
+            <o-lightbox>
+              <div class="flex flex-col space-y-5 lg:flex-row lg:space-x-5 lg:space-y-0">
+                <div class="flex h-full w-full flex-1 flex-col">
+                  <a href="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp" target="_blank">
+                    <img
+                      src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp"
+                      alt="Table Full of Spices"
+                      class="mb-5 w-full cursor-zoom-in data-[te-lightbox-disabled]:cursor-auto"
+                    />
+                  </a>
+
+                  <a href="https://mdbcdn.b-cdn.net/img/Photos/Square/1.webp" target="_blank">
+                    <img
+                      src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Square/1.webp"
+                      alt="Coconut with Strawberries"
+                      class="w-full cursor-zoom-in data-[te-lightbox-disabled]:cursor-auto"
+                    />
+                  </a>
+                </div>
+                <div class="flex h-full w-full flex-1 flex-col">
+                  <a href="https://mdbcdn.b-cdn.net/img/Photos/Vertical/1.webp" target="_blank">
+                    <img
+                      src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Vertical/1.webp"
+                      alt="Dark Roast Iced Coffee"
+                      class="w-full cursor-zoom-in data-[te-lightbox-disabled]:cursor-auto"
+                    />
+                  </a>
+                </div>
+              </div>
+            </o-lightbox>
+          </code-showcase>
+        </section>
+      </div>
+    )
+  }
+}

packages/omiu/src/pages.tsx

@@ -20,7 +20,7 @@ export const componentsPages: Pages[] = [
   { name: 'chip', path: '/components/chip' },
   { name: 'swiper', path: '/components/swiper' },
   { name: 'dropdown', path: '/components/dropdown' },
-  // { name: 'list-group', path: '/components/list-group' },
+  { name: 'lightbox', path: '/components/lightbox' },
   // { name: 'modal', path: '/components/modal' },
   // { name: 'paragraphs', path: '/components/paragraphs' },
   // { name: 'placeholders', path: '/components/placeholders' },

packages/omiu/src/routes.tsx

@@ -61,79 +61,85 @@ export const routes = [
 const components = [
   {
     name: 'accordion',
-    overview: () => import('./components/accordion/AccordionPage'),
-    api: () => import('./components/accordion/AccordionAPI'),
+    overview: () => import('./components/accordion/page'),
+    api: () => import('./components/accordion/api'),
   },
   {
     name: 'avatar',
-    overview: () => import('./components/avatar/AvatarPage'),
-    api: () => import('./components/avatar/AvatarAPI'),
+    overview: () => import('./components/avatar/page'),
+    api: () => import('./components/avatar/api'),
   },
   {
     name: 'alert',
-    overview: () => import('./components/alert/AlertPage'),
-    api: () => import('./components/alert/AlertAPI'),
+    overview: () => import('./components/alert/page'),
+    api: () => import('./components/alert/api'),
   },
   {
     name: 'badge',
-    overview: () => import('./components/badge/BadgePage'),
-    api: () => import('./components/badge/BadgeAPI'),
+    overview: () => import('./components/badge/page'),
+    api: () => import('./components/badge/api'),
   },
   {
     name: 'button',
-    overview: () => import('./components/button/ButtonPage'),
-    api: () => import('./components/button/ButtonAPI'),
+    overview: () => import('./components/button/page'),
+    api: () => import('./components/button/api'),
   },
   {
     name: 'button-group',
-    overview: () => import('./components/button-group/ButtonGroupPage'),
-    api: () => import('./components/button-group/ButtonGroupAPI'),
+    overview: () => import('./components/button-group/page'),
+    api: () => import('./components/button-group/api'),
   },
   {
     name: 'collapse',
-    overview: () => import('./components/collapse/CollapsePage'),
-    api: () => import('./components/collapse/CollapseAPI'),
+    overview: () => import('./components/collapse/page'),
+    api: () => import('./components/collapse/api'),
   },
   {
     name: 'card',
-    overview: () => import('./components/card/CardPage'),
-    api: () => import('./components/card/CardAPI'),
+    overview: () => import('./components/card/page'),
+    api: () => import('./components/card/api'),
   },
   {
     name: 'chip',
-    overview: () => import('./components/chip/ChipPage'),
-    api: () => import('./components/chip/ChipAPI'),
+    overview: () => import('./components/chip/page'),
+    api: () => import('./components/chip/api'),
   },
   {
     name: 'swiper',
-    overview: () => import('./components/swiper/SwiperPage'),
-    api: () => import('./components/swiper/SwiperAPI'),
+    overview: () => import('./components/swiper/page'),
+    api: () => import('./components/swiper/api'),
   },
 
   {
     name: 'dropdown',
-    overview: () => import('./components/dropdown/DropdownPage'),
-    api: () => import('./components/dropdown/DropdownAPI'),
+    overview: () => import('./components/dropdown/page'),
+    api: () => import('./components/dropdown/api'),
+  },
+
+  {
+    name: 'lightbox',
+    overview: () => import('./components/lightbox/page'),
+    api: () => import('./components/lightbox/api'),
   },
 
   {
     name: 'input',
-    overview: () => import('./forms/input/InputPage'),
-    api: () => import('./forms/input/InputAPI'),
+    overview: () => import('./forms/input/page'),
+    api: () => import('./forms/input/api'),
   },
 
   {
     name: 'tabs',
     type: 'navigation',
-    overview: () => import('./navigation/tabs/TabsPage'),
-    api: () => import('./navigation/tabs/TabsAPI'),
+    overview: () => import('./navigation/tabs/page'),
+    api: () => import('./navigation/tabs/api'),
   },
 
   {
     name: 'pdf',
     type: 'data',
-    overview: () => import('./data/pdf/PDFPage'),
-    api: () => import('./data/pdf/PDFAPI'),
+    overview: () => import('./data/pdf/page'),
+    api: () => import('./data/pdf/api'),
   },
 ]