@shijiu/jsview-vue 0.9.246 → 0.9.254

package/samples/AdvanceMetroWidget/Frame.vue

@@ -1,101 +1,101 @@
-<script>
-import {
-  HORIZONTAL,
-  SimpleWidget,
-  SWidgetDispatcher,
-} from "jsview/utils/JsViewEngineWidget";
-import Item from "./Item.vue";
-
-export default {
-  components: { SimpleWidget, Item },
-  props: {
-    itemData: Object,
-    data: Object,
-    query: Object,
-    onEdge: Function,
-    onAction: Object,
-    name: String,
-  },
-  data() {
-    return {};
-  },
-  setup() {
-    let dispatcher = new SWidgetDispatcher();
-    return {
-      direction: HORIZONTAL,
-      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() {},
-    measures(item) {
-      return {
-        width: item.blocks.w,
-        height: item.blocks.h,
-        focusable: item.focusable,
-        hasSub: item.hasSub,
-      };
-    },
-  },
-
-  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">
-    <simple-widget
-      :name="name"
-      :data="itemData"
-      :width="data.blocks.w"
-      :height="data.blocks.h"
-      :padding="{ left: 10, top: 10, right: 10, bottom: 10 }"
-      :direction="direction"
-      :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>
-</template>
-
-<style scoped>
-.rootSize {
-  width: 1920;
-  height: 1080;
-  background-color: "#FFFF00";
-}
-
-.widgetPos {
-  top: 120;
-  left: 50;
-}
-
-.focusPos {
-  top: 10;
-  left: 10;
-}
+<script>
+import {
+  HORIZONTAL,
+  SimpleWidget,
+  SWidgetDispatcher,
+} from "jsview/utils/JsViewEngineWidget";
+import Item from "./Item.vue";
+
+export default {
+  components: { SimpleWidget, Item },
+  props: {
+    itemData: Object,
+    data: Object,
+    query: Object,
+    onEdge: Function,
+    onAction: Object,
+    name: String,
+  },
+  data() {
+    return {};
+  },
+  setup() {
+    let dispatcher = new SWidgetDispatcher();
+    return {
+      direction: HORIZONTAL,
+      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() {},
+    measures(item) {
+      return {
+        width: item.blocks.w,
+        height: item.blocks.h,
+        focusable: item.focusable,
+        hasSub: item.hasSub,
+      };
+    },
+  },
+
+  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">
+    <simple-widget
+      :name="name"
+      :data="itemData"
+      :width="data.blocks.w"
+      :height="data.blocks.h"
+      :padding="{ left: 10, top: 10, right: 10, bottom: 10 }"
+      :direction="direction"
+      :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>
+</template>
+
+<style scoped>
+.rootSize {
+  width: 1920;
+  height: 1080;
+  background-color: "#FFFF00";
+}
+
+.widgetPos {
+  top: 120;
+  left: 50;
+}
+
+.focusPos {
+  top: 10;
+  left: 10;
+}
 </style>

package/samples/AdvanceMetroWidget/Item.vue

@@ -1,58 +1,58 @@
-<script>
-export default {
-  props: {
-    data: Object,
-    query: Object,
-    onEdge: Function,
-    onAction: Object,
-  },
-  data() {
-    return {
-      focused: false,
-    };
-  },
-  computed: {
-    style() {
-      return {
-        width: this.data.blocks.w - 10,
-        height: this.data.blocks.h - 10,
-        color: "#FFFFFF",
-        backgroundColor: this.focused ? "#FF0000" : this.data.color,
-      };
-    },
-  },
-  methods: {
-    onFocus() {
-      this.focused = true;
-    },
-
-    onBlur() {
-      this.focused = false;
-    },
-  },
-  created() {
-    this.onAction.register("onFocus", this.onFocus);
-    this.onAction.register("onBlur", this.onBlur);
-  },
-};
-</script>
-
-<template>
-  <div :class="focused ? 'focus' : 'blur'" :style="style">
-    {{ data.content }}
-  </div>
-</template>
-
-<style scoped>
-.focus {
-  transform: scale3d(1.05, 1.05, 1);
-  transition: transform 0.25s linear;
-  font-size: 30px;
-}
-
-.blur {
-  transform: scale3d(1, 1, 1);
-  transition: transform 0.25s linear;
-  font-size: 30px;
-}
+<script>
+export default {
+  props: {
+    data: Object,
+    query: Object,
+    onEdge: Function,
+    onAction: Object,
+  },
+  data() {
+    return {
+      focused: false,
+    };
+  },
+  computed: {
+    style() {
+      return {
+        width: this.data.blocks.w - 10,
+        height: this.data.blocks.h - 10,
+        color: "#FFFFFF",
+        backgroundColor: this.focused ? "#FF0000" : this.data.color,
+      };
+    },
+  },
+  methods: {
+    onFocus() {
+      this.focused = true;
+    },
+
+    onBlur() {
+      this.focused = false;
+    },
+  },
+  created() {
+    this.onAction.register("onFocus", this.onFocus);
+    this.onAction.register("onBlur", this.onBlur);
+  },
+};
+</script>
+
+<template>
+  <div :class="focused ? 'focus' : 'blur'" :style="style">
+    {{ data.content }}
+  </div>
+</template>
+
+<style scoped>
+.focus {
+  transform: scale3d(1.05, 1.05, 1);
+  transition: transform 0.25s linear;
+  font-size: 30px;
+}
+
+.blur {
+  transform: scale3d(1, 1, 1);
+  transition: transform 0.25s linear;
+  font-size: 30px;
+}
 </style>

package/samples/AdvanceMetroWidget/data.js

@@ -1,137 +1,137 @@
-const frameData = [
-    {
-        blocks: {
-            w: 340,
-            h: 340
-        },
-        focusable: true,
-        hasSub: true,
-        id: 0,
-    },
-    {
-        blocks: {
-            w: 340,
-            h: 340
-        },
-        focusable: true,
-        hasSub: true,
-        id: 1,
-    },
-    {
-        blocks: {
-            w: 340,
-            h: 340
-        },
-        focusable: true,
-        hasSub: true,
-        id: 2,
-    },
-    {
-        blocks: {
-            w: 340,
-            h: 340
-        },
-        focusable: true,
-        hasSub: true,
-        id: 3,
-    },
-];
-
-const itemData = [
-    {
-        blocks: {
-            w: 300,
-            h: 100
-        },
-        focusable: true,
-        color: "#000022",
-        content: 0
-    },
-    {
-        blocks: {
-            w: 150,
-            h: 100
-        },
-        focusable: true,
-        color: "#003300",
-        content: 1
-    },
-    {
-        blocks: {
-            w: 150,
-            h: 100
-        },
-        focusable: true,
-        color: "#000044",
-        content: 2
-    },
-    {
-        blocks: {
-            w: 50,
-            h: 200
-        },
-        focusable: true,
-        color: "#000055",
-        content: 3
-    },
-    {
-        blocks: {
-            w: 50,
-            h: 200
-        },
-        focusable: true,
-        color: "#000066",
-        content: 4
-    },
-    {
-        blocks: {
-            w: 50,
-            h: 200
-        },
-        focusable: true,
-        color: "#0000CD",
-        content: 5
-    },
-];
-
-let content = 6;
-for (let i = 0; i < 4; i++) {
-    itemData.push({
-        blocks: {
-            w: 100,
-            h: 150
-        },
-        focusable: true,
-        color: "#000022",
-        content: content++
-    });
-    itemData.push({
-        blocks: {
-            w: 100,
-            h: 150
-        },
-        focusable: true,
-        color: "#003300",
-        content: content++
-    });
-    itemData.push({
-        blocks: {
-            w: 100,
-            h: 150
-        },
-        focusable: true,
-        color: "#003300",
-        content: content++
-    });
-    itemData.push({
-        blocks: {
-            w: 100,
-            h: 150
-        },
-        focusable: true,
-        color: "#000022",
-        content: content++
-    });
-}
-
+const frameData = [
+    {
+        blocks: {
+            w: 340,
+            h: 340
+        },
+        focusable: true,
+        hasSub: true,
+        id: 0,
+    },
+    {
+        blocks: {
+            w: 340,
+            h: 340
+        },
+        focusable: true,
+        hasSub: true,
+        id: 1,
+    },
+    {
+        blocks: {
+            w: 340,
+            h: 340
+        },
+        focusable: true,
+        hasSub: true,
+        id: 2,
+    },
+    {
+        blocks: {
+            w: 340,
+            h: 340
+        },
+        focusable: true,
+        hasSub: true,
+        id: 3,
+    },
+];
+
+const itemData = [
+    {
+        blocks: {
+            w: 300,
+            h: 100
+        },
+        focusable: true,
+        color: "#000022",
+        content: 0
+    },
+    {
+        blocks: {
+            w: 150,
+            h: 100
+        },
+        focusable: true,
+        color: "#003300",
+        content: 1
+    },
+    {
+        blocks: {
+            w: 150,
+            h: 100
+        },
+        focusable: true,
+        color: "#000044",
+        content: 2
+    },
+    {
+        blocks: {
+            w: 50,
+            h: 200
+        },
+        focusable: true,
+        color: "#000055",
+        content: 3
+    },
+    {
+        blocks: {
+            w: 50,
+            h: 200
+        },
+        focusable: true,
+        color: "#000066",
+        content: 4
+    },
+    {
+        blocks: {
+            w: 50,
+            h: 200
+        },
+        focusable: true,
+        color: "#0000CD",
+        content: 5
+    },
+];
+
+let content = 6;
+for (let i = 0; i < 4; i++) {
+    itemData.push({
+        blocks: {
+            w: 100,
+            h: 150
+        },
+        focusable: true,
+        color: "#000022",
+        content: content++
+    });
+    itemData.push({
+        blocks: {
+            w: 100,
+            h: 150
+        },
+        focusable: true,
+        color: "#003300",
+        content: content++
+    });
+    itemData.push({
+        blocks: {
+            w: 100,
+            h: 150
+        },
+        focusable: true,
+        color: "#003300",
+        content: content++
+    });
+    itemData.push({
+        blocks: {
+            w: 100,
+            h: 150
+        },
+        focusable: true,
+        color: "#000022",
+        content: content++
+    });
+}
+
 export { frameData, itemData };