@solar-taro/ui-sun 0.0.0

package/src/virtual-scroll/index.vue

@@ -0,0 +1,138 @@
+<template>
+  <scroll-view
+    v-bind="$attrs"
+    :id="id"
+    class="sun-virtual-scroll"
+    :refresher-enabled="refresher"
+    :refresher-triggered="refreshing"
+    :refresher-background="refresherBg"
+    :scroll-x="!isVertical"
+    :scroll-y="isVertical"
+    :enhanced="true"
+    :enable-passive="true"
+    :lower-threshold="300"
+    @scroll.passive="onScroll($event)"
+    @refresherrefresh="vibrator.short('light'); emit('refresh')"
+    @scrolltolower="emit('lower')">
+    <view class="sun-virtual-scroll-content-container" :style="contentContainerStyle">
+      <view
+        v-for="(item, index) in visibleItems"
+        :key="(item as any)[itemKey!] ?? index"
+        class="sun-virtual-scroll-item"
+        :style="itemStyle">
+        <slot :item="item" :index="index"></slot>
+      </view>
+    </view>
+
+    <view class="sun-virtual-scroll-spacer" :style="spacerStyle"></view>
+  </scroll-view>
+</template>
+
+<script lang="ts">
+let nextId = 1;
+</script>
+
+<script lang="ts" setup>
+import { withPixel } from '@solar-kit/core';
+import { rpxToPx, vibrator } from '@solar-taro/core';
+import { createSelectorQuery, NodesRef } from '@tarojs/taro';
+import { computed, CSSProperties, onMounted, ref } from 'vue';
+
+const emit = defineEmits<{
+  (e: 'refresh'): void;
+  (e: 'lower'): void;
+}>();
+
+const props = withDefaults(
+  defineProps<{
+    refreshing?: boolean;
+    refresher?: boolean;
+    refresherBg?: string;
+    direction?: 'vertical' | 'horizontal';
+    items: Record<string, any>[];
+    itemSize: number | string;
+    itemKey?: string;
+    id?: string;
+    bottomSpace?: number;
+  }>(),
+  {
+    refresherBg: 'transparent',
+    direction: 'vertical',
+    id: () => `sun-virtual-scroll-${nextId++}`,
+    bottomSpace: 0
+  }
+);
+
+let rafId: number;
+
+const visibleItemCount = ref(0);
+const startIndex = ref(0);
+const startOffset = ref(0);
+
+const isVertical = computed(() => props.direction === 'vertical');
+const contentContainerStyle = computed<CSSProperties>(() => ({
+  right: isVertical.value ? '0' : 'auto',
+  transform: `translate${isVertical.value ? 'Y' : 'X'}(${startOffset.value}px)`,
+  'white-space': isVertical.value ? 'normal' : 'nowrap'
+}));
+const itemSizePx = computed(() => {
+  if (typeof props.itemSize === 'number') {
+    return props.itemSize;
+  }
+
+  if (props.itemSize.endsWith('rpx')) {
+    return rpxToPx(parseFloat(props.itemSize));
+  }
+
+  return parseFloat(props.itemSize)
+})
+const spacerSize = computed(() => itemSizePx.value * props.items!.length);
+const spacerStyle = computed(() => ({
+  [isVertical.value ? 'height' : 'width']: withPixel(spacerSize.value + props.bottomSpace)
+}));
+const itemStyle = computed(() => ({
+  display: isVertical.value ? 'block' : 'inline-block',
+  [isVertical.value ? 'height' : 'width']: withPixel(itemSizePx.value)
+}))
+const visibleItems = computed(() =>
+  props.items!.slice(
+    Math.max(startIndex.value - visibleItemCount.value, 0),
+    startIndex.value + visibleItemCount.value * 2
+  )
+);
+
+function onScroll({ detail }: any) {
+  rafId && cancelAnimationFrame(rafId);
+  rafId = requestAnimationFrame(() => {
+    const scrollDistance = isVertical.value ? detail.scrollTop : detail.scrollLeft;
+    startIndex.value = ~~(scrollDistance / itemSizePx.value);
+
+    if (startIndex.value > visibleItemCount.value - 1) {
+      startOffset.value = scrollDistance - (itemSizePx.value * visibleItemCount.value) - (scrollDistance % itemSizePx.value);
+    } else {
+      startOffset.value = scrollDistance - (scrollDistance % (itemSizePx.value * visibleItemCount.value));
+    }
+
+    rafId = 0;
+  });
+}
+
+function initViewport() {
+  setTimeout(() => {
+    createSelectorQuery().select(`#${props.id}`).boundingClientRect(result => {
+      // 如果获取不到节点信息，重新初始化
+      if (!result) {
+        return initViewport()
+      }
+
+      const { height, width } = result as NodesRef.BoundingClientRectCallbackResult;
+      const viewportSize = isVertical.value ? height : width;
+      visibleItemCount.value = Math.ceil(viewportSize / itemSizePx.value);
+    }).exec();
+  });
+}
+
+onMounted(() => {
+  initViewport();
+});
+</script>

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "noPropertyAccessFromIndexSignature": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}

package/tsconfig.lib.json

@@ -0,0 +1,26 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "declaration": true
+  },
+  "include": [
+    "src/**/*.ts",
+    "index.ts",
+    "index.ts"
+  ],
+  "exclude": [
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx"
+  ]
+}

package/tsconfig.spec.json

@@ -0,0 +1,28 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": [
+      "vitest/globals",
+      "vitest/importMeta",
+      "vite/client",
+      "node",
+      "vitest"
+    ]
+  },
+  "include": [
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ]
+}

package/vite.config.ts

@@ -0,0 +1,130 @@
+/// <reference types='vitest' />
+import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin';
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import vue from '@vitejs/plugin-vue';
+import * as path from 'path';
+import { defineConfig } from 'vite';
+import dts from 'vite-plugin-dts';
+
+export default defineConfig({
+  root: __dirname,
+  cacheDir: '../../node_modules/.vite/ui-sun',
+  plugins: [
+    nxViteTsPaths(),
+    nxCopyAssetsPlugin(['*.md']),
+    dts({
+      entryRoot: 'src',
+      include: ['src'],
+      tsconfigPath: path.join(__dirname, 'tsconfig.lib.json'),
+      copyDtsFiles: true,
+    }),
+    vue({
+      template: {
+        transformAssetUrls: {
+          video: ['src', 'poster'],
+          'live-player': ['src'],
+          audio: ['src'],
+          source: ['src'],
+          image: ['src'],
+          'cover-image': ['src']
+        },
+        compilerOptions: {
+          mode: 'module',
+          optimizeImports: true,
+          isNativeTag: tag => {
+            return [
+              'slot-view',
+              'view',
+              'scroll-view',
+              'swiper',
+              'cover-view',
+              'cover-image',
+              'icon',
+              'text',
+              'rich-text',
+              'progress',
+              'button',
+              'checkbox',
+              'form',
+              'input',
+              'label',
+              'picker',
+              'picker-view',
+              'picker-view-column',
+              'radio',
+              'radio-group',
+              'checkbox-group',
+              'slider',
+              'switch',
+              'textarea',
+              'navigator',
+              'audio',
+              'image',
+              'video',
+              'camera',
+              'live-player',
+              'live-pusher',
+              'map',
+              'canvas',
+              'open-data',
+              'web-view',
+              'swiper-item',
+              'movable-area',
+              'movable-view',
+              'functional-page-navigator',
+              'ad',
+              'block',
+              'import',
+              'official-account',
+              'editor'
+            ].some(o => o === tag) || tag.startsWith('van-')
+          },
+        }
+      }
+    })
+  ],
+  // Uncomment this if you are using workers.
+  // worker: {
+  //  plugins: [ nxViteTsPaths() ],
+  // },
+  // Configuration for building your library.
+  // See: https://vitejs.dev/guide/build.html#library-mode
+  build: {
+    target: 'es2019',
+    outDir: '../../dist/ui-sun',
+    emptyOutDir: true,
+    reportCompressedSize: true,
+    lib: {
+      // Could also be a dictionary or array of multiple entry points.
+      entry: 'src/index.ts',
+      name: 'ui-sun',
+      fileName: 'index',
+      // Change this to the formats you want to support.
+      // Don't forget to update your package.json as well.
+      formats: ['es'],
+    },
+    rollupOptions: {
+      // External packages that should not be bundled into your library.
+      external: [
+        'vue',
+        'rxjs',
+        /@tarojs.+/,
+        /@ngify.+/,
+        /@opper.+/,
+        /@solar-kit.+/,
+        /@solar-taro.+/,
+      ],
+    },
+  },
+  test: {
+    watch: false,
+    globals: true,
+    environment: 'node',
+    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    reporters: ['default'],
+    coverage: {
+      reportsDirectory: '../../coverage/ui-sun',
+      provider: 'v8',
+    },
+  },
+});