create-jsview 2.1.428 → 2.1.448-test.0

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

@@ -1,676 +0,0 @@
-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*/