@shijiu/jsview-vue 2.2.201 → 2.2.373

package/tools/config/toolkit.mjs

@@ -0,0 +1,81 @@
+import path from 'node:path';
+import url from 'node:url';
+
+function getFileComments(content, isVue, filePath)
+{
+  const keyword = '@file';
+
+  const contentLines = content.split('\n');
+  let fileCommentLines = [];
+  for (let idx = 0; idx < contentLines.length; idx++) {
+    const line = contentLines[idx];
+    const trimLine = line.trim();
+    // 空行 和 import, js文件会把import放在注释上面
+    if(!trimLine || trimLine.startsWith('import')) {
+      continue;
+
+    // 检查 /* comments */ 和 <!-- comments -->
+    } else if (trimLine.startsWith('/*')
+    || trimLine.startsWith('<!--')) {
+      const endFlag = trimLine.startsWith('/*') ? '*/' : '-->'
+      let multiCommentLines = [];
+      for(idx; idx < contentLines.length; idx++) {
+        const multiline = contentLines[idx];
+        multiCommentLines.push(multiline);
+        if(multiline.includes(endFlag)) {
+          multiCommentLines.push(''); // 添加一个空行
+          break;
+        }
+      }
+      if(multiCommentLines.join().includes(keyword)) {
+        fileCommentLines.push(...multiCommentLines);
+      }
+
+    // 检查 //
+    } else if (trimLine.startsWith('//')) {
+      if(line.includes(keyword)) {
+        fileCommentLines.push(line);
+      }
+
+    // 检查 vue 文件的 <script> 中的注释
+    } else if (isVue && trimLine.startsWith('<script')) {
+
+    // 出现代码，退出循环
+    } else {
+      break; 
+    }
+  }
+
+  return fileCommentLines.join('\n').trim();
+}
+
+/**************************************************
+ * jsview-framework/@shijiu/jsview-vue
+ * ├── bin
+ * │   └── types
+ * ├── tools
+ * │   └── config
+ * └── utls
+*************************************************/
+function getProjectPaths()
+{
+  const currJsFilePath = url.fileURLToPath(import.meta.url)
+  const jsviewVueDir = path.resolve(currJsFilePath, '../../../'); // jsview-framework/@shijiu/jsview-vue
+  const jsviewVueBinDir = path.resolve(jsviewVueDir, 'bin');
+  const jsviewVueBinTypesDir = path.resolve(jsviewVueBinDir, 'types');
+  const jsviewVueModulesCacheDir = path.resolve(jsviewVueDir, 'node_modules', '.cache');
+  const jsviewVueUtilsDir = path.resolve(jsviewVueDir, 'utils');
+
+  return {
+    jsviewVueDir,
+    jsviewVueBinDir,
+    jsviewVueBinTypesDir,
+    jsviewVueModulesCacheDir,
+    jsviewVueUtilsDir,
+  }
+}
+
+export {
+  getFileComments,
+  getProjectPaths,
+}

package/tools/config/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "compilerOptions": {
     "allowJs": true,
+    // "checkJs": true,
     "declaration": true,
     "declarationDir": "../../bin/types",
     "emitDeclarationOnly": true,

package/tools/config/vite.config.ts

@@ -2,14 +2,18 @@ import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import fs from 'node:fs'
 import path from 'node:path'
+import {
+  getFileComments,
+  getProjectPaths
+} from './toolkit.mjs'
 
-const projectDir = process.cwd();
+const options = getProjectPaths();
 
 // https://vitejs.dev/config/
 export default defineConfig({
   build: {
     lib: {
-      entry: path.resolve(projectDir, 'utils/index.js'),
+      entry: path.resolve(options.jsviewVueUtilsDir, 'index.js'),
       formats: ["es"],
     },
     minify: false,
@@ -25,11 +29,11 @@ export default defineConfig({
       ],
       output: {
         banner: (chunkInfo) => getBanner(chunkInfo),
-        dir: path.resolve(projectDir, 'node_modules', '.cache'),
+        dir: options.jsviewVueModulesCacheDir,
         entryFileNames: '[name].mjs',
         format: 'esm',
         preserveModules: true,
-        preserveModulesRoot: projectDir,
+        preserveModulesRoot: options.jsviewVueDir,
         sourcemap: false,
       },
       treeshake: false,
@@ -41,20 +45,26 @@ export default defineConfig({
 })
 
 function getBanner(chunkInfo) {
-  let filePath = chunkInfo.facadeModuleId
-  filePath = filePath.replace(/^\x00/, '') // '\0plugin-vue:export-helper',
-  const modulePath = path.relative(projectDir, filePath)
+  let filePath = chunkInfo.facadeModuleId;
+  filePath = filePath.replace(/^\x00/, ''); // '\0plugin-vue:export-helper',
+  const modulePath = path.relative(options.jsviewVueUtilsDir, filePath);
+  const moduleDir = path.dirname(modulePath);
+  const dtsDir = path.resolve(options.jsviewVueBinTypesDir, moduleDir);
   let banner = `
- //!
- //! ${modulePath};
- //!
+ /*! 
+  + @file {@link file://./${path.relative(dtsDir, filePath)}}
+  */
  `;
 
   if(filePath.endsWith('.vue')) {
-    const regex = /<script.*?<\/script>|<style.*?<\/style>|<template.*?<\/template>/gs
-    const content = fs.readFileSync(filePath, 'utf-8')
-    const topLevelComments = content.replace(regex, '');
-    banner += `/*! ${topLevelComments} */`;
+    const content = fs.readFileSync(filePath, 'utf-8');
+
+    let fileComments = getFileComments(content, true, filePath);
+    fileComments = fileComments.replaceAll('/**', '/*!');
+    fileComments = fileComments.replaceAll('<!--', '/*!');
+    fileComments = fileComments.replaceAll('-->', '*/');
+
+    banner += fileComments;
   }
 
   return banner;

package/tools/jsview-vue-build.mjs

@@ -3,14 +3,51 @@
 
 import fs from 'node:fs';
 import path from 'node:path';
-import url from 'node:url';
 import {
   checkNodeVersion,
   execCommand,
   getNpmRegistry,
+  Logger,
   parseArguments,
 } from '../../../@shijiu/jsview/tools/jsview-common.mjs';
 
+import {
+  getFileComments,
+  getProjectPaths,
+} from './config/toolkit.mjs'
+
+function checkTopLevelCommentsRecursive(relativeDir, baseDir, cacheDir)
+{
+  const fileNameList = fs.readdirSync(path.resolve(baseDir, relativeDir));
+  for(const fileName of fileNameList) {
+    const filePath = path.resolve(baseDir, relativeDir, fileName);
+    const stat = fs.statSync(filePath);
+    if(stat.isDirectory()) {
+      const relativeName = path.join(relativeDir, fileName);
+      checkTopLevelCommentsRecursive(relativeName, baseDir, cacheDir);
+    } else {
+      if(fileName.endsWith('.d.ts') == false) {
+        continue;
+      }
+
+      const refName = fileName.replace('.d.ts', '.mjs');
+      const refPath = path.resolve(cacheDir, relativeDir, refName);
+      if(fs.existsSync(refPath) == false) {
+        Logger.Tip('Ignore to check top-level comments: ' + filePath);
+        continue;
+      }
+      const refContent = fs.readFileSync(refPath, 'utf-8');
+      let fileComments = getFileComments(refContent, false, refPath);
+      fileComments = fileComments.replaceAll('/**!', '/**')
+      fileComments = fileComments.replaceAll('/*!', '/**')
+      
+      let content = fs.readFileSync(filePath, 'utf-8');
+      content = `${fileComments }\n\n${content}`;
+      fs.writeFileSync(filePath, content, 'utf-8');
+    }
+  }
+}
+
 function formatBannerRecursive(dir)
 {
   const fileNameList = fs.readdirSync(dir);
@@ -32,13 +69,11 @@ async function main(argv)
 {
   checkNodeVersion();
 
-  const currJsFilePath = url.fileURLToPath(import.meta.url)
-  const jsviewVueDir = path.resolve(currJsFilePath, '../../') // jsview-framework/@shijiu/jsview-vue
-  const jsviewVueBinDir = path.resolve(jsviewVueDir, 'bin') // jsview-framework/@shijiu/jsview-vue/bin
+  const options = getProjectPaths();
 
   const noSavePkgList = [
     // jsview
-    `${jsviewVueDir}/../jsview`,
+    `${options.jsviewVueDir}/../jsview`,
     'gifuct-js@2.1.2',
     'postcss-js@4.0.0',
 
@@ -58,42 +93,52 @@ async function main(argv)
   const noSavePackages = noSavePkgList.toString().replaceAll(',', ' ');
   const version = process.env['JSVIEW_VUE_VERSION'];
 
-  const npmInstalledFlag = path.resolve(jsviewVueDir, 'node_modules', '.cache', '.npm-installed');
+  const cacheDir = path.resolve(options.jsviewVueDir, 'node_modules', '.cache');
+  const npmInstalledFlag = path.resolve(cacheDir, '.npm-installed');
   let batchCommand = []
 
   if(!argv.withoutNpmInstall || fs.existsSync(npmInstalledFlag) == false) {
     const registry = getNpmRegistry();
-    fs.rmSync(`${jsviewVueDir}/node_modules`, { recursive: true, force: true });
+    fs.rmSync(`${options.jsviewVueDir}/node_modules`, { recursive: true, force: true });
     batchCommand = [
       `npm install --registry=${registry}`,
       `npm install --registry=${registry} --force --no-save ${noSavePackages}`,
-      `node ${jsviewVueDir}/node_modules/@shijiu/jsview/tools/jsview-post-install.mjs --framework=vue`,
+      `node ${options.jsviewVueDir}/node_modules/@shijiu/jsview/tools/jsview-post-install.mjs --framework=vue`,
     ];
   }
   batchCommand = [
     ...batchCommand,
-    `JSVIEW_DISABLE_MANUALCHUNKS=true ${jsviewVueDir}/node_modules/.bin/vite build --config ${jsviewVueDir}/tools/config/vite.config.ts`,
-    `${version ? 'JSVIEW_VUE_VERSION='+version : ''} ${jsviewVueDir}/node_modules/.bin/rollup  --config ${jsviewVueDir}/tools/config/rollup.config.mjs`,
+    `JSVIEW_DISABLE_MANUALCHUNKS=true ${options.jsviewVueDir}/node_modules/.bin/vite build --config ${options.jsviewVueDir}/tools/config/vite.config.ts`,
+    `${version ? 'JSVIEW_VUE_VERSION='+version : ''} ${options.jsviewVueDir}/node_modules/.bin/rollup  --config ${options.jsviewVueDir}/tools/config/rollup.config.mjs`,
   ];
   if(!argv.withoutTsDeclare) {
-    fs.rmSync(jsviewVueBinDir, { recursive: true, force: true });
-
-    batchCommand = [
-      ...batchCommand,
-      `${jsviewVueDir}/node_modules/.bin/vue-tsc --project ${jsviewVueDir}/tools/config/tsconfig.json`,
-    ];
+    fs.rmSync(options.jsviewVueBinDir, { recursive: true, force: true });
   }
   for(const command of batchCommand) {
-    execCommand(`cd ${jsviewVueDir} && ${command}`);
+    execCommand(`cd ${options.jsviewVueDir} && ${command}`);
   }
+  Logger.Info('Formatting banner ...');
+  formatBannerRecursive(options.jsviewVueBinDir);
 
-  formatBannerRecursive(jsviewVueBinDir);
+  if(!argv.withoutTsDeclare) {
+    batchCommand = [
+      `${options.jsviewVueDir}/node_modules/.bin/vue-tsc --project ${options.jsviewVueDir}/tools/config/tsconfig.json`,
+    ];
+    fs.rmSync(options.jsviewVueBinTypesDir, { recursive: true, force: true });
+    for(const command of batchCommand) {
+      execCommand(`cd ${options.jsviewVueDir} && ${command}`);
+    }
+
+    Logger.Info('Checking top-level comments ...');
+    const refUtilsDir = path.resolve(cacheDir, 'utils');
+    checkTopLevelCommentsRecursive('.', options.jsviewVueBinTypesDir, refUtilsDir);
+  }
 
   fs.mkdirSync(path.dirname(npmInstalledFlag), {recursive: true});
   fs.writeFileSync(npmInstalledFlag, '');
   if(!argv.withoutNpmInstall) {
-    fs.rmSync(`${jsviewVueDir}/node_modules`, { recursive: true, force: true });
-    fs.rmSync(`${jsviewVueDir}/package-lock.json`, { recursive: true, force: true });
+    fs.rmSync(`${options.jsviewVueDir}/node_modules`, { recursive: true, force: true });
+    fs.rmSync(`${options.jsviewVueDir}/package-lock.json`, { recursive: true, force: true });
   }
 
   console.info('Done...');
@@ -106,4 +151,4 @@ const optionalUsages = {
   '-n | --without-npm-install': 'Ignore to run npm install.',
 };
 const argv = parseArguments(requiredUsages, optionalUsages, false);
-main(argv);
+main(argv);

package/utils/JsViewEngineWidget/JsvFocus/JsvFocusBlock.vue

@@ -1,4 +1,6 @@
 <!--
+ * @file
+ *
  *  props:
  *    onKeyUp: 按键抬起回调
  *           @params keyEvent
@@ -41,9 +43,11 @@ import {
 import { HUB_NS_PROVIDE_NAME } from "./JsvFocusHub";
 
 const props = defineProps({
+  style: Object,
   name: String,
   namespace: String,
-  autoFocus: String,
+  autoFocus: String | Boolean,
+  focusable: Boolean | undefined,
   onAction: Object,
   onDispatchKeyUp: Function,
   onDispatchKeyDown: Function,
@@ -238,7 +242,7 @@ defineExpose(exportObject);
 </script>
 
 <template>
-  <fdiv ref="fDivRef" :fname="name" :new-namespace="namespace">
+  <fdiv ref="fDivRef" :fname="name" :new-namespace="namespace" :style="style" :data-jsv-focusable="focusable ?? !namespace">
     <slot></slot>
   </fdiv>
 </template>

package/utils/JsViewEngineWidget/JsvFocus/JsvFocusManager.ts

@@ -25,8 +25,11 @@ export class JsvFocusManager {
   // #aliasMap = {}
   private $_appMount: any = undefined;
   private $_topFDiv: any = undefined;
+  private $_autoSearchFocus: boolean = false;
 
-  constructor() { }
+  constructor(config: any) {
+    this.$_autoSearchFocus = config.autoSearchFocus;
+  }
 
   install(app: any, ...options: any) {
     console.log("JsvFocusManager install");
@@ -98,6 +101,7 @@ export class JsvFocusManager {
   $_hookMount(app: any, rootNodeId: any) {
     rootNodeId = rootNodeId.replace("#", "");
     this.$_topFDiv = (document as any).jsvInitFDivRoot(rootNodeId);
+    this.$_topFDiv.enableAutoSearchFocus(this.$_autoSearchFocus);
     this.$_appMount = app.mount.bind(app);
 
     return this.$_doAppMount.bind(this);
@@ -115,8 +119,23 @@ export class JsvFocusManager {
   }
 }
 
-function jsvCreateFocusManager() {
-  return new JsvFocusManager();
+/**
+ * 创建 JsView 焦点管理器
+ * 
+ * @param {Object} config: 对象设置，子参数有{
+ *                autoSearchFocus{boolean}: 是否开启自动寻焦，默认为false(兼容旧代码)
+ *             }
+ * @return JsvFocusManager
+ */
+function jsvCreateFocusManager(config: Object | null = null) {
+  let defualt_config = {
+    autoSearchFocus: false
+  };
+
+  return new JsvFocusManager({
+    ...defualt_config,
+    ...config
+  });
 }
 
 export { jsvCreateFocusManager, useFocusHub };

package/utils/JsViewEngineWidget/MetroWidget/ListWidget.vue

@@ -1,5 +1,5 @@
 <!--
-  只显示单列/行的MetroWidget
+ * @file 只显示单列/行的MetroWidget
 -->
 <script setup>
 import { ref, shallowRef, computed, reactive, onMounted } from "vue";
@@ -187,6 +187,7 @@ const {
   onTouchDown,
   onTouchRelease,
   currentFocusIndex,
+  onDispatchKeyDown
 } = setup(
   props,
   itemRender,
@@ -262,6 +263,7 @@ defineExpose(exportObject);
                 onBlur: focusBlockOnBlur,
                 onKeyDown: focusBlockOnKeyDown,
                 onCustomEvent: focusBlockOnCustomEvent,
+                onDispatchKeyDown
               }"
             >
               <div

package/utils/JsViewEngineWidget/MetroWidget/MetroWidget.vue

@@ -5,6 +5,8 @@
 -->
 
 <!--
+ * @file 
+ *
  * 【界面概述】
  * 展示MetroWidget控件的用法
  *
@@ -93,10 +95,6 @@
                                             "rect": 到达边缘时的区域{x: 0, y: 0, width: 0,height: 0}
                                           }
         onScroll {function} 滚动时的回调 (visibleStart, visibleRange, totalSize) => {}
-                                (TBD: 
-                                  当前版本暂时不支持触控过程的实时回调，
-                                  由于回调js会严重拖慢性能，所以也不会设计实时回调，
-                                  关于边缘的拖动进度展示，将来会有额外组件支撑)
                                 visibleStart: 可视区域的起点
                                 visibleRange: 可视区域大小(不含padding)
                                 totalSize: 所有item的总长
@@ -194,6 +192,8 @@
                                                   3. EdgeDirection
         getCustomerDataSize
           @description 获取用户数据长度
+        getCurrentFocusIndex
+          @description 获取当前获焦item的index
         setZIndex
           @description 设置item的zIndex
           @params {int} index: item的index
@@ -210,7 +210,12 @@
         setSlideSetting
           @description 设置slideSetting
           @params { SlideSetting | null } setting 滚动设置, 为null时使用props.slideSetting
-            
+        cancelDelayLoad
+          @description 取消延迟加载首屏以外内容
+        setSensorSensitivity
+          @description 触控模式下, 设置运动回调敏感度, 每移动多少像素进行回调，适当放大(推荐10以上)可以极大减小对js回调过多引起的性能降低
+          @params {number} sensitivity 敏感度, 等于0时关闭触控的移动监听
+                
   slots:
     renderItem: 该slot用于描画每个单元格
     background: 该slot描画在item后, 一般用于描画需要跟随MetroWidget滚动的内容
@@ -457,6 +462,7 @@ const {
   onTouchRelease,
   currentFocusIndex,
   modeForExport,
+  onDispatchKeyDown
 } = setup(
   props,
   itemRender,
@@ -532,6 +538,7 @@ defineExpose(exportObject);
                 onBlur: focusBlockOnBlur,
                 onKeyDown: focusBlockOnKeyDown,
                 onCustomEvent: focusBlockOnCustomEvent,
+                onDispatchKeyDown,
               }"
             >
               <div