@shijiu/jsview-vue 2.2.201 → 2.2.426-test.0

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,53 @@ 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 });
+    const jsviewPostInstall = `${options.jsviewVueDir}/node_modules/@shijiu/jsview/tools/jsview-post-install.mjs`;
+    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 ${jsviewPostInstall} --framework=vue --skip-check-npmcmd`,
     ];
   }
   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}/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 +152,4 @@ const optionalUsages = {
   '-n | --without-npm-install': 'Ignore to run npm install.',
 };
 const argv = parseArguments(requiredUsages, optionalUsages, false);
-main(argv);
+main(argv);

package/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    // "checkJs": true,
+    "declaration": true,
+    "declarationDir": "bin/types",
+    "emitDeclarationOnly": true,
+    "module": "es2022",
+    "moduleResolution": "node",
+    "strict": true,
+    "target": "es2022",
+    "composite": true,
+    "useDefineForClassFields": true,
+    "jsx": "preserve",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "lib": ["esnext", "dom"],
+    "skipLibCheck": true,
+    "experimentalDecorators": true,
+    "tsBuildInfoFile": "node_modules/.cache/tsconfig.tsbuildinfo"
+  },
+  "include": [
+    "utils",
+    "utils/index.js"
+  ],
+}

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/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