create-jsview 2.1.367-test.0 → 2.1.428

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

@@ -0,0 +1,731 @@
+import { u as useFocusHub, G as _sfc_main$i, ag as SeamlessSlide, g as _sfc_main$F, V as VERTICAL, H as HORIZONTAL, ah as METRO_WIDGET, E as EdgeDirection, ai as JsvStyleSheetsDeclarer } from "./jsview-vue-entry.415721d8.js";
+import { s as shallowRef, t as onMounted, o as openBlock, e as createElementBlock, f as createBaseVNode, G as toDisplayString, P as normalizeClass, u as unref, k as createVNode, g as normalizeStyle, a as ref, i as inject, b as resolveComponent, A as createBlock, l as withCtx, p as provide, r as reactive, E as onBeforeUnmount, F as Fragment } 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$2 = {
+  __name: "FloorItem",
+  props: {
+    data: Object,
+    query: Object,
+    onEdge: Function,
+    onAction: Object,
+    getStyleClass: Function,
+    num: Number
+  },
+  setup(__props) {
+    const props = __props;
+    const focusHub = useFocusHub();
+    let changeBg = shallowRef("");
+    let changeSize = shallowRef("");
+    let changePoster = shallowRef("");
+    let changeTitle = shallowRef("");
+    changePoster.value = `poster${props.num}`;
+    changeTitle.value = `title${props.num}`;
+    const onFocus = () => {
+      changeBg.value = `focusBg${props.num}`;
+      changeSize.value = "grow";
+    };
+    const onBlur = () => {
+      changeBg.value = `blurBg1${props.num}`;
+      changeSize.value = "";
+    };
+    props.onAction.register("onFocus", onFocus);
+    props.onAction.register("onBlur", onBlur);
+    props.onAction.register("onEdge", props.onEdge);
+    onMounted(() => {
+      focusHub.setFocus("floor1");
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([unref(changePoster), unref(changeBg), unref(changeSize)])
+      }, [
+        createBaseVNode("div", {
+          class: normalizeClass(unref(changeTitle))
+        }, toDisplayString(props.data.title), 3),
+        createVNode(unref(_sfc_main$i), {
+          style: normalizeStyle(props.data.marqueeData),
+          text: props.data.text,
+          slideSpeed: 100,
+          forceSlide: true
+        }, null, 8, ["style", "text"])
+      ], 2);
+    };
+  }
+};
+const _sfc_main$1 = {
+  __name: "FloorList",
+  props: {
+    changeCount: Function,
+    focusHub: Object,
+    changeStyle: Function,
+    getStyleClass: Function,
+    deleteStyleClass: Function,
+    changeDeletText: Function
+  },
+  setup(__props) {
+    const props = __props;
+    const slideSetting = new SeamlessSlide({ startPercent: 0.2, endPercent: 0.8 });
+    let bg2 = ref("");
+    let bg12 = ref("");
+    let floor1Bg = ref("");
+    let floor2Bg = ref("");
+    let floor3Bg = ref("");
+    let style = inject("style");
+    let sureDelete = inject("sureDelete");
+    const data = [
+      {
+        width: 1280,
+        height: 1350,
+        top: 0,
+        left: 0
+      }
+    ];
+    let data1 = inject("data1");
+    let data2 = inject("data2");
+    let data3 = inject("data3");
+    const measures = (item) => {
+      return {
+        ...item,
+        focusable: true,
+        itemSlide: METRO_WIDGET.ITEM_SLIDE.ACT_FOCUS_RECT_EVENT
+      };
+    };
+    const measures1 = (item) => {
+      return {
+        ...item,
+        focusable: true,
+        itemSlide: METRO_WIDGET.ITEM_SLIDE.ACT_ITEM_FOCUS
+      };
+    };
+    const onEdge1 = (edgeInfo) => {
+      if (edgeInfo.direction == EdgeDirection.bottom) {
+        props.focusHub.setFocus("floor2");
+      }
+    };
+    const onEdge2 = (edgeInfo) => {
+      if (edgeInfo.direction == EdgeDirection.bottom) {
+        props.focusHub.setFocus("floor3");
+      } else if (edgeInfo.direction == EdgeDirection.top) {
+        props.focusHub.setFocus("floor1");
+      }
+    };
+    const onEdge3 = (edgeInfo) => {
+      if (edgeInfo.direction == EdgeDirection.top) {
+        props.focusHub.setFocus("floor2");
+      }
+    };
+    const onKeyDown = (ev) => {
+      switch (ev.keyCode) {
+        case 49:
+          sureDelete.value = false;
+          props.changeDeletText();
+          props.changeStyle();
+          props.getStyleClass();
+          props.changeCount();
+          break;
+        case 50:
+          bg12.value = "";
+          sureDelete.value = true;
+          props.changeDeletText();
+          break;
+      }
+    };
+    const actionDefines = {
+      onKeyDown
+    };
+    const onFocus = () => {
+      props.focusHub.setFocus("floor1");
+    };
+    bg2.value = "bg";
+    floor1Bg.value = "floor1-bg";
+    floor2Bg.value = "floor2-bg";
+    floor3Bg.value = "floor3-bg";
+    bg12.value = "bg1";
+    onMounted(() => {
+      props.focusHub.setFocus("floor1");
+    });
+    return (_ctx, _cache) => {
+      const _component_jsv_focus_block = resolveComponent("jsv-focus-block");
+      return openBlock(), createBlock(_component_jsv_focus_block, {
+        autoFocus: "",
+        onAction: actionDefines
+      }, {
+        default: withCtx(() => [
+          createBaseVNode("div", {
+            class: normalizeClass([unref(bg2), unref(bg12)])
+          }, [
+            createVNode(unref(_sfc_main$F), {
+              name: "floor",
+              width: unref(style).bg.width,
+              height: unref(style).bg.height,
+              data,
+              direction: unref(VERTICAL),
+              measures,
+              onEdge: onEdge1,
+              sendFocusRectEvent: true,
+              slideSetting: unref(slideSetting),
+              "on-focus": onFocus,
+              "layout-type": "absolute"
+            }, {
+              renderItem: withCtx(({ data: data4, query, onEdge, onAction }) => [
+                createBaseVNode("div", {
+                  class: normalizeClass(unref(floor1Bg))
+                }, [
+                  createVNode(unref(_sfc_main$F), {
+                    name: "floor1",
+                    width: unref(style).floor1Metro.width,
+                    height: unref(style).floor1Metro.height + 20,
+                    data: unref(data1),
+                    direction: unref(HORIZONTAL),
+                    measures,
+                    onEdge: onEdge1,
+                    padding: unref(style).floor1Metro.padding,
+                    sendFocusRectEvent: true
+                  }, {
+                    renderItem: withCtx(({ data: data5, query: query2, onEdge: onEdge4, onAction: onAction2 }) => [
+                      createVNode(_sfc_main$2, {
+                        data: data5,
+                        query: query2,
+                        onEdge: onEdge4,
+                        onAction: onAction2,
+                        num: 1
+                      }, null, 8, ["data", "query", "onEdge", "onAction"])
+                    ]),
+                    _: 2
+                  }, 1032, ["width", "height", "data", "direction", "padding"])
+                ], 2),
+                createBaseVNode("div", {
+                  class: normalizeClass(unref(floor2Bg))
+                }, [
+                  createVNode(unref(_sfc_main$F), {
+                    name: "floor2",
+                    width: unref(style).floor2Metro.width,
+                    height: unref(style).floor2Metro.height + 20,
+                    data: unref(data2),
+                    direction: unref(HORIZONTAL),
+                    measures,
+                    onEdge: onEdge2,
+                    padding: unref(style).floor2Metro.padding,
+                    sendFocusRectEvent: true
+                  }, {
+                    renderItem: withCtx(({ data: data5, query: query2, onEdge: onEdge4, onAction: onAction2 }) => [
+                      createVNode(_sfc_main$2, {
+                        data: data5,
+                        query: query2,
+                        onEdge: onEdge4,
+                        onAction: onAction2,
+                        num: 2
+                      }, null, 8, ["data", "query", "onEdge", "onAction"])
+                    ]),
+                    _: 2
+                  }, 1032, ["width", "height", "data", "direction", "padding"])
+                ], 2),
+                createBaseVNode("div", {
+                  class: normalizeClass(unref(floor3Bg))
+                }, [
+                  createVNode(unref(_sfc_main$F), {
+                    name: "floor3",
+                    width: unref(style).floor3Metro.width,
+                    height: unref(style).floor3Metro.height + 20,
+                    data: unref(data3),
+                    direction: unref(HORIZONTAL),
+                    measures: measures1,
+                    onEdge: onEdge3,
+                    padding: unref(style).floor3Metro.padding,
+                    sendFocusRectEvent: true
+                  }, {
+                    renderItem: withCtx(({ data: data5, query: query2, onEdge: onEdge4, onAction: onAction2 }) => [
+                      createVNode(_sfc_main$2, {
+                        data: data5,
+                        query: query2,
+                        onEdge: onEdge4,
+                        onAction: onAction2,
+                        num: 3
+                      }, null, 8, ["data", "query", "onEdge", "onAction"])
+                    ]),
+                    _: 2
+                  }, 1032, ["width", "height", "data", "direction", "padding"])
+                ], 2)
+              ]),
+              _: 1
+            }, 8, ["width", "height", "direction", "slideSetting"])
+          ], 2)
+        ]),
+        _: 1
+      });
+    };
+  }
+};
+const bg$1 = {
+  width: 1280,
+  height: 720,
+  top: 0,
+  left: 0,
+  backgroundColor: "#000000"
+};
+const bg1$1 = {
+  width: 1280,
+  height: 720,
+  top: 0,
+  left: 0,
+  backgroundColor: "#FFFFAA"
+};
+const floor1Metro$1 = {
+  width: 1280,
+  height: 300,
+  top: 0,
+  left: 0,
+  padding: {
+    left: 28
+  },
+  data: {
+    width: 200,
+    height: 300,
+    marginRight: 56,
+    marqueeData: {
+      width: 200,
+      height: 30,
+      fontSize: 22,
+      lineHeight: 30,
+      direction: "ltr",
+      top: 270
+    }
+  }
+};
+const poster1$1 = {
+  width: 200,
+  height: 300,
+  backgroundColor: "#BBBBAA",
+  textAlign: "center"
+};
+const title1$1 = {
+  width: 200,
+  height: 30,
+  left: 0,
+  top: 240,
+  backgroundColor: "#FFFFFF"
+};
+const focusBg1$1 = {
+  backgroundColor: "#DD8800"
+};
+const blurBg1$1 = {
+  backgroundColor: "#BBBBAA"
+};
+const floor2Metro$1 = {
+  width: 1280,
+  height: 400,
+  top: 0,
+  left: 0,
+  padding: {
+    left: 0
+  },
+  data: {
+    width: 620,
+    height: 400,
+    marginRight: 40,
+    marqueeData: {
+      width: 620,
+      height: 40,
+      fontSize: 38,
+      lineHeight: 40,
+      direction: "ltr",
+      top: 360
+    }
+  }
+};
+const poster2$1 = {
+  width: 620,
+  height: 400,
+  backgroundColor: "#BBAAAA",
+  textAlign: "center"
+};
+const title2$1 = {
+  width: 620,
+  height: 50,
+  left: 0,
+  top: 310,
+  backgroundColor: "#FFF221"
+};
+const focusBg2$1 = {
+  backgroundColor: "#00FF00"
+};
+const blurBg2$1 = {
+  backgroundColor: "#BBAAAA"
+};
+const floor3Metro$1 = {
+  width: 1280,
+  height: 300,
+  top: 0,
+  left: 0,
+  padding: {
+    left: 5
+  },
+  data: {
+    width: 150,
+    height: 300,
+    marginRight: 30,
+    marqueeData: {
+      width: 150,
+      height: 30,
+      fontSize: 22,
+      lineHeight: 30,
+      direction: "ltr",
+      top: 270
+    }
+  }
+};
+const poster3$1 = {
+  width: 150,
+  height: 300,
+  backgroundColor: "#BBBBBB",
+  textAlign: "center"
+};
+const title3$1 = {
+  width: 150,
+  height: 30,
+  left: 0,
+  top: 240,
+  backgroundColor: "#FFFFFF"
+};
+const focusBg3$1 = {
+  backgroundColor: "#DD8800"
+};
+const blurBg3$1 = {
+  backgroundColor: "#BBBBBB"
+};
+const grow$1 = {
+  transform: "scale3d(1,1.1,1)"
+};
+const style1 = {
+  bg: bg$1,
+  bg1: bg1$1,
+  "floor1-bg": {
+    width: 1280,
+    height: 300,
+    top: 100,
+    left: 0,
+    fontSize: 28,
+    lineHeight: 30,
+    color: "#FF2312"
+  },
+  floor1Metro: floor1Metro$1,
+  poster1: poster1$1,
+  title1: title1$1,
+  focusBg1: focusBg1$1,
+  blurBg1: blurBg1$1,
+  "floor2-bg": {
+    width: 1280,
+    height: 400,
+    top: 500,
+    left: 0,
+    fontSize: 48,
+    lineHeight: 50,
+    color: "#FFFFFF"
+  },
+  floor2Metro: floor2Metro$1,
+  poster2: poster2$1,
+  title2: title2$1,
+  focusBg2: focusBg2$1,
+  blurBg2: blurBg2$1,
+  "floor3-bg": {
+    width: 1280,
+    height: 300,
+    top: 980,
+    left: 0,
+    fontSize: 28,
+    lineHeight: 30,
+    color: "#FDD312"
+  },
+  floor3Metro: floor3Metro$1,
+  poster3: poster3$1,
+  title3: title3$1,
+  focusBg3: focusBg3$1,
+  blurBg3: blurBg3$1,
+  grow: grow$1
+};
+const bg = {
+  width: 1280,
+  height: 720,
+  top: 0,
+  left: 0,
+  backgroundColor: "#CCCCCC"
+};
+const bg1 = {
+  width: 1280,
+  height: 720,
+  top: 0,
+  left: 0,
+  backgroundColor: "#FDDBBB"
+};
+const floor1Metro = {
+  width: 1280,
+  height: 300,
+  top: 0,
+  left: 0,
+  padding: {
+    left: 28
+  },
+  data: {
+    width: 200,
+    height: 300,
+    marginRight: 56,
+    marqueeData: {
+      width: 200,
+      height: 30,
+      fontSize: 18,
+      lineHeight: 30,
+      direction: "ltr",
+      top: 270
+    }
+  }
+};
+const poster1 = {
+  width: 200,
+  height: 300,
+  backgroundColor: "#BBBBAA",
+  textAlign: "center"
+};
+const title1 = {
+  width: 200,
+  height: 30,
+  left: 0,
+  top: 240,
+  backgroundColor: "#FFFFFF"
+};
+const focusBg1 = {
+  backgroundColor: "#DD8888"
+};
+const blurBg1 = {
+  backgroundColor: "#BBBBAA"
+};
+const floor2Metro = {
+  width: 1280,
+  height: 400,
+  top: 0,
+  left: 0,
+  padding: {
+    left: 0
+  },
+  data: {
+    width: 620,
+    height: 400,
+    marginRight: 40,
+    marqueeData: {
+      width: 620,
+      height: 40,
+      fontSize: 30,
+      lineHeight: 40,
+      direction: "ltr",
+      top: 360
+    }
+  }
+};
+const poster2 = {
+  width: 620,
+  height: 400,
+  backgroundColor: "#BBAAAA",
+  textAlign: "center"
+};
+const title2 = {
+  width: 620,
+  height: 50,
+  left: 0,
+  top: 310,
+  backgroundColor: "#FFF221"
+};
+const focusBg2 = {
+  backgroundColor: "#BBFF66"
+};
+const blurBg2 = {
+  backgroundColor: "#BBAAAA"
+};
+const floor3Metro = {
+  width: 1280,
+  height: 300,
+  top: 0,
+  left: 0,
+  padding: {
+    left: 5
+  },
+  data: {
+    width: 150,
+    height: 300,
+    marginRight: 30,
+    marqueeData: {
+      width: 150,
+      height: 30,
+      fontSize: 18,
+      lineHeight: 30,
+      direction: "ltr",
+      top: 270
+    }
+  }
+};
+const poster3 = {
+  width: 150,
+  height: 300,
+  backgroundColor: "#BBBBBB",
+  textAlign: "center"
+};
+const title3 = {
+  width: 150,
+  height: 30,
+  left: 0,
+  top: 240,
+  backgroundColor: "#FFFFFF"
+};
+const focusBg3 = {
+  backgroundColor: "#DD8888"
+};
+const blurBg3 = {
+  backgroundColor: "#BBBBBB"
+};
+const grow = {
+  transition: "transform 0.35s cubic-bezier(0.42, 3.96, 0.62, 0)",
+  transform: "scale3d(1,1.1,1)"
+};
+const style2 = {
+  bg,
+  bg1,
+  "floor1-bg": {
+    width: 1280,
+    height: 300,
+    top: 100,
+    left: 0,
+    fontSize: 20,
+    lineHeight: 30,
+    color: "#DAAD21"
+  },
+  floor1Metro,
+  poster1,
+  title1,
+  focusBg1,
+  blurBg1,
+  "floor2-bg": {
+    width: 1280,
+    height: 400,
+    top: 500,
+    left: 0,
+    fontSize: 38,
+    lineHeight: 50,
+    color: "#FFFFFF"
+  },
+  floor2Metro,
+  poster2,
+  title2,
+  focusBg2,
+  blurBg2,
+  "floor3-bg": {
+    width: 1280,
+    height: 300,
+    top: 980,
+    left: 0,
+    fontSize: 20,
+    lineHeight: 30,
+    color: "#FDD312"
+  },
+  floor3Metro,
+  poster3,
+  title3,
+  focusBg3,
+  blurBg3,
+  grow
+};
+const App_vue_vue_type_style_index_0_scoped_804fb84c_lang = "";
+const _sfc_main = {
+  __name: "App",
+  setup(__props) {
+    let style = shallowRef(style1);
+    let styleText = shallowRef("style1.json");
+    let deletText = shallowRef("未删除第二个class背景色");
+    let effectArray = [
+      "整体字体更大，标题颜色变化，聚焦颜色：土黄色以及绿色。",
+      "整体文字变小，标题颜色变化，聚焦颜色：粉色以及荧光绿色。"
+    ];
+    let sureDelete = shallowRef(false);
+    provide("sureDelete", sureDelete);
+    let effectText = shallowRef(effectArray[0]);
+    const focusHub = useFocusHub();
+    let count = shallowRef(0);
+    const changeCount = () => {
+      count.value += 1;
+    };
+    const changeStyle = () => {
+      style.value = style.value == style1 ? style2 : style1;
+      styleText.value = style.value == style1 ? "style1.json" : "style2.json";
+      effectText.value = style.value == style1 ? effectArray[0] : effectArray[1];
+    };
+    const changeDeletText = () => {
+      console.log("sureDelete.value", sureDelete.value);
+      if (sureDelete.value == true) {
+        deletText.value = "已删除第二个class背景色";
+      } else {
+        deletText.value = "未删除第二个class背景色";
+      }
+    };
+    const getStyleClass = () => {
+      for (let className in style.value) {
+        const styleProperties = style.value[className];
+        JsvStyleSheetsDeclarer.DeclareClass(className, styleProperties);
+      }
+    };
+    getStyleClass();
+    const deleteStyleClass = () => {
+      for (let className in style.value) {
+        JsvStyleSheetsDeclarer.UndeclareClass(`${className}`);
+      }
+    };
+    let data1 = reactive([]);
+    let data2 = reactive([]);
+    let data3 = reactive([]);
+    const dataShow = (dataNum, data, length) => {
+      dataNum.splice(0, dataNum.length);
+      for (let i = 0; i < length; i++) {
+        const item = {
+          index: i,
+          ...data,
+          title: `我是标题${i}`,
+          text: `我是跑马灯简介我是跑马灯简介我是跑马灯简介${i}`
+        };
+        dataNum.push(item);
+      }
+    };
+    dataShow(data1, style.value.floor1Metro.data, 5);
+    dataShow(data2, style.value.floor2Metro.data, 2);
+    dataShow(data3, style.value.floor3Metro.data, 8);
+    provide("data1", data1);
+    provide("data2", data2);
+    provide("data3", data3);
+    provide("style", style);
+    focusHub.enableFocusTrace(true);
+    onBeforeUnmount(() => {
+      deleteStyleClass();
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createBaseVNode("div", { class: "direction" }, toDisplayString("操作指南：按 [1] 切换json文件，按 [2] 删除第二个背景色class。可通过方向键移动。 当前json: " + unref(styleText)), 1),
+        createBaseVNode("div", { class: "myEffect" }, toDisplayString("当前效果: " + unref(effectText) + " " + unref(deletText)), 1),
+        (openBlock(), createBlock(_sfc_main$1, {
+          name: "FloorList",
+          focusHub: unref(focusHub),
+          changeStyle,
+          getStyleClass,
+          deleteStyleClass,
+          changeDeletText,
+          changeCount,
+          key: unref(count)
+        }, null, 8, ["focusHub"]))
+      ], 64);
+    };
+  }
+};
+const styleSheetsContent = { "804fb84c": { ".direction": '{"top":10,"left":0,"width":1280,"height":36,"fontSize":26,"lineHeight":36,"zIndex":999,"color":"#0000ff"}', ".myEffect": '{"top":50,"left":0,"width":1280,"height":30,"lineHeight":30,"fontSize":26,"zIndex":999,"color":"#ff0000"}' } };
+window.JsvCode.Dom.DeclareStyleSheets(styleSheetsContent);
+const App = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-804fb84c"]]);
+export {
+  App as default
+};
+//# sourceMappingURL=http://localhost:57245/map/App.ba82ae89.js.map
+
+/*jsvmd5:be0632f497c414b932c2821f993c8493*/