@shijiu/jsview-vue 2.3.151-test.0 → 3.0.0-test.0

package/tools/jsview-vue-build.mjs

@@ -75,19 +75,23 @@ async function main(argv)
     // jsview
     `${options.jsviewVueDir}/../jsview`,
     'gifuct-js@2.1.2',
-    'postcss-js@4.0.0',
+    'postcss-js@5.1.0',
 
     // vue + vite
-    'vue@3.2.45',
-    'vue-router@4.1.6',
-    '@babel/types',
-    '@vitejs/plugin-vue@4.0.0',
-    'typescript@4.9.3',
-    'vite@4.0.0',
-    'vue-tsc@1.0.11',
+    // '@babel/types',
+    '@vitejs/plugin-vue@6.0.6',
+    "@vue/compiler-sfc@3.6.0-beta.10",
+    'typescript@6.0.3',
+    'vite@8.0.9',
+    'vue@3.6.0-beta.10',
+    'vue-router@5.0.6',
+    'vue-tsc@3.2.7',
 
     // jsview-vue dep
-    'sass@1.58.1',
+    'sass@1.99.0',
+
+    // build tools
+    'rollup@4.60.3',
   ];
 
   const noSavePackages = noSavePkgList.toString().replaceAll(',', ' ');

package/tsconfig.json

@@ -6,7 +6,7 @@
     "declarationDir": "bin/types",
     "emitDeclarationOnly": true,
     "module": "es2022",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "strict": true,
     "target": "es2022",
     "composite": true,
@@ -15,7 +15,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "esModuleInterop": true,
-    "lib": ["esnext", "dom"],
+    "lib": ["ES2022", "dom"],
     "skipLibCheck": true,
     "experimentalDecorators": true,
     "tsBuildInfoFile": "node_modules/.cache/tsconfig.tsbuildinfo"

package/utils/JsViewEngineWidget/JsvFocus/JsvFocusBlock.vue

@@ -114,6 +114,21 @@ const returnFocusToParent = (ev) => {
   toRaw(fDivRef.value)?.FocusNodeRef.ReturnFocusToParent(ev);
 };
 
+const rebuildParentRelation = () => {
+  let self = toRaw(fDivRef.value);
+  let parent = self.parentNode;
+  if (!self.FocusNodeRef.GetParentPage()) {
+    while (parent) {
+      if (parent.tagName !== "FDIV") {
+        parent = parent.parentNode;
+        continue;
+      }
+      self.FocusNodeRef.setParent(parent.FocusNodeRef);
+      break;
+    }
+  }
+};
+
 const exportObject = {
   getFullName,
   requestFocus,
@@ -159,22 +174,9 @@ const _mountToFocusSystem = () => {
   if (actionCallback.onCustomEvent) {
     focusNode.setOnCustomEvent(_onCustomEvent);
   }
-  // 建立父子关系链
-  let self = toRaw(fDivRef.value);
-  let parent = self.parentNode;
-  while (parent) {
-    if (self.FocusNodeRef.GetParentPage()) {
-      break;
-    }
 
-    if (parent.tagName !== "FDIV") {
-      parent = parent.parentNode;
-      continue;
-    }
-
-    self.FocusNodeRef.setParent(parent.FocusNodeRef);
-    break;
-  }
+  // 基于vue是从子到父触发mount/active回调的特性,在此回调时找到其直接父节点来建立父子关系
+  rebuildParentRelation();
 };
 
 const _onDispatchKeyDown = (ev) => {
@@ -234,7 +236,13 @@ onActivated(() => {
       requestFocus(props.autoFocus !== "exact");
     }
   } else {
-    // 首次mounted后会调用onActivated, 考虑避免重复添加
+    // 首次mounted后会调用onActivated, 考虑避免重复添加, 不会重新做 _mountToFocusSystem
+
+    // 但对于在deactive状态下挂载新的JsvFocusBlock组件的场景,
+    // 在mount时触发了_mountToFocusSystem, 但此时deactive节点并不在root div上, 
+    // 即使做过 _mountToFocusSystem 后，父子关系仍然不全
+    // 所以需要在onActivated中再重新检查父子关系
+    rebuildParentRelation();
   }
 });
 
@@ -244,11 +252,19 @@ onDeactivated(() => {
     return;
   }
 
+  const is_focused = focusNodeRef?.["IsFocus"]();
+
   focusNodeRef?.onUnMount(true);
   if (focusNodeRef?.jsvVueComponent) {
     focusNodeRef.jsvVueComponent = undefined;
   }
   focusNodeRef = null;
+
+  if (is_focused) {
+    // 根据从deactive从子到父的特性, 再次可以同顺序调用blur
+    // 因为deactive节点是仍然存在的节点, 但已经从FocusTree拿掉了, 所以需要进行blur通知
+    actionCallback?.onBlur?.(exportObject);
+  }
 });
 
 defineExpose(exportObject);

package/utils/JsViewEngineWidget/JsvFocus/JsvFocusHub.ts

@@ -11,6 +11,18 @@ class JsvFocusHubApi {
         return this._FocusHub;
     }
 
+    /**
+     * getFocusCallToken
+     * 
+     * 获取当前焦点切换SetFocus被调用的序列号, 每次setFocus调用时会递增
+     * 便于框架中一些自动setFocus行为识别出是否回调中App开发端已经进行了SetFocus操作, 避免重复setFocus
+     * 
+     * @return {number} 当前焦点切换的序列号
+     */
+    public getFocusCallToken(): number {
+        return this._FocusHub.getFocusCallToken();
+    }
+
     /**
      * setFocus
      * 
@@ -55,8 +67,7 @@ class JsvFocusHubApi {
     /**
      * getLastFocus
      * 
-     * 获得切到到当前焦点前的上一个焦点的name(注意, 不带NameSpace), 
-     * 注意:如果上一次的焦点已经不在dom树时, 返回null
+     * 获得切到到当前焦点前的上一个焦点链中离root最远的节点的焦点的name(注意, 不带NameSpace), 
      * 
      * @return {string} 焦点的focusName
      */
@@ -64,6 +75,17 @@ class JsvFocusHubApi {
         return this._FocusHub.getLastFocus();
     }
 
+    /**
+     * getLastFocusNear
+     * 
+     * 获得切到到当前焦点前的上一个焦点链中离root最近的节点的焦点的name(注意, 不带NameSpace), 
+     * 
+     * @return {string} 焦点的focusName
+     */
+    public getLastFocusNear(): string {
+        return this._FocusHub.getLastFocusNear();
+    }
+
     /**
      * getDeactivedPageFocus
      * 

package/utils/JsViewEngineWidget/MetroWidget/Const.ts

@@ -25,7 +25,12 @@ const METRO_WIDGET = {
   }
 };
 
+const ONEDGE_TYPE = {
+  SPATIAL_NAV: "spatialNav",
+}
+
 export {
   METRO_WIDGET,
   METRO_WIDGET as METRO_WIDGET_CONST,
+  ONEDGE_TYPE,
 }

package/utils/JsViewEngineWidget/MetroWidget/ListWidget.vue

@@ -2,8 +2,16 @@
  * @file 只显示单列/行的MetroWidget
 -->
 <script setup>
-import { ref, shallowRef, computed, reactive, onMounted, onBeforeUnmount } from "vue";
+import {
+  ref,
+  shallowRef,
+  computed,
+  reactive,
+  onMounted,
+  onBeforeUnmount,
+} from "vue";
 import { setup } from "./MetroWidgetSetup";
+import SlotComponent from "./SlotComponent.vue";
 import {
   VERTICAL,
   HORIZONTAL,
@@ -14,6 +22,7 @@ import {
 import { ForgeConst } from "../../JsViewVueTools/ForgeConstDefine.ts";
 import DebugFrame from "./DebugFrame.vue";
 import { createCanvasText } from "./DebugTools.ts";
+import { KEY_MODE, TOUCH_MODE, JsvInteractionMode } from "../../JsViewVueTools/JsvInteractionMode";
 
 const props = defineProps({
   padding: {
@@ -40,7 +49,7 @@ const props = defineProps({
     required: true,
   },
   onEdge: {
-    type: Function,
+    type: [Function, String],
     default: null,
   },
   onFocus: {
@@ -51,6 +60,10 @@ const props = defineProps({
     type: Function,
     default: null,
   },
+  onTouchFocus: {
+    type: Function,
+    default: null,
+  },
   loadAll: {
     type: Boolean,
     default: false,
@@ -131,6 +144,9 @@ const props = defineProps({
   onScroll: {
     type: Function,
   },
+  syncOnScroll: {
+    type: Function,
+  },
   focusMoveType: {
     type: Number,
     default: 0,
@@ -157,6 +173,22 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  renderAcc: {
+    type: Boolean,
+    default: false,
+  },
+  mouseFlag: {
+    type: Number,
+    default: 0,
+  },
+  fullDisplayMode: {
+    type: Boolean,
+    default: false,
+  },
+  onSizeChange: {
+    type: Function,
+    default: null,
+  },
 });
 
 const renderBreakKey = props.enableItemRenderBreak ? RENDER_ITEM_BREAK_KEY : "";
@@ -168,6 +200,7 @@ const slideDivLeft = ref(0);
 const slideDivTop = ref(0);
 const focusNode = shallowRef(null);
 const pageUpdateToken = ref(0);
+const rootDiv = shallowRef(null);
 
 const touchDiv = shallowRef(null);
 const touchDivSize = reactive({
@@ -176,8 +209,21 @@ const touchDivSize = reactive({
 });
 
 const normalizedPlaceHolder = computed(() => {
+  let logoInfo = null;
+  if (
+    typeof props.placeHolderSetting.logoUrl == "string" &&
+    typeof props.placeHolderSetting.logoWidth == "number" &&
+    typeof props.placeHolderSetting.logoHeight == "number"
+  ) {
+    logoInfo = {
+      url: props.placeHolderSetting.logoUrl,
+      width: props.placeHolderSetting.logoWidth,
+      height: props.placeHolderSetting.logoHeight,
+    };
+  }
   return {
     gap: props.placeHolderSetting.gap ?? 0,
+    logoInfo: logoInfo,
     borderRadius: props.placeHolderSetting.borderRadius ?? 0,
     backgroundColor: props.placeHolderSetting.backgroundColor,
     focusBackgroundColor:
@@ -199,6 +245,8 @@ const {
   onTouchRelease,
   currentFocusIndex,
   onDispatchKeyDown,
+  isFocus,
+  rootNativeViewId,
 } = setup(
   props,
   itemRender,
@@ -211,6 +259,7 @@ const {
   pageUpdateToken,
   touchDiv,
   touchDivSize,
+  rootDiv,
   "list"
 );
 
@@ -222,7 +271,6 @@ if (props.enableDebug) {
   debugFrameSourceReleaseHandler = sourceInfo.releaseHandler;
 }
 
-
 onMounted(() => {
   if (onTouchRelease) {
     touchDiv.value.jsvSetTapListener(
@@ -244,123 +292,169 @@ onBeforeUnmount(() => {
   }
 });
 
+const innerDisableClip = computed(() => {
+  return props.disableClip || props.fullDisplayMode;
+});
+
 defineExpose(exportObject);
 </script>
 
 <template>
   <div
+    ref="rootDiv"
     :style="{
       left: left,
       top: top,
       width: width,
       height: height,
-      overflow: disableClip ? null : 'hidden',
+      overflow: innerDisableClip ? null : 'hidden',
     }"
   >
     <div
       :style="{
-        left: widgetRectInfo.padding.left,
-        top: widgetRectInfo.padding.top,
+        width: width,
+        height: height,
       }"
+      :data-jsv-vw-innerview="rootNativeViewId"
     >
       <div
-        id="slideDiv"
-        key="slideDiv"
-        ref="slideDiv"
         :style="{
-          left: slideDivLeft,
-          top: slideDivTop,
+          left: widgetRectInfo.padding.left,
+          top: widgetRectInfo.padding.top,
         }"
       >
         <div
-          ref="touchDiv"
+          id="slideDiv"
+          key="slideDiv"
+          ref="slideDiv"
           :style="{
-            width: touchDivSize.width,
-            height: touchDivSize.height,
+            left: slideDivLeft,
+            top: slideDivTop,
           }"
         >
-          <div>
-            <slot name="background"></slot>
-          </div>
-          <div ref="locateDiv">
-            <jsv-focus-block
-              ref="focusNode"
-              :name="name"
-              :onAction="{
-                onFocus: focusBlockOnFocus,
-                onBlur: focusBlockOnBlur,
-                onKeyDown: focusBlockOnKeyDown,
-                onKeyUp: focusBlockOnKeyUp,
-                onCustomEvent: focusBlockOnCustomEvent,
-                onDispatchKeyDown,
-              }"
-            >
-              <div
-                v-for="(item, index) in renderData"
-                :key="
-                  pageUpdateToken +
-                  '_' +
-                  item.index +
-                  '-' +
-                  item.renderKey.value
-                "
-                :ref="item.divRef"
-                data-jsv-vw-test-rect="1"
-                :style="{
-                  left: item.templateInfo.left,
-                  top: item.templateInfo.top,
-                  width: item.templateInfo.width,
-                  height: item.templateInfo.height,
-                  zIndex: item.renderStyle.zIndex,
+          <div
+            ref="touchDiv"
+            :style="{
+              width: touchDivSize.width,
+              height: touchDivSize.height,
+            }"
+          >
+            <div>
+              <slot name="background"></slot>
+            </div>
+            <div ref="locateDiv">
+              <jsv-focus-block
+                ref="focusNode"
+                :name="name"
+                :onAction="{
+                  onFocus: focusBlockOnFocus,
+                  onBlur: focusBlockOnBlur,
+                  onKeyDown: focusBlockOnKeyDown,
+                  onKeyUp: focusBlockOnKeyUp,
+                  onCustomEvent: focusBlockOnCustomEvent,
+                  onDispatchKeyDown,
                 }"
-                @click="item.onTap.value"
               >
-                <DebugFrame
-                  v-if="enableDebug"
-                  :width="item.templateInfo.width"
-                  :height="item.templateInfo.height"
-                  :sourceId="debugFrameSourceId"
-                ></DebugFrame>
                 <div
-                  v-if="
-                    !enableItemRenderBreak || item.mounted.value || itemRender
-                  "
-                  :key="renderBreakKey"
-                  :ref="item.slotRef"
-                  :id="`${name}_${index}`"
-                >
-                  <slot
-                    name="renderItem"
-                    :data="item.customerData"
-                    :onEdge="_onFocusableItemEdge"
-                    :onAction="item.registerObj"
-                    :query="item.query"
-                    :onItemEdge="_onFocusableItemEdge"
-                  ></slot>
-                </div>
-                <div
-                  v-if="
-                    enableItemRenderBreak &&
-                    placeHolderSetting &&
-                    !item.mounted.value &&
-                    item.itemConfig.showSkeleton
+                  v-for="(item, index) in renderData"
+                  :key="
+                    pageUpdateToken +
+                    '_' +
+                    item.index +
+                    '-' +
+                    item.renderKey.value
                   "
+                  :ref="item.divRef"
+                  data-jsv-vw-test-rect="1"
                   :style="{
-                    width: item.renderStyle.width - normalizedPlaceHolder.gap,
-                    height: item.renderStyle.height - normalizedPlaceHolder.gap,
-                    backgroundColor:
-                      currentFocusIndex == item.index
-                        ? normalizedPlaceHolder.focusBackgroundColor
-                        : normalizedPlaceHolder.backgroundColor,
-                    borderRadius: normalizedPlaceHolder.borderRadius,
+                    left: item.templateInfo.left,
+                    top: item.templateInfo.top,
+                    width: item.templateInfo.width,
+                    height: item.templateInfo.height,
+                    zIndex: item.renderStyle.zIndex,
                   }"
-                ></div>
-              </div>
-            </jsv-focus-block>
+                  @click="item.onTap.value"
+                >
+                  <DebugFrame
+                    v-if="enableDebug"
+                    :width="item.templateInfo.width"
+                    :height="item.templateInfo.height"
+                    :sourceId="debugFrameSourceId"
+                  ></DebugFrame>
+                  <div
+                    :style="{
+                      width: item.templateInfo.width,
+                      height: item.templateInfo.height,
+                    }"
+                    :data-jsv-vw-innerview="item.rootNativeViewId"
+                  >
+                    <div
+                      v-if="
+                        !item.renderBreak.value ||
+                        item.mounted.value ||
+                        itemRender
+                      "
+                      :key="renderBreakKey"
+                      :ref="item.slotRef"
+                      :id="`${name}_${index}`"
+                      :__metrowidget-index="item.index"
+                    >
+                      <slot
+                        name="renderItem"
+                        :data="item.customerData"
+                        :onEdge="_onFocusableItemEdge"
+                        :onAction="item.registerObj"
+                        :query="item.query"
+                        :onItemEdge="_onFocusableItemEdge"
+                      ></slot>
+                    </div>
+                    <div
+                      v-if="
+                        item.renderBreak.value 
+                        && placeHolderSetting 
+                        && !item.mounted.value 
+                        && item.itemConfig.showSkeleton
+                        && item.placeHolderLayout
+                      "
+                      :style="{
+                        left: item.placeHolderLayout.left,
+                        top: item.placeHolderLayout.top,
+                        width: item.placeHolderLayout.width,
+                        height: item.placeHolderLayout.height,
+                        backgroundColor:
+                          isFocus &&
+                          currentFocusIndex == item.index &&
+                          JsvInteractionMode == KEY_MODE
+                            ? normalizedPlaceHolder.focusBackgroundColor
+                            : normalizedPlaceHolder.backgroundColor,
+                        borderRadius: normalizedPlaceHolder.borderRadius,
+                      }"
+                    >
+                      <img
+                        v-if="normalizedPlaceHolder.logoInfo"
+                        :src="`url(${normalizedPlaceHolder.logoInfo.url})`"
+                        :style="{
+                          left:
+                            (item.placeHolderLayout.width -
+                              item.placeHolderLayout.logoWidth) /
+                            2,
+                          top:
+                            (item.placeHolderLayout.height -
+                              item.placeHolderLayout.logoHeight) /
+                            2,
+                          width: item.placeHolderLayout.logoWidth,
+                          height: item.placeHolderLayout.logoHeight,
+                        }"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </jsv-focus-block>
+            </div>
+          </div>
+          <div>
+            <slot name="foreground"></slot>
           </div>
-        </div>
-        <div>
-          <slot name="foreground"></slot>
         </div>
       </div>
     </div>