create-jsview 2.1.367-test.0 → 2.1.428

package/template-vue-vite/dist-test-jsview-chunk/js/Homepage.d8afeb55.js

@@ -0,0 +1,466 @@
+import { g as _sfc_main$F, V as VERTICAL, a as useRouter, u as useFocusHub, E as EdgeDirection, c as bridge } from "./jsview-vue-entry.415721d8.js";
+import { a as _export_sfc } from "./export-sfc.2749ebea.js";
+import { s as shallowRef, c as computed, o as openBlock, e as createElementBlock, u as unref, g as normalizeStyle, q as createCommentVNode, f as createBaseVNode, j as renderSlot, A as createBlock, l as withCtx, k as createVNode, O as createTextVNode, G as toDisplayString, w as watch, b as resolveComponent, y as onActivated, z as onDeactivated } from "./vue.889a9b8b.js";
+import "./jsview-forge-define.bfab260e.js";
+import "./jsview-dom-entry.280f04b1.js";
+const Item_vue_vue_type_style_index_0_scoped_d1363826_lang = "";
+const _sfc_main$4 = {
+  __name: "Item",
+  props: {
+    style: Object,
+    itemClick: Function,
+    itemFocus: Function,
+    data: Object,
+    query: Object,
+    onAction: Object
+  },
+  setup(__props) {
+    const props = __props;
+    let focused = shallowRef(false);
+    const foucsStyle = computed(() => {
+      return {
+        width: props.style.width,
+        height: props.style.height
+      };
+    });
+    const itemStyle = computed(() => {
+      return {
+        width: props.style.width - 10,
+        height: props.style.height - 10,
+        backgroundColor: props.style.backgroundColor,
+        color: props.style.color
+      };
+    });
+    const onFocus = () => {
+      focused.value = true;
+      if (props.itemFocus) {
+        props.itemFocus(props.data);
+      }
+    };
+    const onBlur = () => {
+      focused.value = false;
+    };
+    const onClick = () => {
+      if (props.itemClick) {
+        props?.itemClick(props.query.id, props.data);
+      }
+    };
+    props.onAction.register("onFocus", onFocus);
+    props.onAction.register("onBlur", onBlur);
+    props.onAction.register("onClick", onClick);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", null, [
+        unref(focused) ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: "focus",
+          style: normalizeStyle(unref(foucsStyle))
+        }, null, 4)) : createCommentVNode("", true),
+        createBaseVNode("div", {
+          class: "item",
+          style: normalizeStyle(unref(itemStyle))
+        }, [
+          renderSlot(_ctx.$slots, "default", {}, void 0, true)
+        ], 4)
+      ]);
+    };
+  }
+};
+const styleSheetsContent$2 = { "d1363826": { ".focus": '{"top":-5,"left":-5,"backgroundColor":"#0000ff"}', ".item": '{"textAlign":"center","fontSize":30}' } };
+window.JsvCode.Dom.DeclareStyleSheets(styleSheetsContent$2);
+const Item = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-d1363826"]]);
+const _sfc_main$3 = {
+  __name: "TabFrame",
+  props: {
+    name: String,
+    itemFocus: Function,
+    onEdge: Function,
+    initId: Number
+  },
+  setup(__props) {
+    const props = __props;
+    const measures = (item) => {
+      return {
+        width: item.width,
+        height: item.height,
+        focusable: item.focusable
+      };
+    };
+    const width = 1280;
+    const height = 100;
+    const data = [
+      {
+        width: 200,
+        height: 50,
+        name: "功能实例",
+        focusable: true,
+        id: 0
+      },
+      {
+        width: 200,
+        height: 50,
+        name: "MetroWidget",
+        focusable: true,
+        id: 1
+      },
+      {
+        width: 200,
+        height: 50,
+        name: "首页/运营",
+        focusable: true,
+        id: 2
+      },
+      {
+        width: 200,
+        height: 50,
+        name: "游戏实例",
+        focusable: true,
+        id: 3
+      }
+    ];
+    const direction = VERTICAL;
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(_sfc_main$F), {
+        name: props.name,
+        width,
+        height,
+        direction: unref(direction),
+        data,
+        measures,
+        padding: { left: 10, top: 10, right: 10, bottom: 10 },
+        onEdge: props.onEdge,
+        initFocusId: props.initId
+      }, {
+        renderItem: withCtx(({ data: data2, query, onEdge, onAction }) => [
+          createVNode(Item, {
+            style: normalizeStyle({
+              width: data2.width,
+              height: data2.height,
+              backgroundColor: "#00AA00",
+              color: "#FFFFFF"
+            }),
+            data: data2,
+            query,
+            onEdge,
+            onAction,
+            itemFocus: props.itemFocus
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(data2.name), 1)
+            ]),
+            _: 2
+          }, 1032, ["style", "data", "query", "onEdge", "onAction", "itemFocus"])
+        ]),
+        _: 1
+      }, 8, ["name", "direction", "onEdge", "initFocusId"]);
+    };
+  }
+};
+const _sfc_main$2 = {
+  __name: "BodyFrame",
+  props: {
+    data: Array,
+    name: String,
+    onEdge: Function,
+    tabId: Number
+  },
+  setup(__props) {
+    const props = __props;
+    const router = useRouter();
+    let mw = shallowRef(null);
+    const direction = VERTICAL;
+    const width = 1280;
+    const height = 600;
+    let initFocusId = shallowRef(0);
+    const measures = (item) => {
+      return {
+        width: item.width,
+        height: item.height,
+        focusable: item.focusable
+      };
+    };
+    const itemClick = (index, data) => {
+      if (!data.path) {
+        console.error("Route path is not defined.");
+        return;
+      }
+      router.push(data.path);
+      localStorage.curFocusId = index;
+      localStorage.curTab = props.tabId;
+    };
+    const _provideData = () => {
+      return props.data;
+    };
+    if (typeof localStorage.curFocusId !== "undefined") {
+      initFocusId.value = parseInt(localStorage.curFocusId);
+    }
+    localStorage.curFocusId = 0;
+    watch(
+      () => {
+        return props.data;
+      },
+      () => {
+        mw.value?.refreshData(true);
+      }
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(_sfc_main$F), {
+        ref_key: "mw",
+        ref: mw,
+        name: props.name,
+        width,
+        height,
+        direction: unref(direction),
+        provideData: _provideData,
+        measures,
+        padding: { left: 10, top: 10, right: 10, bottom: 10 },
+        onEdge: props.onEdge,
+        initFocusId: unref(initFocusId)
+      }, {
+        renderItem: withCtx(({ data, query, onEdge, onAction }) => [
+          createVNode(Item, {
+            style: normalizeStyle({
+              width: data.width,
+              height: data.height,
+              backgroundColor: data.backgroundColor,
+              color: "#000000"
+            }),
+            data,
+            query,
+            onEdge,
+            onAction,
+            itemClick
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(data.name), 1)
+            ]),
+            _: 2
+          }, 1032, ["style", "data", "query", "onEdge", "onAction"])
+        ]),
+        _: 1
+      }, 8, ["name", "direction", "onEdge", "initFocusId"]);
+    };
+  }
+};
+const Dialog_vue_vue_type_style_index_0_scoped_12f593c1_lang = "";
+const _sfc_main$1 = {
+  __name: "Dialog",
+  props: {
+    name: String,
+    onAction: Function
+  },
+  setup(__props) {
+    const props = __props;
+    let focusId = shallowRef(0);
+    const onKeyDown = (ev) => {
+      switch (ev.keyCode) {
+        case 37:
+          if (focusId.value == 1) {
+            focusId.value = 0;
+          }
+          break;
+        case 39:
+          if (focusId.value == 0) {
+            focusId.value = 1;
+          }
+          break;
+        case 1e4:
+        case 27:
+          props.onAction("back");
+          break;
+        case 13:
+          props.onAction(focusId.value == 0 ? "ok" : "cancel");
+          break;
+      }
+      return true;
+    };
+    const actionDefines = {
+      onKeyDown
+    };
+    return (_ctx, _cache) => {
+      const _component_jsv_focus_block = resolveComponent("jsv-focus-block");
+      return openBlock(), createBlock(_component_jsv_focus_block, {
+        autoFocus: "",
+        name: props.name,
+        onAction: actionDefines
+      }, {
+        default: withCtx(() => [
+          createBaseVNode("div", { style: { top: 200, left: 465 } }, [
+            createBaseVNode("div", { class: "background" }),
+            createBaseVNode("div", { class: "message" }, "是否退出"),
+            createBaseVNode("div", { style: { top: 120, left: 30 } }, [
+              unref(focusId) == 0 ? (openBlock(), createElementBlock("div", {
+                key: 0,
+                class: "focus"
+              })) : createCommentVNode("", true),
+              createBaseVNode("div", { class: "normal" }, "确定")
+            ]),
+            createBaseVNode("div", { style: { top: 120, left: 220 } }, [
+              unref(focusId) == 1 ? (openBlock(), createElementBlock("div", {
+                key: 0,
+                class: "focus"
+              })) : createCommentVNode("", true),
+              createBaseVNode("div", { class: "normal" }, "取消")
+            ])
+          ])
+        ]),
+        _: 1
+      }, 8, ["name"]);
+    };
+  }
+};
+const styleSheetsContent$1 = { "12f593c1": { ".focus": '{"top":-5,"left":-5,"width":100,"height":50,"backgroundColor":"#0000ff"}', ".normal": '{"width":90,"height":40,"color":"#ffffff","textAlign":"center","fontSize":30}', ".background": '{"left":0,"top":0,"width":350,"height":200,"backgroundColor":"rgba(0, 0, 0, 0.7)"}', ".message": '{"top":20,"width":350,"height":50,"color":"#ffffff","fontSize":40,"textAlign":"center"}' } };
+window.JsvCode.Dom.DeclareStyleSheets(styleSheetsContent$1);
+const Dialog = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-12f593c1"]]);
+const Homepage_vue_vue_type_style_index_0_scoped_1cf4a1a0_lang = "";
+const _sfc_main = {
+  __name: "Homepage",
+  setup(__props) {
+    const colorTemplete = ["#89BEB2", "#C9BA83", "#DED38C", "#DE9C53"];
+    const featureData = [];
+    const metroWidgetData = [];
+    const operationsData = [];
+    const gameData = [];
+    const routeList = useRouter().getRoutes();
+    for (let item of routeList) {
+      let obj = {
+        name: item.name,
+        path: item.path,
+        width: 300,
+        height: 100,
+        focusable: true
+      };
+      if (item.path.indexOf("feature") >= 0) {
+        obj.backgroundColor = colorTemplete[featureData.length % 4];
+        featureData.push(obj);
+      } else if (item.path.indexOf("metroWidget") >= 0) {
+        obj.backgroundColor = colorTemplete[metroWidgetData.length % 4];
+        metroWidgetData.push(obj);
+      } else if (item.path.indexOf("Operations") >= 0) {
+        obj.backgroundColor = colorTemplete[operationsData.length % 4];
+        operationsData.push(obj);
+      } else if (item.path.indexOf("Game") >= 0) {
+        obj.backgroundColor = colorTemplete[gameData.length % 4];
+        gameData.push(obj);
+      }
+    }
+    const dataList = [featureData, metroWidgetData, operationsData, gameData];
+    let showExitDialog = shallowRef(false);
+    let contentData = shallowRef(dataList[0]);
+    let tabId = shallowRef(0);
+    let preFocusName = "";
+    let curFocusName = "";
+    let name = "/home";
+    let focusHub = useFocusHub();
+    let address = computed(() => {
+      return window.localStorage.href;
+    });
+    let onFocus = () => {
+      changeFocus(name + "/bodyFrame");
+    };
+    let onKeyDown = (ev) => {
+      if (ev.keyCode == 8 || // Backspace
+      ev.keyCode == 27 || // Escape
+      ev.keyCode == 1e4) {
+        showExitDialog.value = !showExitDialog.value;
+        if (!showExitDialog.value) {
+          changeFocus(preFocusName);
+        } else {
+          preFocusName = curFocusName;
+          curFocusName = name + "/exitDialog";
+        }
+      }
+      return true;
+    };
+    let changeFocus = (name2) => {
+      preFocusName = curFocusName;
+      curFocusName = name2;
+      focusHub.setFocus(name2);
+    };
+    let onTabEdge = (edgeInfo) => {
+      if (edgeInfo.direction === EdgeDirection.bottom) {
+        changeFocus(name + "/bodyFrame");
+      }
+    };
+    let onContentEdge = (edgeInfo) => {
+      if (edgeInfo.direction === EdgeDirection.top) {
+        changeFocus(name + "/tabFrame");
+      }
+    };
+    let tabItemFocus = (data) => {
+      if (data.id != tabId.value) {
+        tabId.value = data.id;
+        contentData.value = dataList[data.id];
+      }
+    };
+    let onDialogAction = (msg) => {
+      showExitDialog.value = false;
+      changeFocus(preFocusName);
+      switch (msg) {
+        case "ok":
+          bridge.closePage();
+          break;
+      }
+    };
+    let focusNameOfDeactive = null;
+    onActivated(() => {
+      if (focusNameOfDeactive) {
+        focusHub.setFocus(focusNameOfDeactive);
+        focusNameOfDeactive = null;
+      }
+    });
+    onDeactivated(() => {
+      focusNameOfDeactive = focusHub.getDeactivedPageFocus();
+    });
+    return (_ctx, _cache) => {
+      const _component_jsv_focus_block = resolveComponent("jsv-focus-block");
+      return openBlock(), createElementBlock("div", { class: "rootSize" }, [
+        createBaseVNode("div", { class: "address" }, toDisplayString(unref(address)), 1),
+        createBaseVNode("div", { class: "logo" }, toDisplayString("JsView-Vue3 (Vite3) [Release]"), 1),
+        createVNode(_component_jsv_focus_block, {
+          autoFocus: "",
+          onAction: {
+            onKeyDown: unref(onKeyDown),
+            onFocus: unref(onFocus)
+          }
+        }, {
+          default: withCtx(() => [
+            createBaseVNode("div", { style: { left: 10 } }, [
+              createVNode(_sfc_main$3, {
+                name: unref(name) + "/tabFrame",
+                onEdge: unref(onTabEdge),
+                itemFocus: unref(tabItemFocus),
+                initId: unref(tabId)
+              }, null, 8, ["name", "onEdge", "itemFocus", "initId"])
+            ]),
+            createBaseVNode("div", { style: {
+              left: 10,
+              top: 100
+            } }, [
+              createVNode(_sfc_main$2, {
+                data: unref(contentData),
+                name: unref(name) + "/bodyFrame",
+                onEdge: unref(onContentEdge),
+                tabId: unref(tabId)
+              }, null, 8, ["data", "name", "onEdge", "tabId"])
+            ]),
+            unref(showExitDialog) ? (openBlock(), createBlock(Dialog, {
+              key: 0,
+              name: unref(name) + "/exitDialog",
+              onAction: unref(onDialogAction)
+            }, null, 8, ["name", "onAction"])) : createCommentVNode("", true)
+          ]),
+          _: 1
+        }, 8, ["onAction"])
+      ]);
+    };
+  }
+};
+const styleSheetsContent = { "1cf4a1a0": { ".rootSize": '{"width":1920,"height":1080}', ".address": '{"width":1280,"height":30,"color":"#ffffff","fontSize":20}', ".logo": '{"top":10,"width":1260,"height":30,"color":"#00ff00","fontSize":20,"fontWeight":"bold","textAlign":"right"}' } };
+window.JsvCode.Dom.DeclareStyleSheets(styleSheetsContent);
+const Homepage = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-1cf4a1a0"]]);
+export {
+  Homepage as default
+};
+//# sourceMappingURL=http://localhost:57245/map/Homepage.d8afeb55.js.map
+
+/*jsvmd5:a6639e692bc9e6818de66060a4ab9652*/

package/template-vue-vite/dist-test-jsview-chunk/js/HorizontalButtonList.bbdbc725.js

@@ -0,0 +1,160 @@
+import { u as useFocusHub } from "./jsview-vue-entry.415721d8.js";
+import { a as _export_sfc } from "./export-sfc.2749ebea.js";
+import { a as ref, b as resolveComponent, o as openBlock, A as createBlock, l as withCtx, f as createBaseVNode, g as normalizeStyle, e as createElementBlock, q as createCommentVNode, j as renderSlot, k as createVNode, F as Fragment, m as renderList, O as createTextVNode, G as toDisplayString } from "./vue.889a9b8b.js";
+const Item_vue_vue_type_style_index_0_scoped_1c8ae53b_lang = "";
+const _sfc_main$1 = {
+  __name: "Item",
+  props: {
+    style: Object,
+    name: String,
+    autoFocus: Boolean
+  },
+  setup(__props) {
+    const props = __props;
+    const hasFocused = ref(false);
+    const onFocus = () => {
+      hasFocused.value = true;
+    };
+    const onBlur = () => {
+      hasFocused.value = false;
+    };
+    const focusStyle = {
+      width: props.style.width + 10,
+      height: props.style.height + 10
+    };
+    const itemStyle = {
+      width: props.style.width,
+      height: props.style.height,
+      backgroundColor: "#0FF000",
+      lineHeight: props.style.height,
+      fontSize: Math.floor(props.style.height * 0.55)
+    };
+    return (_ctx, _cache) => {
+      const _component_jsv_focus_block = resolveComponent("jsv-focus-block");
+      return openBlock(), createBlock(_component_jsv_focus_block, {
+        name: __props.name,
+        autoFocus: __props.autoFocus ? "" : void 0,
+        onFocus,
+        onBlur
+      }, {
+        default: withCtx(() => [
+          createBaseVNode("div", {
+            style: normalizeStyle(__props.style)
+          }, [
+            hasFocused.value ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              class: "focus",
+              style: focusStyle
+            })) : createCommentVNode("", true),
+            createBaseVNode("div", {
+              class: "item",
+              style: itemStyle
+            }, [
+              renderSlot(_ctx.$slots, "default", {}, void 0, true)
+            ])
+          ], 4)
+        ]),
+        _: 3
+      }, 8, ["name", "autoFocus"]);
+    };
+  }
+};
+const styleSheetsContent = { "1c8ae53b": { ".focus": '{"top":-5,"left":-5,"backgroundColor":"#0000ff"}', ".item": '{"textAlign":"center","fontSize":30,"color":"#000000","whiteSpace":"nowrap"}' } };
+window.JsvCode.Dom.DeclareStyleSheets(styleSheetsContent);
+const Item = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-1c8ae53b"]]);
+const _sfc_main = {
+  __name: "HorizontalButtonList",
+  props: {
+    style: Object,
+    buttonConfig: Object,
+    onButtonClick: Function,
+    onBack: Function
+  },
+  setup(__props) {
+    const props = __props;
+    const focusHub = useFocusHub();
+    const maxWidth = 1280;
+    const listPadding = 10;
+    const buttonWidth = 400;
+    const buttonHeight = 80;
+    const buttonGap = 50;
+    let focusedItemIndex = 0;
+    let listLeft = 0;
+    const listWidth = (buttonWidth + buttonGap) * props.buttonConfig.length;
+    const widthCenter = listWidth - buttonGap;
+    if (widthCenter < maxWidth) {
+      listLeft = Math.floor((maxWidth - widthCenter) / 2);
+    }
+    const listSize = {
+      left: listLeft,
+      width: listWidth,
+      height: buttonHeight
+    };
+    const onKeyDown = (ev) => {
+      if (ev.keyCode === 13) {
+        props.onButtonClick?.(focusedItemIndex);
+        return true;
+      } else if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 1e4) {
+        props.onBack?.();
+        return true;
+      }
+      let changeFocusTo = -1;
+      switch (ev.keyCode) {
+        case 37:
+          changeFocusTo = (focusedItemIndex - 1 + props.buttonConfig.length) % props.buttonConfig.length;
+          break;
+        case 39:
+          changeFocusTo = (focusedItemIndex + 1) % props.buttonConfig.length;
+          break;
+      }
+      if (changeFocusTo >= 0) {
+        focusHub.setFocus(changeFocusTo.toString());
+        focusedItemIndex = changeFocusTo;
+        return true;
+      }
+      return false;
+    };
+    return (_ctx, _cache) => {
+      const _component_jsv_focus_block = resolveComponent("jsv-focus-block");
+      return openBlock(), createElementBlock("div", {
+        style: normalizeStyle(__props.style)
+      }, [
+        createVNode(_component_jsv_focus_block, {
+          style: normalizeStyle({
+            left: listSize.left,
+            width: listSize.width + listPadding * 2,
+            height: listSize.height + listPadding * 2
+          }),
+          onKeyDown
+        }, {
+          default: withCtx(() => [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(__props.buttonConfig, (item, index) => {
+              return openBlock(), createBlock(Item, {
+                key: index,
+                style: normalizeStyle({
+                  left: (buttonWidth + 10) * index,
+                  width: buttonWidth,
+                  height: buttonHeight
+                }),
+                name: index.toString(),
+                autoFocus: index === 0
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(item.name), 1)
+                ]),
+                _: 2
+              }, 1032, ["style", "name", "autoFocus"]);
+            }), 128))
+          ]),
+          _: 1
+        }, 8, ["style"])
+      ], 4);
+    };
+  }
+};
+export {
+  _sfc_main as _
+};
+//# sourceMappingURL=http://localhost:57245/map/HorizontalButtonList.bbdbc725.js.map
+
+/*jsvmd5:5e52f67aa4067cc328336d87131f07a4*/

package/template-vue-vite/dist-test-jsview-chunk/js/MainPage.cff1e89b.js

@@ -0,0 +1,57 @@
+import { a as useRouter } from "./jsview-vue-entry.415721d8.js";
+import { _ as _sfc_main$1 } from "./HorizontalButtonList.bbdbc725.js";
+import { a as _export_sfc } from "./export-sfc.2749ebea.js";
+import { o as openBlock, e as createElementBlock, f as createBaseVNode, k as createVNode } from "./vue.889a9b8b.js";
+import "./jsview-forge-define.bfab260e.js";
+import "./jsview-dom-entry.280f04b1.js";
+const MainPage_vue_vue_type_style_index_0_scoped_d9dcdfa2_lang = "";
+const _sfc_main = {
+  __name: "MainPage",
+  setup(__props) {
+    const router = useRouter();
+    const buttonListConfig = [
+      {
+        name: "启动子界面-First",
+        route: {
+          path: "SubPageFirst",
+          query: { from: "main" }
+        }
+      },
+      {
+        name: "启动子界面-Second",
+        route: {
+          path: "SubPageSecond",
+          query: { from: "main" }
+        }
+      }
+    ];
+    const onButtonClick = (idx) => {
+      const config = buttonListConfig[idx];
+      console.log("Jump page to: " + config.name);
+      router.push(config.route);
+    };
+    const onBack = () => {
+      router.go(-1);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", null, [
+        createBaseVNode("div", { class: "title" }, "这是主界面"),
+        createVNode(_sfc_main$1, {
+          style: { top: 330 },
+          buttonConfig: buttonListConfig,
+          onButtonClick,
+          onBack
+        })
+      ]);
+    };
+  }
+};
+const styleSheetsContent = { "d9dcdfa2": { ".title": '{"top":100,"width":1280,"height":100,"lineHeight":100,"textAlign":"center","fontSize":55}' } };
+window.JsvCode.Dom.DeclareStyleSheets(styleSheetsContent);
+const MainPage = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-d9dcdfa2"]]);
+export {
+  MainPage as default
+};
+//# sourceMappingURL=http://localhost:57245/map/MainPage.cff1e89b.js.map
+
+/*jsvmd5:9dcb87f0f0f28b22c65b32ce91cf2a9d*/