@shijiu/jsview-vue 0.9.254 → 0.9.267

package/samples/DemoHomepage/components/Item.vue

@@ -1,77 +1,77 @@
-<script>
-export default {
-  props: {
-    style: Object,
-    itemClick: Function,
-    itemFocus: Function,
-    data: Object,
-    query: Object,
-    onEdge: Function,
-    onAction: Object,
-  },
-  data() {
-    return {
-      focused: false,
-      anim: "flip 1s",
-    };
-  },
-  computed: {
-    foucsStyle() {
-      return {
-        width: this.style.width,
-        height: this.style.height,
-      };
-    },
-    itemStyle() {
-      return {
-        width: this.style.width - 10,
-        height: this.style.height - 10,
-        backgroundColor: this.style.backgroundColor,
-        color: this.style.color,
-      };
-    },
-  },
-  methods: {
-    onFocus() {
-      this.focused = true;
-      if (this.itemFocus) {
-        this.itemFocus(this.data);
-      }
-    },
-    onBlur() {
-      this.focused = false;
-    },
-    onClick() {
-      if (this.itemClick) {
-        this?.itemClick(this.query.id, this.data);
-      }
-    },
-  },
-  created() {
-    this.onAction.register("onFocus", this.onFocus);
-    this.onAction.register("onBlur", this.onBlur);
-    this.onAction.register("onClick", this.onClick);
-  },
-};
-</script>
-
-<template>
-  <div>
-    <div class="focus" :style="foucsStyle" v-if="focused" />
-    <div class="item" :style="itemStyle">
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.focus {
-  top: -5;
-  left: -5;
-  background-color: #0000ff;
-}
-.item {
-  text-align: center;
-  font-size: 30;
-}
+<script>
+export default {
+  props: {
+    style: Object,
+    itemClick: Function,
+    itemFocus: Function,
+    data: Object,
+    query: Object,
+    onEdge: Function,
+    onAction: Object,
+  },
+  data() {
+    return {
+      focused: false,
+      anim: "flip 1s",
+    };
+  },
+  computed: {
+    foucsStyle() {
+      return {
+        width: this.style.width,
+        height: this.style.height,
+      };
+    },
+    itemStyle() {
+      return {
+        width: this.style.width - 10,
+        height: this.style.height - 10,
+        backgroundColor: this.style.backgroundColor,
+        color: this.style.color,
+      };
+    },
+  },
+  methods: {
+    onFocus() {
+      this.focused = true;
+      if (this.itemFocus) {
+        this.itemFocus(this.data);
+      }
+    },
+    onBlur() {
+      this.focused = false;
+    },
+    onClick() {
+      if (this.itemClick) {
+        this?.itemClick(this.query.id, this.data);
+      }
+    },
+  },
+  created() {
+    this.onAction.register("onFocus", this.onFocus);
+    this.onAction.register("onBlur", this.onBlur);
+    this.onAction.register("onClick", this.onClick);
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div class="focus" :style="foucsStyle" v-if="focused" />
+    <div class="item" :style="itemStyle">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.focus {
+  top: -5;
+  left: -5;
+  background-color: #0000ff;
+}
+.item {
+  text-align: center;
+  font-size: 30;
+}
 </style>

package/samples/DemoHomepage/components/TabFrame.vue

@@ -1,86 +1,86 @@
-<script>
-import {
-  SimpleWidget,
-  VERTICAL,
-} from "jsview/utils/JsViewEngineWidget";
-import Item from "./Item.vue";
-
-const measures = (item) => {
-  return {
-    width: item.width,
-    height: item.height,
-    focusable: item.focusable,
-  };
-};
-
-export default {
-  components: {
-    SimpleWidget,
-    Item,
-  },
-  props: {
-    name: String,
-    itemFocus: Function,
-    onEdge: Function,
-  },
-  setup() {
-    const width = 1280;
-    const height = 100;
-    const data = [
-      {
-        width: 200,
-        height: 50,
-        name: "功能实例",
-        focusable: true,
-        id: 0,
-      },
-      {
-        width: 200,
-        height: 50,
-        name: "场景实例",
-        focusable: true,
-        id: 1,
-      },
-    ];
-    const direction = VERTICAL;
-    return {
-      width,
-      height,
-      data,
-      direction,
-      measures,
-    };
-  },
-};
-</script>
-
-<template>
-  <simple-widget
-    :name="name"
-    :width="width"
-    :height="height"
-    :direction="direction"
-    :data="data"
-    :measures="measures"
-    :padding="{ left: 10, top: 10, right: 10, bottom: 10 }"
-    :onEdge="onEdge"
-  >
-    <template #renderItem="{ data, query, onEdge, onAction }">
-      <Item
-        :style="{
-          width: data.width,
-          height: data.height,
-          backgroundColor: '#00AA00',
-          color: '#FFFFFF',
-        }"
-        :data="data"
-        :query="query"
-        :onEdge="onEdge"
-        :onAction="onAction"
-        :itemFocus="itemFocus"
-      >
-        {{ data.name }}
-      </Item>
-    </template>
-  </simple-widget>
-</template>
+<script>
+import {
+  SimpleWidget,
+  VERTICAL,
+} from "jsview/utils/JsViewEngineWidget";
+import Item from "./Item.vue";
+
+const measures = (item) => {
+  return {
+    width: item.width,
+    height: item.height,
+    focusable: item.focusable,
+  };
+};
+
+export default {
+  components: {
+    SimpleWidget,
+    Item,
+  },
+  props: {
+    name: String,
+    itemFocus: Function,
+    onEdge: Function,
+  },
+  setup() {
+    const width = 1280;
+    const height = 100;
+    const data = [
+      {
+        width: 200,
+        height: 50,
+        name: "功能实例",
+        focusable: true,
+        id: 0,
+      },
+      {
+        width: 200,
+        height: 50,
+        name: "场景实例",
+        focusable: true,
+        id: 1,
+      },
+    ];
+    const direction = VERTICAL;
+    return {
+      width,
+      height,
+      data,
+      direction,
+      measures,
+    };
+  },
+};
+</script>
+
+<template>
+  <simple-widget
+    :name="name"
+    :width="width"
+    :height="height"
+    :direction="direction"
+    :data="data"
+    :measures="measures"
+    :padding="{ left: 10, top: 10, right: 10, bottom: 10 }"
+    :onEdge="onEdge"
+  >
+    <template #renderItem="{ data, query, onEdge, onAction }">
+      <Item
+        :style="{
+          width: data.width,
+          height: data.height,
+          backgroundColor: '#00AA00',
+          color: '#FFFFFF',
+        }"
+        :data="data"
+        :query="query"
+        :onEdge="onEdge"
+        :onAction="onAction"
+        :itemFocus="itemFocus"
+      >
+        {{ data.name }}
+      </Item>
+    </template>
+  </simple-widget>
+</template>

package/samples/DemoHomepage/router.js

@@ -1,132 +1,132 @@
-import { createRouter } from "vue-router";
-import { createJsvHashHistory } from "jsview/utils/JsViewVueTools/JsvHashHistory";
-
-const routeList = [
-  // 功能实例
-  {
-    name: "Home",
-    path: "/",
-    component: () => import("./views/Homepage"),
-  },
-  {
-    name: "基础示例合集",
-    path: "/feature/Basic",
-    component: () => import("jsview/samples/Basic/App"),
-  },
-  {
-    name: "SimpleWidget",
-    path: "/feature/SimpleWidgetDemo",
-    component: () => import("jsview/samples/SimpleWidgetDemo/App"),
-  },
-  {
-    name: "SimpleWidget(进阶)",
-    path: "/feature/AdvanceMetroWidget",
-    component: () => import("jsview/samples/AdvanceMetroWidget/App"),
-  },
-  {
-    name: "视频",
-    path: "/feature/VideoDemo",
-    component: () => import("jsview/samples/VideoDemo/App"),
-  },
-  {
-    name: "焦点切换demo",
-    path: "/feature/BasicFocusControl",
-    component: () => import("jsview/samples/BasicFocusControl/App"),
-  },
-  {
-    name: "Hash方式路由切换",
-    path: "/feature/HashHistory",
-    props: { routePath: "/feature/HashHistory" },
-    component: () => import("jsview/samples/HashHistory/App"),
-  },
-  //TODO MetroPage未完成
-  // {
-  //   name: "ClassName写法样例",
-  //   path: "/feature/ClassNameDemo",
-  //   component: () => import("jsview/samples/ClassNameDemo/App"),
-  // },
-  {
-    name: "翻牌游戏",
-    path: "/feature/FlipCard",
-    component: () => import("jsview/samples/FlipCard/App"),
-  },
-  {
-    name: "设置颜色空间",
-    path: "/feature/ColorSpace",
-    component: () => import("jsview/samples/ColorSpace/App"),
-  },
-  {
-    name: "制定Texture尺寸",
-    path: "/feature/TextureSize",
-    component: () => import("jsview/samples/TextureSize/App"),
-  },
-  {
-    name: "橱窗",
-    path: "/feature/FlowMultiWidget",
-    component: () => import("jsview/samples/FlowMultiWidget/App"),
-  },
-  {
-    name: "动图",
-    path: "/feature/AnimPicture",
-    component: () => import("jsview/samples/AnimPicture/App"),
-  },
-  {
-    name: "粒子效果",
-    path: "/feature/SprayView",
-    component: () => import("jsview/samples/SprayView/App"),
-  },
-  //TODO 代码需要优化
-  {
-    name: "长文字",
-    path: "/feature/LongText",
-    component: () => import("jsview/samples/LongText/App"),
-  },
-  //TODO 代码需要优化
-  {
-    name: "长图片",
-    path: "/feature/LongImage",
-    component: () => import("jsview/samples/LongImage/App"),
-  },
-  {
-    name: "二维码",
-    path: "/feature/QrcodeDemo",
-    component: () => import("jsview/samples/QrcodeDemo/App"),
-  },
-  {
-    name: "文字阴影",
-    path: "/feature/TextShadowDemo",
-    component: () => import("jsview/samples/TextShadowDemo/App"),
-  },
-  {
-    name: "多行文字区域内对齐",
-    path: "/feature/TextBox",
-    component: () => import("jsview/samples/TextBox/App"),
-  },
-  {
-    name: "抛物运动写法样例",
-    path: "/feature/ThrowMoveDemo",
-    component: () => import("jsview/samples/ThrowMoveDemo/App"),
-  },
-  {
-    name: "精灵图",
-    path: "/feature/SpriteImage",
-    component: () => import("jsview/samples/SpriteImage/App"),
-  },
-
-  // 场景实例
-  {
-    name: "直播间(TBD)",
-    path: "/scene/LiveRoom",
-    // component: () => import("jsview/samples/Basic/App"),
-  },
-];
-
-const router = createRouter({
-  // 浏览器调试和盒子上都可以使用类WebHashHistory的createJsvHashHistory(推荐)
-  // 或 createMemoryHistory;
-  // createWebHashHistory只能用于浏览器调试，盒子不支持
-  history: createJsvHashHistory(),
-  routes: routeList,
-});
-
-export { router, routeList };
+import { createRouter } from "vue-router";
+import { createJsvHashHistory } from "jsview/utils/JsViewVueTools/JsvHashHistory";
+
+const routeList = [
+  // 功能实例
+  {
+    name: "Home",
+    path: "/",
+    component: () => import("./views/Homepage"),
+  },
+  {
+    name: "基础示例合集",
+    path: "/feature/Basic",
+    component: () => import("jsview/samples/Basic/App"),
+  },
+  {
+    name: "SimpleWidget",
+    path: "/feature/SimpleWidgetDemo",
+    component: () => import("jsview/samples/SimpleWidgetDemo/App"),
+  },
+  {
+    name: "SimpleWidget(进阶)",
+    path: "/feature/AdvanceMetroWidget",
+    component: () => import("jsview/samples/AdvanceMetroWidget/App"),
+  },
+  {
+    name: "视频",
+    path: "/feature/VideoDemo",
+    component: () => import("jsview/samples/VideoDemo/App"),
+  },
+  {
+    name: "焦点切换demo",
+    path: "/feature/BasicFocusControl",
+    component: () => import("jsview/samples/BasicFocusControl/App"),
+  },
+  {
+    name: "Hash方式路由切换",
+    path: "/feature/HashHistory",
+    props: { routePath: "/feature/HashHistory" },
+    component: () => import("jsview/samples/HashHistory/App"),
+  },
+  //TODO MetroPage未完成
+  // {
+  //   name: "ClassName写法样例",
+  //   path: "/feature/ClassNameDemo",
+  //   component: () => import("jsview/samples/ClassNameDemo/App"),
+  // },
+  {
+    name: "翻牌游戏",
+    path: "/feature/FlipCard",
+    component: () => import("jsview/samples/FlipCard/App"),
+  },
+  {
+    name: "设置颜色空间",
+    path: "/feature/ColorSpace",
+    component: () => import("jsview/samples/ColorSpace/App"),
+  },
+  {
+    name: "制定Texture尺寸",
+    path: "/feature/TextureSize",
+    component: () => import("jsview/samples/TextureSize/App"),
+  },
+  {
+    name: "橱窗",
+    path: "/feature/FlowMultiWidget",
+    component: () => import("jsview/samples/FlowMultiWidget/App"),
+  },
+  {
+    name: "动图",
+    path: "/feature/AnimPicture",
+    component: () => import("jsview/samples/AnimPicture/App"),
+  },
+  {
+    name: "粒子效果",
+    path: "/feature/SprayView",
+    component: () => import("jsview/samples/SprayView/App"),
+  },
+  //TODO 代码需要优化
+  {
+    name: "长文字",
+    path: "/feature/LongText",
+    component: () => import("jsview/samples/LongText/App"),
+  },
+  //TODO 代码需要优化
+  {
+    name: "长图片",
+    path: "/feature/LongImage",
+    component: () => import("jsview/samples/LongImage/App"),
+  },
+  {
+    name: "二维码",
+    path: "/feature/QrcodeDemo",
+    component: () => import("jsview/samples/QrcodeDemo/App"),
+  },
+  {
+    name: "文字阴影",
+    path: "/feature/TextShadowDemo",
+    component: () => import("jsview/samples/TextShadowDemo/App"),
+  },
+  {
+    name: "多行文字区域内对齐",
+    path: "/feature/TextBox",
+    component: () => import("jsview/samples/TextBox/App"),
+  },
+  {
+    name: "抛物运动写法样例",
+    path: "/feature/ThrowMoveDemo",
+    component: () => import("jsview/samples/ThrowMoveDemo/App"),
+  },
+  {
+    name: "精灵图",
+    path: "/feature/SpriteImage",
+    component: () => import("jsview/samples/SpriteImage/App"),
+  },
+
+  // 场景实例
+  {
+    name: "直播间(TBD)",
+    path: "/scene/LiveRoom",
+    // component: () => import("jsview/samples/Basic/App"),
+  },
+];
+
+const router = createRouter({
+  // 浏览器调试和盒子上都可以使用类WebHashHistory的createJsvHashHistory(推荐)
+  // 或 createMemoryHistory;
+  // createWebHashHistory只能用于浏览器调试，盒子不支持
+  history: createJsvHashHistory(),
+  routes: routeList,
+});
+
+export { router, routeList };