create-jsview 2.1.367-test.0 → 2.1.428

package/template-vue-vite/dist-test-jsview-chunk/js/App.a059fc60.js

@@ -0,0 +1,676 @@
+import { u as useFocusHub, H as HORIZONTAL, g as _sfc_main$F, ag as SeamlessSlide, V as VERTICAL, ah as METRO_WIDGET, Q as getKeyFramesGroup, a as useRouter, E as EdgeDirection } from "./jsview-vue-entry.415721d8.js";
+import { s as shallowRef, a as ref, o as openBlock, e as createElementBlock, g as normalizeStyle, q as createCommentVNode, f as createBaseVNode, G as toDisplayString, k as createVNode, l as withCtx, u as unref, w as watch, E as onBeforeUnmount, A as createBlock, r as reactive, b as resolveComponent, i as inject, p as provide } from "./vue.889a9b8b.js";
+import { a as _export_sfc } from "./export-sfc.2749ebea.js";
+import "./jsview-forge-define.bfab260e.js";
+import "./jsview-dom-entry.280f04b1.js";
+const _sfc_main$6 = {
+  __name: "Item",
+  props: {
+    data: Object,
+    query: Object,
+    onAction: Object
+  },
+  setup(__props) {
+    const props = __props;
+    const divRef = shallowRef(null);
+    const focused = ref(false);
+    const onFocus = () => {
+      focused.value = true;
+    };
+    const onBlur = () => {
+      focused.value = false;
+    };
+    const onClick = () => {
+      console.log("item onclick ", props.data);
+    };
+    props.onAction.register("onFocus", onFocus);
+    props.onAction.register("onBlur", onBlur);
+    props.onAction.register("onClick", onClick);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        style: normalizeStyle({
+          width: __props.data.width,
+          height: __props.data.height,
+          transform: focused.value ? "scale3d(1.2, 1.2, 1.2)" : "",
+          transition: "transform 0.2s linear"
+        })
+      }, [
+        focused.value ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          style: normalizeStyle({
+            left: -2,
+            top: -2,
+            width: __props.data.width + 4,
+            height: __props.data.height + 4,
+            backgroundColor: "#FF0000"
+          })
+        }, null, 4)) : createCommentVNode("", true),
+        createBaseVNode("div", {
+          ref_key: "divRef",
+          ref: divRef,
+          style: normalizeStyle({
+            width: __props.data.width,
+            height: __props.data.height,
+            fontSize: 30,
+            color: "#FFFFFF",
+            backgroundColor: __props.data.color
+          })
+        }, toDisplayString(__props.data.content), 5)
+      ], 4);
+    };
+  }
+};
+const _sfc_main$5 = {
+  __name: "WidgetItem",
+  props: {
+    data: Object,
+    query: Object,
+    onItemEdge: Function,
+    onAction: Object
+  },
+  setup(__props) {
+    const props = __props;
+    const focusHub = useFocusHub();
+    const mwRef = shallowRef(null);
+    const measures = (item) => {
+      return item;
+    };
+    const randomColor = () => {
+      let randomColor2 = Math.round(Math.random() * 2 ** 24).toString(16);
+      return "#" + new Array(6 - randomColor2.length).fill("0").join("") + randomColor2;
+    };
+    const provideData = () => {
+      const data = [];
+      for (let i = 0; i < 10; i++) {
+        data.push({
+          width: 90,
+          height: 90,
+          marginRight: 10,
+          marginBottom: 10,
+          content: i,
+          color: randomColor()
+        });
+      }
+      return data;
+    };
+    const onFocus = (rect) => {
+      mwRef.value?.setEnterFocusRect(rect);
+      focusHub.setFocus(props.data.name);
+    };
+    const onBlur = () => {
+      focusHub.returnFocusToParent();
+    };
+    props.onAction.register("onFocus", onFocus);
+    props.onAction.register("onBlur", onBlur);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", null, [
+        createBaseVNode("div", { style: {
+          width: 900,
+          height: 50,
+          fontSize: 30,
+          color: "#FFFFFF"
+        } }, toDisplayString(__props.data.name), 1),
+        createVNode(unref(_sfc_main$F), {
+          ref_key: "mwRef",
+          ref: mwRef,
+          top: 50,
+          name: __props.data.name,
+          provideData,
+          width: __props.data.width,
+          height: __props.data.height,
+          direction: unref(HORIZONTAL),
+          padding: {
+            left: 10,
+            right: 10,
+            top: 10,
+            bottom: 10
+          },
+          measures,
+          onEdge: __props.onItemEdge,
+          sendFocusRectEvent: true
+        }, {
+          renderItem: withCtx(({ data, query, onAction }) => [
+            createVNode(_sfc_main$6, {
+              data,
+              query,
+              onAction
+            }, null, 8, ["data", "query", "onAction"])
+          ]),
+          _: 1
+        }, 8, ["name", "width", "height", "direction", "onEdge"])
+      ]);
+    };
+  }
+};
+const _sfc_main$4 = {
+  __name: "AppPage",
+  props: {
+    data: {
+      type: Object,
+      require: true
+    },
+    name: {
+      type: String,
+      require: true
+    },
+    onEdge: {
+      type: Function
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    const widgetRef = shallowRef(null);
+    const slideSetting = props.data.tabIndex == 0 ? new SeamlessSlide({
+      startPercent: 0.5,
+      endPercent: 0.5,
+      fixFirstPage: true
+    }) : new SeamlessSlide();
+    const provideData = () => {
+      return props.data.data;
+    };
+    const measures = (item) => {
+      return {
+        width: item.width,
+        height: item.height,
+        itemSlide: METRO_WIDGET.ITEM_SLIDE.ACT_FOCUS_RECT_EVENT
+      };
+    };
+    const watcher = watch(
+      () => props.data,
+      (newValue, oldValue) => {
+        widgetRef.value?.refreshData();
+      }
+    );
+    onBeforeUnmount(() => {
+      watcher();
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(_sfc_main$F), {
+        ref_key: "widgetRef",
+        ref: widgetRef,
+        name: __props.name,
+        width: __props.data.width,
+        height: __props.data.height,
+        provideData,
+        direction: unref(VERTICAL),
+        measures,
+        onEdge: __props.onEdge,
+        slideSetting: unref(slideSetting)
+      }, {
+        renderItem: withCtx(({ data, query, onItemEdge, onAction }) => [
+          createVNode(_sfc_main$5, {
+            data,
+            query,
+            onItemEdge,
+            onAction
+          }, null, 8, ["data", "query", "onItemEdge", "onAction"])
+        ]),
+        _: 1
+      }, 8, ["name", "width", "height", "direction", "onEdge", "slideSetting"]);
+    };
+  }
+};
+const _sfc_main$3 = {
+  components: {
+    AppPage: _sfc_main$4
+  },
+  props: {
+    name: {
+      type: String
+    },
+    curIndex: {
+      type: Object
+    },
+    pageData: {
+      type: Array
+    },
+    onEdge: {
+      type: Function
+    },
+    layout: {
+      type: Object
+    },
+    duration: {
+      type: Number,
+      default: 0.3
+    }
+  },
+  inject: ["globalInfo"],
+  provide() {
+    return {
+      animState: this.animState
+    };
+  },
+  setup() {
+    let styleShell = getKeyFramesGroup();
+    let animState = reactive({
+      value: 0
+      //0: 不在动画， 在动画中
+    });
+    return {
+      refName0: "page0",
+      refName1: "page1",
+      styleShell,
+      animState,
+      focusHub: useFocusHub()
+    };
+  },
+  data() {
+    return {
+      curPage: 0,
+      page0Show: true,
+      page1Show: false,
+      page0Data: this.pageData[0],
+      page1Data: null,
+      page0Left: 0,
+      page1Left: 1280,
+      page0Anim: {
+        anim: "",
+        onend: null
+      },
+      page1Anim: {
+        anim: "",
+        onend: null
+      }
+    };
+  },
+  methods: {
+    $_appSwiper_onFocus() {
+      let curPageData = this.curPage === 0 ? this.page0Data : this.page1Data;
+      this.focusHub.setFocus(curPageData.name);
+    },
+    $_appSwiper_tabIdWatcher(newValue, oldValue) {
+      console.log("AppSwiper curIndex changed ", newValue, oldValue);
+      if (newValue != oldValue) {
+        let direction = newValue > oldValue ? "left" : "right";
+        if (this.curPage == 0) {
+          this.curPage = 1;
+          this.page1Data = this.pageData[newValue];
+          this.page1Show = true;
+          this.animState.value = 1;
+          this.page0Anim = {
+            anim: `app-swiper-${direction}-slide-out ${this.duration}s`,
+            onend: () => {
+              this.page0Show = false;
+              this.page0Data = null;
+              this.animState.value = 0;
+            }
+          };
+          this.page1Anim = {
+            anim: `app-swiper-${direction}-slide-in ${this.duration}s`,
+            onend: null
+          };
+        } else {
+          this.curPage = 0;
+          this.page0Data = this.pageData[newValue];
+          this.page0Show = true;
+          this.animState.value = 1;
+          this.page0Anim = {
+            anim: `app-swiper-${direction}-slide-in ${this.duration}s`,
+            onend: null
+          };
+          this.page1Anim = {
+            anim: `app-swiper-${direction}-slide-out ${this.duration}s`,
+            onend: () => {
+              this.page1Show = false;
+              this.page1Data = null;
+              this.animState.value = 0;
+            }
+          };
+        }
+      }
+    },
+    $_appSwiper_initAnimation() {
+      let leftSlideOutDefine = `@keyframes app-swiper-left-slide-out {
+        from {
+          transform: translate3d(0, 0, 0);
+        }
+        to {
+          transform: translate3d(${-this.layout.width}, 0, 0);
+        }
+      }`;
+      let leftSlideInDefine = `@keyframes app-swiper-left-slide-in {
+        from {
+          transform: translate3d(${this.layout.width}, 0, 0);
+        }
+        to {
+          transform: translate3d(0, 0, 0);
+        }
+      }`;
+      let rightSlideOutDefine = `@keyframes app-swiper-right-slide-out {
+        from {
+          transform: translate3d(0, 0, 0);
+        }
+        to {
+          transform: translate3d(${this.layout.width}, 0, 0);
+        }
+      }`;
+      let rightSlideInDefine = `@keyframes app-swiper-right-slide-in {
+        from {
+          transform: translate3d(${-this.layout.width}, 0, 0);
+        }
+        to {
+          transform: translate3d(0, 0, 0);
+        }
+      }`;
+      this.styleShell.insertRule(leftSlideOutDefine);
+      this.styleShell.insertRule(leftSlideInDefine);
+      this.styleShell.insertRule(rightSlideOutDefine);
+      this.styleShell.insertRule(rightSlideInDefine);
+    },
+    $_appSwiper_releaseAnimation() {
+      this.styleShell.removeRule("app-swiper-left-slide-out");
+      this.styleShell.removeRule("app-swiper-left-slide-in");
+      this.styleShell.removeRule("app-swiper-right-slide-out");
+      this.styleShell.removeRule("app-swiper-right-slide-in");
+    }
+  },
+  created() {
+    console.log("AppSwiper created", this.globalInfo);
+    this.$watch(() => this.globalInfo.tabId, this.$_appSwiper_tabIdWatcher);
+    this.$_appSwiper_initAnimation();
+  },
+  beforeUnmount() {
+    this.$_appSwiper_releaseAnimation();
+  }
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_app_page = resolveComponent("app-page");
+  const _component_jsv_focus_block = resolveComponent("jsv-focus-block");
+  return openBlock(), createBlock(_component_jsv_focus_block, {
+    name: $props.name,
+    ref: "focusNode",
+    onAction: {
+      onFocus: $options.$_appSwiper_onFocus
+    }
+  }, {
+    default: withCtx(() => [
+      createBaseVNode("div", {
+        style: normalizeStyle({
+          animation: $data.page0Anim.anim,
+          animationFillMode: "forwards"
+        }),
+        onAnimationend: _cache[0] || (_cache[0] = (...args) => $data.page0Anim.onend && $data.page0Anim.onend(...args))
+      }, [
+        $data.page0Show ? (openBlock(), createBlock(_component_app_page, {
+          key: 0,
+          data: $data.page0Data,
+          name: $data.page0Data.name,
+          onEdge: $props.onEdge
+        }, null, 8, ["data", "name", "onEdge"])) : createCommentVNode("", true)
+      ], 36),
+      createBaseVNode("div", {
+        style: normalizeStyle({
+          animation: $data.page1Anim.anim,
+          animationFillMode: "forwards"
+        }),
+        onAnimationend: _cache[1] || (_cache[1] = (...args) => $data.page1Anim.onend && $data.page1Anim.onend(...args))
+      }, [
+        $data.page1Show ? (openBlock(), createBlock(_component_app_page, {
+          key: 0,
+          data: $data.page1Data,
+          name: $data.page1Data.name,
+          onEdge: $props.onEdge
+        }, null, 8, ["data", "name", "onEdge"])) : createCommentVNode("", true)
+      ], 36)
+    ]),
+    _: 1
+  }, 8, ["name", "onAction"]);
+}
+const ViewSwiper = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render]]);
+const _sfc_main$2 = {
+  __name: "TabItem",
+  props: {
+    data: Object,
+    query: Object,
+    onAction: Object
+  },
+  setup(__props) {
+    const props = __props;
+    const globalInfo = inject("globalInfo");
+    const focused = ref(false);
+    const active = ref(false);
+    const onFocus = () => {
+      globalInfo.tabId = props.query.id;
+      focused.value = true;
+      active.value = false;
+    };
+    const onBlur = () => {
+      focused.value = false;
+      active.value = props.query.getCurrentFocusId().id === props.query.id ? true : false;
+    };
+    const onClick = () => {
+      console.log("tab item onclick ", props.data);
+    };
+    props.onAction.register("onFocus", onFocus);
+    props.onAction.register("onBlur", onBlur);
+    props.onAction.register("onClick", onClick);
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        style: normalizeStyle({
+          width: __props.data.width,
+          height: __props.data.height,
+          transform: focused.value ? "scale3d(1.2, 1.2, 1.2)" : "",
+          transition: "transform 0.2s linear"
+        })
+      }, [
+        !focused.value && active.value ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          style: normalizeStyle({
+            left: -2,
+            top: -2,
+            width: __props.data.width + 4,
+            height: __props.data.height + 4,
+            backgroundColor: "#00FF00"
+          })
+        }, null, 4)) : createCommentVNode("", true),
+        focused.value ? (openBlock(), createElementBlock("div", {
+          key: 1,
+          style: normalizeStyle({
+            left: -2,
+            top: -2,
+            width: __props.data.width + 4,
+            height: __props.data.height + 4,
+            backgroundColor: "#FF0000"
+          })
+        }, null, 4)) : createCommentVNode("", true),
+        createBaseVNode("div", {
+          style: normalizeStyle({
+            width: __props.data.width,
+            height: __props.data.height,
+            fontSize: 30,
+            color: "#FFFFFF",
+            backgroundColor: __props.data.color
+          })
+        }, toDisplayString(__props.data.content), 5)
+      ], 4);
+    };
+  }
+};
+const _sfc_main$1 = {
+  __name: "AppTab",
+  props: {
+    data: {
+      type: Object,
+      require: true
+    },
+    name: {
+      type: String,
+      require: true
+    },
+    layout: {
+      type: Object
+    },
+    onEdge: {
+      type: Function
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    const measures = (item) => {
+      return {
+        width: item.width,
+        height: item.height,
+        marginRight: item.marginRight
+      };
+    };
+    const provideData = () => {
+      return props.data;
+    };
+    return (_ctx, _cache) => {
+      const _component_jsv_focus_block = resolveComponent("jsv-focus-block");
+      return openBlock(), createBlock(_component_jsv_focus_block, null, {
+        default: withCtx(() => [
+          createVNode(unref(_sfc_main$F), {
+            name: __props.name,
+            width: __props.layout.width,
+            height: __props.layout.height,
+            provideData,
+            direction: unref(HORIZONTAL),
+            measures,
+            onEdge: __props.onEdge,
+            padding: {
+              top: 30,
+              left: 60,
+              right: 60
+            }
+          }, {
+            renderItem: withCtx(({ data, query, onAction }) => [
+              createVNode(_sfc_main$2, {
+                data,
+                query,
+                onAction
+              }, null, 8, ["data", "query", "onAction"])
+            ]),
+            _: 1
+          }, 8, ["name", "width", "height", "direction", "onEdge"])
+        ]),
+        _: 1
+      });
+    };
+  }
+};
+const _sfc_main = {
+  __name: "App",
+  setup(__props) {
+    const router = useRouter();
+    const pageList = [];
+    const tabData = [];
+    const focusHub = useFocusHub();
+    const randomColor = () => {
+      let randomColor2 = Math.round(Math.random() * 2 ** 24).toString(16);
+      return "#" + new Array(6 - randomColor2.length).fill("0").join("") + randomColor2;
+    };
+    for (let i = 0; i < 10; ++i) {
+      tabData.push({
+        width: 150,
+        height: 50,
+        marginRight: 10,
+        content: i == 0 ? "首屏不动" : "Tab_" + i,
+        color: randomColor()
+      });
+      const pageData = [];
+      for (let j = 0; j < 10; ++j) {
+        pageData.push({
+          width: 500,
+          height: 170,
+          name: "testPage_" + i + "-widget_" + j,
+          marginBottom: 10,
+          index: j
+        });
+      }
+      pageList.push({
+        width: 600,
+        height: 600,
+        data: pageData,
+        name: "testPage-" + i,
+        tabIndex: i
+      });
+    }
+    let globalInfo = reactive({
+      tabId: 0
+    });
+    let focusNode = shallowRef(null);
+    const appPageName = "/page";
+    const appTabName = "/tab";
+    const curFocusName = shallowRef("/tab");
+    provide("globalInfo", globalInfo);
+    const $_app_onFocus = () => {
+      console.log("App onFocus");
+      focusHub.setFocus(curFocusName.value);
+    };
+    const onKeyDown = (ev) => {
+      if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 1e4) {
+        router?.go(-1);
+      }
+      return true;
+    };
+    const $_app_pageOnEdge = (info) => {
+      console.log("App page on edge ", info);
+      if (info.direction === EdgeDirection.top) {
+        curFocusName.value = "/tab";
+        focusHub.setFocus(appTabName);
+      }
+    };
+    const $_app_tabOnEdge = (info) => {
+      console.log("App tab on edge ", info);
+      if (info.direction === EdgeDirection.bottom) {
+        curFocusName.value = "/page";
+        focusHub.setFocus(appPageName);
+      }
+    };
+    return (_ctx, _cache) => {
+      const _component_jsv_focus_block = resolveComponent("jsv-focus-block");
+      return openBlock(), createBlock(_component_jsv_focus_block, {
+        ref_key: "focusNode",
+        ref: focusNode,
+        name: "/main",
+        autoFocus: "",
+        onAction: {
+          onKeyDown,
+          onFocus: $_app_onFocus
+        },
+        style: {
+          width: 1280,
+          height: 720,
+          backgroundColor: "#007788"
+        }
+      }, {
+        default: withCtx(() => [
+          createBaseVNode("div", { style: {
+            top: 0,
+            left: 100
+          } }, [
+            createVNode(_sfc_main$1, {
+              data: tabData,
+              name: appTabName,
+              layout: { width: 600, height: 100 },
+              onEdge: $_app_tabOnEdge,
+              style: {
+                top: 15
+              }
+            })
+          ]),
+          createBaseVNode("div", { style: { top: 100, left: 200 } }, [
+            createVNode(ViewSwiper, {
+              name: appPageName,
+              pageData: pageList,
+              onEdge: $_app_pageOnEdge,
+              layout: {
+                width: 600,
+                height: 600
+              }
+            })
+          ])
+        ]),
+        _: 1
+      }, 8, ["onAction"]);
+    };
+  }
+};
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=http://localhost:57245/map/App.a059fc60.js.map
+
+/*jsvmd5:87df076ddb658360b4d3626013c047f9*/