@shijiu/jsview-vue 0.9.246 → 0.9.254

package/samples/FlipCard/FlipCard.vue

@@ -1,124 +1,124 @@
-<script>
-export default {
-  props: {
-    initFlipped: Boolean,
-    width: Number,
-    height: Number,
-    backImg: String,
-    foreImg: String,
-    perspective: Number,
-    data: Object,
-    query: Object,
-    onEdge: Function,
-    onAction: Object,
-    name: String,
-  },
-  data() {
-    return {
-      flipAnim: "",
-      flipped: this.initFlipped,
-      focused: false,
-      keyLocked: false,
-    };
-  },
-  methods: {
-    onFocus() {
-      this.focused = true;
-      this.$refs.focusNode.findBlockByName(this.name).requestFocus();
-    },
-    onBlur() {
-      this.focused = false;
-    },
-    onClick() {},
-    onFlipped() {
-      this.flipped = !this.flipped;
-      this.keyLocked = false;
-    },
-    onKeyDown(ev) {
-      if (this.keyLocked) {
-        return true;
-      } else {
-        if (ev.keyCode === 13) {
-          // this.keyLocked = true;
-          this.flipAnim = this.flipped ? "flip 1s" : "flipBack 1s";
-          return true;
-        }
-      }
-      return false;
-    },
-  },
-  created() {
-    this.onAction.register("onFocus", this.onFocus);
-    this.onAction.register("onBlur", this.onBlur);
-    this.onAction.register("onClick", this.onClick);
-  },
-};
-</script>
-<template>
-  <jsv-focus-block
-    ref="focusNode"
-    :name="name"
-    :onAction="{
-      onKeyDown: onKeyDown,
-    }"
-  >
-    <div :style="{ width, height, perspective }">
-      <div
-        :style="{
-          width,
-          height,
-          animation: flipAnim,
-          transformStyle: 'preserve-3d',
-          backgroundColor: '#FFFF00',
-        }"
-        :onAnimationEnd="onFlipped"
-      >
-        <div
-          :style="{
-            width,
-            height,
-            backgroundImage: backImg,
-            backfaceVisibility: 'hidden',
-            transform: flipped ? '' : 'rotate3d(0,1,0,180deg)',
-          }"
-        ></div>
-        <div
-          :style="{
-            width,
-            height,
-            backgroundImage: foreImg,
-            backfaceVisibility: 'hidden',
-            transform: flipped ? 'rotate3d(0,1,0,-180deg)' : '',
-          }"
-        ></div>
-      </div>
-    </div>
-    <div
-      v-if="focused"
-      :style="{ width: 20, height: 20, backgroundColor: '#FF0000' }"
-    ></div>
-  </jsv-focus-block>
-</template>
-<style>
-@keyframes flip {
-  from {
-    transform: rotate3d(0, 1, 0, 0deg);
-    transform-origin: center center;
-  }
-  to {
-    transform: rotate3d(0, 1, 0, 180deg);
-    transform-origin: center center;
-  }
-}
-
-@keyframes flipBack {
-  from {
-    transform: rotate3d(0, 1, 0, 0deg);
-    transform-origin: center center;
-  }
-  to {
-    transform: rotate3d(0, 1, 0, -180deg);
-    transform-origin: center center;
-  }
-}
+<script>
+export default {
+  props: {
+    initFlipped: Boolean,
+    width: Number,
+    height: Number,
+    backImg: String,
+    foreImg: String,
+    perspective: Number,
+    data: Object,
+    query: Object,
+    onEdge: Function,
+    onAction: Object,
+    name: String,
+  },
+  data() {
+    return {
+      flipAnim: "",
+      flipped: this.initFlipped,
+      focused: false,
+      keyLocked: false,
+    };
+  },
+  methods: {
+    onFocus() {
+      this.focused = true;
+      this.$refs.focusNode.findBlockByName(this.name).requestFocus();
+    },
+    onBlur() {
+      this.focused = false;
+    },
+    onClick() {},
+    onFlipped() {
+      this.flipped = !this.flipped;
+      this.keyLocked = false;
+    },
+    onKeyDown(ev) {
+      if (this.keyLocked) {
+        return true;
+      } else {
+        if (ev.keyCode === 13) {
+          // this.keyLocked = true;
+          this.flipAnim = this.flipped ? "flip 1s" : "flipBack 1s";
+          return true;
+        }
+      }
+      return false;
+    },
+  },
+  created() {
+    this.onAction.register("onFocus", this.onFocus);
+    this.onAction.register("onBlur", this.onBlur);
+    this.onAction.register("onClick", this.onClick);
+  },
+};
+</script>
+<template>
+  <jsv-focus-block
+    ref="focusNode"
+    :name="name"
+    :onAction="{
+      onKeyDown: onKeyDown,
+    }"
+  >
+    <div :style="{ width, height, perspective }">
+      <div
+        :style="{
+          width,
+          height,
+          animation: flipAnim,
+          transformStyle: 'preserve-3d',
+          backgroundColor: '#FFFF00',
+        }"
+        :onAnimationEnd="onFlipped"
+      >
+        <div
+          :style="{
+            width,
+            height,
+            backgroundImage: backImg,
+            backfaceVisibility: 'hidden',
+            transform: flipped ? '' : 'rotate3d(0,1,0,180deg)',
+          }"
+        ></div>
+        <div
+          :style="{
+            width,
+            height,
+            backgroundImage: foreImg,
+            backfaceVisibility: 'hidden',
+            transform: flipped ? 'rotate3d(0,1,0,-180deg)' : '',
+          }"
+        ></div>
+      </div>
+    </div>
+    <div
+      v-if="focused"
+      :style="{ width: 20, height: 20, backgroundColor: '#FF0000' }"
+    ></div>
+  </jsv-focus-block>
+</template>
+<style>
+@keyframes flip {
+  from {
+    transform: rotate3d(0, 1, 0, 0deg);
+    transform-origin: center center;
+  }
+  to {
+    transform: rotate3d(0, 1, 0, 180deg);
+    transform-origin: center center;
+  }
+}
+
+@keyframes flipBack {
+  from {
+    transform: rotate3d(0, 1, 0, 0deg);
+    transform-origin: center center;
+  }
+  to {
+    transform: rotate3d(0, 1, 0, -180deg);
+    transform-origin: center center;
+  }
+}
 </style>

package/samples/FlipCard/data.js

@@ -1,13 +1,13 @@
-let data = [];
-for (let i = 0; i < 12; i++) {
-    data.push({
-        blocks: {
-            w: 200,
-            h: 300
-        },
-        focusable: true,
-        id: i
-    });
-}
-
+let data = [];
+for (let i = 0; i < 12; i++) {
+    data.push({
+        blocks: {
+            w: 200,
+            h: 300
+        },
+        focusable: true,
+        id: i
+    });
+}
+
 export { data }

package/samples/FlowMultiWidget/App.vue

@@ -1,91 +1,91 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2021-09-27 13:49:00
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2021-10-15 14:31:05
- * @Description: file content
--->
-<script>
-import { menuData, contentData } from "./data.js";
-import FlowPage from "./components/FlowPage.vue";
-import borderImg from "./assets/nine_patch_focus.png";
-import MyMenu from "./components/MyMenu.vue";
-import { ref } from "vue";
-
-export default {
-  components: {
-    FlowPage,
-    MyMenu,
-  },
-  setup() {
-    let showMenu = ref(false);
-    return {
-      menuData,
-      contentData,
-      borderImg,
-      showMenu,
-    };
-  },
-  methods: {
-    onFocus() {
-      this.$refs.rootNode.findBlockByName("/flow").requestFocus();
-    },
-    onKeyDown(ev) {
-      if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-        if (this.showMenu) {
-          this.showMenu = false;
-          this.$refs.rootNode.findBlockByName("/flow").requestFocus();
-        } else {
-          this.$router?.go(-1); // 有router时，是从DemoHomepage进入，回退
-        }
-        return true;
-      }
-
-      switch (ev.keyCode) {
-        case 10001:
-        case 77:
-          //menu key or M
-          this.showMenu = true;
-          //menu自动获得焦点
-          break;
-        case 10000:
-        case 82:
-          //back key or R
-          if (this.showMenu) {
-            this.showMenu = false;
-            this.$refs.rootNode.findBlockByName("/flow").requestFocus();
-          }
-          break;
-      }
-      return true;
-    },
-  },
-};
-</script>
-
-<template>
-  <div
-    :style="{
-      width: 1920,
-      height: 1080,
-      backgroundColor: '#123f80',
-    }"
-  >
-    <div
-      :style="{
-        top: 50,
-        left: 50,
-      }"
-    >
-      <jsv-focus-block
-        ref="rootNode"
-        autoFocus
-        :onKeyDown="onKeyDown"
-        :onFocus="onFocus"
-      >
-        <flow-page name="/flow" :data="contentData" />
-        <my-menu v-if="showMenu" :data="menuData" name="/menu" />
-      </jsv-focus-block>
-    </div>
-  </div>
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2021-09-27 13:49:00
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2021-10-15 14:31:05
+ * @Description: file content
+-->
+<script>
+import { menuData, contentData } from "./data.js";
+import FlowPage from "./components/FlowPage.vue";
+import borderImg from "./assets/nine_patch_focus.png";
+import MyMenu from "./components/MyMenu.vue";
+import { ref } from "vue";
+
+export default {
+  components: {
+    FlowPage,
+    MyMenu,
+  },
+  setup() {
+    let showMenu = ref(false);
+    return {
+      menuData,
+      contentData,
+      borderImg,
+      showMenu,
+    };
+  },
+  methods: {
+    onFocus() {
+      this.$refs.rootNode.findBlockByName("/flow").requestFocus();
+    },
+    onKeyDown(ev) {
+      if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+        if (this.showMenu) {
+          this.showMenu = false;
+          this.$refs.rootNode.findBlockByName("/flow").requestFocus();
+        } else {
+          this.$router?.go(-1); // 有router时，是从DemoHomepage进入，回退
+        }
+        return true;
+      }
+
+      switch (ev.keyCode) {
+        case 10001:
+        case 77:
+          //menu key or M
+          this.showMenu = true;
+          //menu自动获得焦点
+          break;
+        case 10000:
+        case 82:
+          //back key or R
+          if (this.showMenu) {
+            this.showMenu = false;
+            this.$refs.rootNode.findBlockByName("/flow").requestFocus();
+          }
+          break;
+      }
+      return true;
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    :style="{
+      width: 1920,
+      height: 1080,
+      backgroundColor: '#123f80',
+    }"
+  >
+    <div
+      :style="{
+        top: 50,
+        left: 50,
+      }"
+    >
+      <jsv-focus-block
+        ref="rootNode"
+        autoFocus
+        :onKeyDown="onKeyDown"
+        :onFocus="onFocus"
+      >
+        <flow-page name="/flow" :data="contentData" />
+        <my-menu v-if="showMenu" :data="menuData" name="/menu" />
+      </jsv-focus-block>
+    </div>
+  </div>
 </template>

package/samples/FlowMultiWidget/components/Block.vue

@@ -1,107 +1,107 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2021-09-27 13:49:54
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2021-10-15 11:02:22
- * @Description: file content
--->
-<script>
-import {
-  HORIZONTAL,
-  SimpleWidget,
-  SWidgetDispatcher,
-} from "jsview/utils/JsViewEngineWidget";
-import Item from "./Item.vue";
-
-export default {
-  components: {
-    SimpleWidget,
-    Item,
-  },
-  props: {
-    data: Object,
-    query: Object,
-    onEdge: Function,
-    onAction: Object,
-    name: String,
-  },
-  setup() {
-    let measures = () => {
-      return {
-        width: 105,
-        height: 162,
-        focusable: true,
-        hasSub: false,
-      };
-    };
-    let dispatcher = new SWidgetDispatcher();
-    return {
-      direction: HORIZONTAL,
-      measures,
-      dispatcher,
-    };
-  },
-  methods: {
-    onFocus(enterRect) {
-      if (enterRect) {
-        const foucsInfo = {
-          type: SWidgetDispatcher.Type.setFocusRect,
-          data: enterRect,
-        };
-        this.dispatcher.dispatch(foucsInfo);
-      }
-      this.$refs.focusNode.findBlockByName(this.name).requestFocus();
-    },
-    onBlur() {
-    },
-    onClick() {
-    },
-  },
-  created() {
-    this.onAction.register("onFocus", this.onFocus);
-    this.onAction.register("onBlur", this.onBlur);
-    this.onAction.register("onClick", this.onClick);
-  },
-};
-</script>
-
-<template>
-  <div class="text">
-    {{ data.title }}
-  </div>
-  <div :style="{ top: 50 }">
-    <jsv-focus-block ref="focusNode">
-      <simple-widget
-        :name="name"
-        :width="data.blocks.w"
-        :height="data.blocks.h"
-        :direction="direction"
-        :padding="{ left: 10, top: 10 }"
-        :data="data.data"
-        :measures="measures"
-        :onEdge="onEdge"
-        :dispatcher="dispatcher"
-      >
-        <template #renderItem="{ data, query, onEdge, onAction }">
-          <item
-            :data="data"
-            :query="query"
-            :onEdge="onEdge"
-            :onAction="onAction"
-          />
-        </template>
-      </simple-widget>
-    </jsv-focus-block>
-  </div>
-</template>
-
-
-<style scoped>
-.text {
-  width: 105px;
-  height: 50px;
-  color: #ffffff;
-  font-size: 25px;
-  line-height: 50px;
-}
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2021-09-27 13:49:54
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2021-10-15 11:02:22
+ * @Description: file content
+-->
+<script>
+import {
+  HORIZONTAL,
+  SimpleWidget,
+  SWidgetDispatcher,
+} from "jsview/utils/JsViewEngineWidget";
+import Item from "./Item.vue";
+
+export default {
+  components: {
+    SimpleWidget,
+    Item,
+  },
+  props: {
+    data: Object,
+    query: Object,
+    onEdge: Function,
+    onAction: Object,
+    name: String,
+  },
+  setup() {
+    let measures = () => {
+      return {
+        width: 105,
+        height: 162,
+        focusable: true,
+        hasSub: false,
+      };
+    };
+    let dispatcher = new SWidgetDispatcher();
+    return {
+      direction: HORIZONTAL,
+      measures,
+      dispatcher,
+    };
+  },
+  methods: {
+    onFocus(enterRect) {
+      if (enterRect) {
+        const foucsInfo = {
+          type: SWidgetDispatcher.Type.setFocusRect,
+          data: enterRect,
+        };
+        this.dispatcher.dispatch(foucsInfo);
+      }
+      this.$refs.focusNode.findBlockByName(this.name).requestFocus();
+    },
+    onBlur() {
+    },
+    onClick() {
+    },
+  },
+  created() {
+    this.onAction.register("onFocus", this.onFocus);
+    this.onAction.register("onBlur", this.onBlur);
+    this.onAction.register("onClick", this.onClick);
+  },
+};
+</script>
+
+<template>
+  <div class="text">
+    {{ data.title }}
+  </div>
+  <div :style="{ top: 50 }">
+    <jsv-focus-block ref="focusNode">
+      <simple-widget
+        :name="name"
+        :width="data.blocks.w"
+        :height="data.blocks.h"
+        :direction="direction"
+        :padding="{ left: 10, top: 10 }"
+        :data="data.data"
+        :measures="measures"
+        :onEdge="onEdge"
+        :dispatcher="dispatcher"
+      >
+        <template #renderItem="{ data, query, onEdge, onAction }">
+          <item
+            :data="data"
+            :query="query"
+            :onEdge="onEdge"
+            :onAction="onAction"
+          />
+        </template>
+      </simple-widget>
+    </jsv-focus-block>
+  </div>
+</template>
+
+
+<style scoped>
+.text {
+  width: 105px;
+  height: 50px;
+  color: #ffffff;
+  font-size: 25px;
+  line-height: 50px;
+}
 </style>