@vue-lynx-example/gallery 0.1.1

package/src/GalleryScrollbarCompare/Gallery.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { ref, onMounted, nextTick, useMainThreadRef, useTemplateRef } from 'vue-lynx';
+import type { ShadowElement } from 'vue-lynx';
+
+import { furnituresPictures } from '../Pictures/furnituresPictures';
+import { calculateEstimatedSize } from '../utils';
+
+import LikeImageCard from '../Components/LikeImageCard.vue';
+import NiceScrollbar from './NiceScrollbar.vue';
+import NiceScrollbarMTS from './NiceScrollbarMTS.vue';
+
+declare const SystemInfo: { pixelHeight: number; pixelRatio: number };
+
+const scrollbarRef = ref<InstanceType<typeof NiceScrollbar> | null>(null);
+const scrollbarThumbRef = useMainThreadRef(null);
+const listRef = useTemplateRef<ShadowElement>('listRef');
+
+// BTS scroll handler
+function onScroll(event: { detail?: { scrollTop?: number; scrollHeight?: number } }) {
+  const scrollTop = event.detail?.scrollTop ?? 0;
+  const scrollHeight = event.detail?.scrollHeight ?? 0;
+  scrollbarRef.value?.adjustScrollbar(scrollTop, scrollHeight);
+}
+
+// MTS scrollbar adjuster — runs directly on Main Thread (no -48 offset, full height)
+function adjustScrollbarCompare(
+  scrollTop: number,
+  scrollHeight: number,
+  ref: { current?: { setStyleProperty?(k: string, v: string): void } },
+) {
+  'main thread';
+  const listHeight = SystemInfo.pixelHeight / SystemInfo.pixelRatio;
+  const scrollbarHeight = listHeight * (listHeight / scrollHeight);
+  const scrollbarTop = listHeight * (scrollTop / scrollHeight);
+  ref.current?.setStyleProperty?.('height', `${scrollbarHeight}px`);
+  ref.current?.setStyleProperty?.('top', `${scrollbarTop}px`);
+}
+
+const onScrollMTS = (event: { detail: { scrollTop: number; scrollHeight: number } }) => {
+  'main thread';
+  adjustScrollbarCompare(event.detail.scrollTop, event.detail.scrollHeight, scrollbarThumbRef);
+};
+
+onMounted(() => {
+  nextTick(() => {
+    listRef.value
+      ?.invoke({
+        method: 'autoScroll',
+        params: { rate: '60', start: 'true' },
+      })
+      .exec();
+  });
+});
+</script>
+
+<template>
+  <view class="gallery-wrapper">
+    <NiceScrollbar ref="scrollbarRef" />
+    <NiceScrollbarMTS :thumb-ref="scrollbarThumbRef" />
+    <list
+      ref="listRef"
+      class="list"
+      list-type="waterfall"
+      :column-count="2"
+      scroll-orientation="vertical"
+      @scroll="onScroll"
+      :main-thread-bindscroll="onScrollMTS"
+      :scroll-event-throttle="0"
+    >
+      <list-item
+        v-for="(pic, i) in furnituresPictures"
+        :key="i"
+        :item-key="String(i)"
+        :estimated-main-axis-size-px="calculateEstimatedSize(pic.width, pic.height)"
+      >
+        <LikeImageCard :picture="pic" />
+      </list-item>
+    </list>
+  </view>
+</template>

package/src/GalleryScrollbarCompare/NiceScrollbar.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { ref } from 'vue-lynx';
+
+declare const SystemInfo: { pixelHeight: number; pixelRatio: number };
+
+const scrollbarHeight = ref(0);
+const scrollbarTop = ref(0);
+
+function adjustScrollbar(scrollTop: number, scrollHeight: number) {
+  const listHeight = SystemInfo.pixelHeight / SystemInfo.pixelRatio;
+  scrollbarHeight.value = listHeight * (listHeight / scrollHeight);
+  scrollbarTop.value = listHeight * (scrollTop / scrollHeight);
+}
+
+defineExpose({ adjustScrollbar });
+</script>
+
+<template>
+  <view
+    class="scrollbar"
+    :style="{ right: '3px', height: scrollbarHeight + 'px', top: scrollbarTop + 'px' }"
+  >
+    <view class="scrollbar-effect glow" />
+  </view>
+</template>

package/src/GalleryScrollbarCompare/NiceScrollbarMTS.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { MainThreadRef } from 'vue-lynx';
+
+defineProps<{
+  thumbRef: MainThreadRef;
+}>();
+</script>
+
+<template>
+  <view
+    class="scrollbar"
+    :main-thread-ref="thumbRef"
+    :style="{
+      right: '14px',
+      backgroundColor: 'darkkhaki',
+      height: '60px',
+      top: '0px',
+    }"
+  >
+    <view class="scrollbar-effect glow" />
+  </view>
+</template>

package/src/GalleryScrollbarCompare/index.ts

@@ -0,0 +1,7 @@
+import '../gallery.css';
+import { createApp } from 'vue-lynx';
+
+import Gallery from './Gallery.vue';
+
+const app = createApp(Gallery);
+app.mount();

package/src/ImageCard/ImageCard.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { Picture } from '../Pictures/furnituresPictures';
+
+defineProps<{
+  picture: Picture;
+}>();
+</script>
+
+<template>
+  <view class="picture-wrapper">
+    <image
+      :style="{ width: '100%', aspectRatio: picture.width / picture.height }"
+      :src="picture.src"
+    />
+  </view>
+</template>

package/src/ImageCard/index.ts

@@ -0,0 +1,21 @@
+import '../gallery.css';
+import { createApp, defineComponent, h } from 'vue-lynx';
+
+import ImageCard from './ImageCard.vue';
+import { furnituresPicturesSubArray } from '../Pictures/furnituresPictures.js';
+
+// Wrapper that displays a single image card centered on screen
+const App = defineComponent({
+  setup() {
+    const picture = furnituresPicturesSubArray[0]!;
+    return () =>
+      h(
+        'view',
+        { class: 'gallery-wrapper single-card' },
+        [h(ImageCard, { picture })],
+      );
+  },
+});
+
+const app = createApp(App);
+app.mount();

package/src/LikeCard/index.ts

@@ -0,0 +1,21 @@
+import '../gallery.css';
+import { createApp, defineComponent, h } from 'vue-lynx';
+
+import LikeImageCard from '../Components/LikeImageCard.vue';
+import { furnituresPicturesSubArray } from '../Pictures/furnituresPictures.js';
+
+// Wrapper that displays a single like-able image card centered on screen
+const App = defineComponent({
+  setup() {
+    const picture = furnituresPicturesSubArray[0]!;
+    return () =>
+      h(
+        'view',
+        { class: 'gallery-wrapper single-card' },
+        [h(LikeImageCard, { picture })],
+      );
+  },
+});
+
+const app = createApp(App);
+app.mount();

package/src/Pictures/furnituresPictures.ts

@@ -0,0 +1,47 @@
+import pic0 from './furnitures/0.png';
+import pic1 from './furnitures/1.png';
+import pic10 from './furnitures/10.png';
+import pic11 from './furnitures/11.png';
+import pic12 from './furnitures/12.png';
+import pic13 from './furnitures/13.png';
+import pic14 from './furnitures/14.png';
+import pic2 from './furnitures/2.png';
+import pic3 from './furnitures/3.png';
+import pic4 from './furnitures/4.png';
+import pic5 from './furnitures/5.png';
+import pic6 from './furnitures/6.png';
+import pic7 from './furnitures/7.png';
+import pic8 from './furnitures/8.png';
+import pic9 from './furnitures/9.png';
+
+export interface Picture {
+  src: string;
+  width: number;
+  height: number;
+}
+
+export const furnituresPicturesSubArray: Picture[] = [
+  { src: pic0, width: 512, height: 429 },
+  { src: pic1, width: 511, height: 437 },
+  { src: pic2, width: 1024, height: 1589 },
+  { src: pic3, width: 510, height: 418 },
+  { src: pic4, width: 509, height: 438 },
+  { src: pic5, width: 1024, height: 1557 },
+  { src: pic6, width: 509, height: 415 },
+  { src: pic7, width: 509, height: 426 },
+  { src: pic8, width: 1024, height: 1544 },
+  { src: pic9, width: 510, height: 432 },
+  { src: pic10, width: 1024, height: 1467 },
+  { src: pic11, width: 1024, height: 1545 },
+  { src: pic12, width: 512, height: 416 },
+  { src: pic13, width: 1024, height: 1509 },
+  { src: pic14, width: 512, height: 411 },
+];
+
+export const furnituresPictures: Picture[] = [
+  ...furnituresPicturesSubArray,
+  ...furnituresPicturesSubArray,
+  ...furnituresPicturesSubArray,
+  ...furnituresPicturesSubArray,
+  ...furnituresPicturesSubArray,
+];

package/src/gallery.css

@@ -0,0 +1,129 @@
+/*
+ * Gallery CSS for Lynx
+ *
+ * Styles matching React Gallery original (lynx-examples/Gallery).
+ * Lynx constraints: no pseudo-elements, no :hover/:focus,
+ * class selectors + descendant combinators only.
+ */
+
+/* ─── Gallery Wrapper ─────────────────────────────────── */
+
+.gallery-wrapper {
+  height: 100%;
+  background-color: black;
+}
+
+.single-card {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* ─── Scrollbar ───────────────────────────────────────── */
+
+.scrollbar {
+  position: absolute;
+  right: 7px;
+  z-index: 1000;
+  width: 4px;
+  background: linear-gradient(to bottom, #ff6448, #ccddff, #3deae7);
+  border-radius: 5px;
+  overflow: hidden;
+  box-shadow:
+    0px 0px 4px 1px rgba(12, 205, 223, 0.4),
+    0px 0px 16px 5px rgba(12, 205, 223, 0.5);
+}
+
+.scrollbar-effect {
+  width: 100%;
+  height: 80%;
+}
+
+.glow {
+  background-color: #333;
+  border-radius: 4px;
+  background: linear-gradient(
+    45deg,
+    rgba(255, 255, 255, 0) 20%,
+    rgba(255, 255, 255, 0.8) 50%,
+    rgba(255, 255, 255, 0) 80%
+  );
+  animation: flow 3s linear infinite;
+}
+
+@keyframes flow {
+  0% {
+    transform: translateY(-100%);
+  }
+  100% {
+    transform: translateY(100%);
+  }
+}
+
+/* ─── List ────────────────────────────────────────────── */
+
+.list {
+  width: 100%;
+  padding-bottom: 20px;
+  padding-left: 20px;
+  padding-right: 20px;
+  height: calc(100% - 48px);
+  list-main-axis-gap: 10px;
+  list-cross-axis-gap: 10px;
+}
+
+/* ─── Image Card ──────────────────────────────────────── */
+
+.picture-wrapper {
+  border-radius: 10px;
+  overflow: hidden;
+  width: 100%;
+}
+
+/* ─── Like Icon ───────────────────────────────────────── */
+
+.like-icon {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  top: 0px;
+  right: 0px;
+  width: 48px;
+  height: 48px;
+}
+
+.heart-love {
+  width: 16px;
+  height: 16px;
+}
+
+/* ─── Ripple Animation ────────────────────────────────── */
+
+.circle {
+  position: absolute;
+  top: calc(50% - 8px);
+  left: calc(50% - 8px);
+  height: 16px;
+  width: 16px;
+  border: 2px solid red;
+  border-radius: 50%;
+  transform: scale(0);
+  opacity: 1;
+  animation: ripple 1s 1 ease-out;
+}
+
+.circleAfter {
+  animation-delay: 0.5s;
+}
+
+@keyframes ripple {
+  0% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}

package/src/shims-vue.d.ts

@@ -0,0 +1,11 @@
+declare module '*.vue' {
+  import type { Component } from 'vue-lynx';
+
+  const component: Component;
+  export default component;
+}
+
+declare module '*.png' {
+  const src: string;
+  export default src;
+}

package/src/utils.ts

@@ -0,0 +1,14 @@
+declare const SystemInfo: { pixelWidth: number; pixelRatio: number };
+
+export const calculateEstimatedSize = (
+  pictureWidth: number,
+  pictureHeight: number,
+): number => {
+  const galleryPadding = 20;
+  const galleryMainAxisGap = 10;
+  const gallerySpanCount = 2;
+  const galleryWidth = SystemInfo.pixelWidth / SystemInfo.pixelRatio;
+  const itemWidth = (galleryWidth - galleryPadding * 2 - galleryMainAxisGap)
+    / gallerySpanCount;
+  return (itemWidth / pictureWidth) * pictureHeight;
+};

package/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": ".",
+    "noEmit": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+  },
+  "include": ["src", "lynx.config.ts"],
+}