@shijiu/jsview-vue 0.9.490 → 0.9.590

package/samples/GridDemo/ButtonBlock.vue

@@ -2,58 +2,55 @@
  * @Author: ChenChanghua
  * @Date: 2022-05-10 15:21:24
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-05-12 21:34:15
+ * @LastEditTime: 2022-07-08 11:51:26
  * @Description: file content
 -->
-<!--
- * @Author: ChenChanghua
- * @Date: 2022-05-07 10:22:33
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-05-09 09:19:43
- * @Description: file content
--->
-<script>
+<script setup>
 import { ref } from "vue";
-export default {
-  props: ["userData", "name"],
-  setup() {
-    return {
-      focusIndex: ref(0),
-      focused: ref(false),
-      divNumber: new Array(25),
-    };
-  },
-  methods: {
-    _onFocus() {
-      console.log("button onfocus", this.userData);
-      this.focused = true;
-    },
-    _onBlur() {
-      this.focused = false;
-      this.focusIndex = 0;
-    },
-    _onKeyDown(ev) {
-      console.log("button onkeydown");
-      if (ev.keyCode == 37 && this.focusIndex == 1) {
-        this.focusIndex = 0;
-        return true;
-      } else if (ev.keyCode == 39 && this.focusIndex == 0) {
-        this.focusIndex = 1;
-        return true;
-      } else if (ev.keyCode == 13) {
-        console.log("button click", this.userData);
-        return true;
-      }
-      return false;
-    },
-    getFocusBlock() {
-      return this.$refs.focusBlock;
-    },
-    _MapColor(color_num) {
-      return ((color_num < 10 || color_num >= 100) ? '0' + color_num % 10 : '' + color_num % 100);
-    }
-  },
+const props = defineProps({
+  userData: Object,
+  name: String,
+});
+
+let focusIndex = ref(0);
+let focused = ref(false);
+let divNumber = new Array(25);
+let focusBlock = ref(null);
+
+const _onFocus = () => {
+  console.log("button onfocus", props.userData);
+  focused.value = true;
+};
+const _onBlur = () => {
+  focused.value = false;
+  focusIndex.value = 0;
+};
+const _onKeyDown = (ev) => {
+  console.log("button onkeydown");
+  if (ev.keyCode == 37 && focusIndex.value == 1) {
+    focusIndex.value = 0;
+    return true;
+  } else if (ev.keyCode == 39 && focusIndex.value == 0) {
+    focusIndex.value = 1;
+    return true;
+  } else if (ev.keyCode == 13) {
+    console.log("button click", props.userData);
+    return true;
+  }
+  return false;
 };
+const getFocusBlock = () => {
+  return focusBlock.value;
+};
+const _MapColor = (color_num) => {
+  return color_num < 10 || color_num >= 100
+    ? "0" + (color_num % 10)
+    : "" + (color_num % 100);
+};
+
+defineExpose({
+  getFocusBlock,
+});
 </script>
 
 <template>
@@ -94,7 +91,11 @@ export default {
         left: 2 * index + 50,
         width: 2,
         height: 50,
-        backgroundColor: '#' + _MapColor(userData.baseColor) + _MapColor(index) + _MapColor(index),
+        backgroundColor:
+          '#' +
+          _MapColor(userData.baseColor) +
+          _MapColor(index) +
+          _MapColor(index),
       }"
     ></div>
 

package/samples/GridDemo/FocusItem.vue

@@ -2,49 +2,30 @@
  * @Author: ChenChanghua
  * @Date: 2022-05-10 15:21:24
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-05-12 21:26:00
+ * @LastEditTime: 2022-07-08 11:50:58
  * @Description: file content
 -->
-<!--
- * @Author: ChenChanghua
- * @Date: 2022-05-07 10:22:33
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-05-09 09:19:43
- * @Description: file content
--->
-<script>
+<script setup>
 import ButtonBlock from "./ButtonBlock.vue";
 import { ref } from "vue";
-export default {
-  components: { ButtonBlock },
-  props: ["userData", "widgetData", "onAction"],
-  setup() {
-    return {
-      focused: ref(false),
-      divNumber: new Array(50),
-    };
-  },
-  methods: {
-    onFocus() {
-      this.$refs.button
-        .getFocusBlock()
-        .findBlockByName(this.widgetData.gridIndex + "_item")
-        .requestFocus();
-    },
-    onBlur() {
-      
-    },
-  },
-  created() {
-    if (this.onAction) {
-      this.onAction.register("onFocus", this.onFocus);
-      this.onAction.register("onBlur", this.onBlur);
-    }
-  },
-  mounted() {
-    // console.log("item mounted", this.userData, this.widgetData);
-  },
+
+const props = defineProps({
+  userData: Object,
+  widgetData: Object,
+  onAction: Object,
+});
+const focused = ref(false);
+const divNumber = new Array(50);
+const button = ref(null);
+const onFocus = () => {
+  button.value
+    .getFocusBlock()
+    .findBlockByName(props.widgetData.gridIndex + "_item")
+    .requestFocus();
 };
+const onBlur = () => {};
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
 </script>
 
 <template>

package/samples/GridDemo/Item.vue

@@ -2,62 +2,54 @@
  * @Author: ChenChanghua
  * @Date: 2022-05-10 15:21:24
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-05-17 11:13:07
+ * @LastEditTime: 2022-07-08 11:48:32
  * @Description: file content
 -->
-<!--
- * @Author: ChenChanghua
- * @Date: 2022-05-07 10:22:33
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-05-09 09:19:43
- * @Description: file content
--->
-<script>
-import { ref } from "vue";
-export default {
-  props: ["userData", "widgetData", "onAction", "query"],
-  setup() {
-    function randomColor() {
-      let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
-      return (
-        "#" + new Array(6 - randomColor.length).fill("0").join("") + randomColor
-      );
-    }
-    return {
-      focused: ref(false),
-      randomColor,
-      divNumber: new Array(50),
-      blurAction: false,
-    };
-  },
-  methods: {
-    onFocus() {
-      console.log("item onfocus", this.userData);
-      this.focused = true;
-      this.blurAction = false;
-    },
-    onBlur() {
-      console.log("item onblur", this.userData, this.widgetData.getCurrentFocusId(), this.widgetData.dataIndex);
-      this.focused = false;
-      if (this.widgetData.getCurrentFocusId() == this.widgetData.dataIndex) {
-        this.blurAction = true;
-      }
-    },
-    onClick() {
-      console.log("item onclick ", this.userData);
-    },
-  },
-  created() {
-    if (this.onAction) {
-      this.onAction.register("onFocus", this.onFocus);
-      this.onAction.register("onBlur", this.onBlur);
-      this.onAction.register("onClick", this.onClick);
-    }
-  },
-  mounted() {
-    // console.log("item mounted", this.userData, this.widgetData);
-  },
+<script setup>
+import { ref, onUpdated, onMounted } from "vue";
+
+const props = defineProps({
+  userData: Object,
+  widgetData: Object,
+  onAction: Object,
+});
+const randomColor = () => {
+  let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
+  return (
+    "#" + new Array(6 - randomColor.length).fill("0").join("") + randomColor
+  );
 };
+const focused = ref(false);
+const divNumber = new Array(50);
+const blurAction = false;
+
+const onFocus = () => {
+  console.log("item onfocus", props.userData);
+  focused.value = true;
+};
+const onBlur = () => {
+  console.log(
+    "item onblur",
+    props.userData,
+    props.widgetData.getCurrentFocusId(),
+    props.widgetData.dataIndex
+  );
+  focused.value = false;
+};
+const onClick = () => {
+  console.log("item onclick ", props.userData);
+};
+
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+props.onAction.register("onClick", onClick);
+
+onUpdated(() => {
+  console.log("item updated", props.userData, props.widgetData);
+});
+onMounted(() => {
+  console.log("item mounted", props.userData, props.widgetData);
+});
 </script>
 
 <template>
@@ -91,7 +83,7 @@ export default {
   ></div>
   <div
     :style="{
-      visibility: blurAction ? 'visible' : 'hidden',
+      visibility: !focused && widgetData.selected ? 'visible' : 'hidden',
       left: 50,
       width: 20,
       height: 20,

package/samples/HashHistory/App.vue

@@ -1,92 +1,76 @@
-<script lang="ts">
-import { Options, Vue } from "vue-class-component";
-import { jJsvRuntimeBridge } from "jsview/utils/JsViewVueTools/JsvRuntimeBridge";
-import { router, routeList } from './router.js'
-import { useRouter, useRoute, Router } from 'vue-router'
-
-@Options({
-  props: {
-    routePath: String
-  },
-})
-class App extends Vue {
-  constructor(props: any) {
-    super(props)
-
-    let currentRouter: Router;
-
-    // props.routePath在DemoHomepage中被设置, 此处作为内嵌router使用.
-    // 此时已经有router, 则作为children动态添加到当前route
-    if(props.routePath) {
-      const currentRoute = useRoute()
-      currentRouter = useRouter()
-
-      let redirectPath; // 自动跳转路径
-      for(const route of routeList) {
-        if(route.path === "/") { // 不需要添加home
-          redirectPath = route.redirect;
-          continue;
-        }
-
-        const subRoute = {...route, path: route.path.substring(1)} // 去掉字符'/'
-        currentRouter.addRoute(currentRoute.name as string, subRoute)
-      }
-
-      currentRouter.replace(props.routePath + redirectPath) // 自动跳转到redirectPath
-    } else { // 作为全局router使用
-      currentRouter = App.Router;
+<script setup>
+import { jJsvRuntimeBridge } from "jsview";
+import { router, routeList } from "./router.js";
+import { useRouter, useRoute } from "vue-router";
+import { onMounted, ref } from "vue";
+
+const props = defineProps({
+  routePath: String,
+});
+
+const displayUrl = ref("");
+let topRef = ref(null);
+let routePage = ref(null);
+let currentRouter;
+if (props.routePath) {
+  const currentRoute = useRoute();
+  currentRouter = useRouter();
+
+  let redirectPath; // 自动跳转路径
+  for (const route of routeList) {
+    if (route.path === "/") {
+      // 不需要添加home
+      redirectPath = route.redirect;
+      continue;
     }
 
-    this.watchRouterChanged(currentRouter);
-  }
-
-  // Override
-  mounted() {
-    // 调试接口，对接JSCenter平台去掉启动图的处理
-    jJsvRuntimeBridge.notifyPageLoaded();
-  }
-
-  private onRequestFocus(branchName: string) {
-    this.topRef.findBlockByname(branchName)?.requestFocus();
+    const subRoute = { ...route, path: route.path.substring(1) }; // 去掉字符'/'
+    currentRouter.addRoute(currentRoute.name, subRoute);
   }
 
-  private watchRouterChanged(route: Router) {
-    route.afterEach(() => {
-      this.displayUrl = window.location.href;
-    })
-  }
-
-  private onKeyDown(event: any) {
-    return this.routePage?.onKeyDown(event);
-  }
-
-  private topRef!: any;
-  private displayUrl: string = "";
-  private routePage: any = null;
-
-  static Router: Router = router;
+  currentRouter.replace(props.routePath + redirectPath); // 自动跳转到redirectPath
+} else {
+  currentRouter = router;
 }
-
-export default App;
+currentRouter.afterEach(() => {
+  displayUrl.value = window.location.href;
+});
+
+const onRequestFocus = (branchName) => {
+  topRef.value.findBlockByname(branchName)?.requestFocus();
+};
+
+const watchRouterChanged = (route) => {
+  route.afterEach(() => {
+    displayUrl.value = window.location.href;
+  });
+};
+
+const onKeyDown = (event) => {
+  return routePage.value.onKeyDown(event);
+};
+
+onMounted(() => {
+  jJsvRuntimeBridge.notifyPageLoaded();
+});
 </script>
 
 <template>
-<div class="root">
-  <div class="address">
-      当前URL: {{ displayUrl }}
-  </div>
-  <div class="split" />
+  <div class="root">
+    <div class="address">当前URL: {{ displayUrl }}</div>
+    <div class="split"></div>
     <jsv-focus-block ref="topRef">
       <!-- 这种router-view的写法可以获取到component的ref，vue标准写法 -->
       <router-view v-slot="{ Component }">
-        <component :is="Component"
-            ref="routePage"
-            class="router"
-            @requestFocus="onRequestFocus"
+        <component
+          :is="Component"
+          ref="routePage"
+          class="router"
+          @requestFocus="onRequestFocus"
         />
       </router-view>
     </jsv-focus-block>
-</div>
+  </div>
 </template>
 
 <style scoped>
@@ -95,7 +79,7 @@ export default App;
   top: 0;
   width: 1280;
   height: 1080;
-  background-color: rgb(222,211,140)
+  background-color: rgb(222, 211, 140);
 }
 
 .address {
@@ -111,12 +95,12 @@ export default App;
   top: 150;
   width: 1200;
   height: 3;
-  background-color: #00F000;
+  background-color: #00f000;
 }
 
 .router {
-  left:0;
-  top:150;
+  left: 0;
+  top: 150;
   width: 1920;
   height: 930;
   overflow: hidden;

package/samples/HashHistory/components/HorizontalButtonList.vue

@@ -1,114 +1,91 @@
-<script lang="ts">
-import { JsvFocusEvent } from "jsview/utils/JsViewEngineWidget";
-import { Options, Vue } from "vue-class-component";
+<script setup>
 import Item from "./Item.vue";
 
-@Options({
-  props: {
-    style: Object,
-    buttonConfig: Object,
-    onButtonClick: Function,
-    onBack: Function,
-  },
-  components: {
-    Item,
-  }
-})
-
-
-class HorizontalButtonList extends Vue {
-  constructor(props: object) {
-    super(props);
+const props = defineProps({
+  style: Object,
+  buttonConfig: Object,
+  onButtonClick: Function,
+  onBack: Function,
+});
+const maxWidth = 1280;
+const listPadding = 10;
+const buttonWidth = 400;
+const buttonHeight = 80;
+const buttonGap = 50;
+let focusedItemIndex = 0;
+
+let listLeft = 0;
+const listWidth = (buttonWidth + buttonGap) * props.buttonConfig.length;
+
+// 根据maxWidth，计算buttons的左边位置
+const widthCenter = listWidth - buttonGap; // 减去最后一个元素的gap
+if (widthCenter < maxWidth) {
+  listLeft = Math.floor((maxWidth - widthCenter) / 2);
+}
 
-    this.listSize = this.computeSize(props);
+const listSize = {
+  left: listLeft,
+  width: listWidth,
+  height: buttonHeight,
+};
+
+const onKeyDown = (ev) => {
+  if (ev.keyCode === 13) {
+    // Enter
+    props.onButtonClick?.(focusedItemIndex);
+    return true;
+  } else if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    // 8:Backspace, 27:Escape, 10000:盒子返回键
+    props.onBack?.();
+    return true;
   }
 
-  private computeSize(props: any) : object {
-    let listLeft = 0;
-    const listWidth = (this.buttonWidth + this.buttonGap) * props.buttonConfig.length;
-
-    // 根据maxWidth，计算buttons的左边位置
-    const widthCenter = listWidth - this.buttonGap; // 减去最后一个元素的gap
-    if (widthCenter < this.maxWidth) {
-      listLeft = Math.floor((this.maxWidth - widthCenter) / 2);
-    }
-
-    let listSize = {
-      left: listLeft,
-      width: listWidth,
-      height: this.buttonHeight,
-    };
-
-    return listSize;
+  let changeFocusTo = -1;
+  switch (ev.keyCode) {
+    case 37: // Left
+      changeFocusTo =
+        (focusedItemIndex - 1 + props.buttonConfig.length) %
+        props.buttonConfig.length;
+      break;
+    case 39: // Right
+      changeFocusTo = (focusedItemIndex + 1) % props.buttonConfig.length;
+      break;
+    default:
+      break;
   }
-
-  private onKeyDown(ev: JsvFocusEvent) {
-    if(ev.keyCode === 13) { // Enter
-      this.onButtonClick?.(this.focusedItemIndex);
-      return true;
-    } else if(ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) { // 8:Backspace, 27:Escape, 10000:盒子返回键
-      this.onBack?.();
-      return true;
-    }
-
-    let changeFocusTo = -1;
-    switch (ev.keyCode) {
-      case 37: // Left
-        changeFocusTo = (this.focusedItemIndex - 1 + this.buttonConfig.length) % this.buttonConfig.length;
-        break;
-      case 39: // Right
-        changeFocusTo = (this.focusedItemIndex + 1) % this.buttonConfig.length;
-        break;
-      default:
-        break;
-    }
-    if (changeFocusTo >= 0) {
-      ev.ownerNode.findBlockByName(changeFocusTo.toString()).requestFocus();
-      this.focusedItemIndex = changeFocusTo;
-      return true;
-    }
-
-    return false;
+  if (changeFocusTo >= 0) {
+    ev.ownerNode.findBlockByName(changeFocusTo.toString()).requestFocus();
+    focusedItemIndex = changeFocusTo;
+    return true;
   }
 
-  private listSize: object;
-
-  private focusedItemIndex = 0;
-
-  private readonly buttonConfig!: any;
-  private readonly onButtonClick?: Function;
-  private readonly onBack?: Function;
-
-  private readonly maxWidth: number = 1280;
-  private readonly listPadding: number = 10;
-  private readonly buttonWidth: number = 400;
-  private readonly buttonHeight: number = 80;
-  private readonly buttonGap: number = 50;
-}
-
-export default HorizontalButtonList;
+  return false;
+};
 </script>
 
 <template>
-<div :style="style">
-  <jsv-focus-block
+  <div :style="style">
+    <jsv-focus-block
       :style="{
         left: listSize.left,
         width: listSize.width + listPadding * 2,
         height: listSize.height + listPadding * 2,
       }"
       :onKeyDown="onKeyDown"
-  >
-    <Item v-for="(item,index) in buttonConfig" :key="index"
-        :style="{ left: (buttonWidth+10)*index, width:buttonWidth, height:buttonHeight }"
+    >
+      <Item
+        v-for="(item, index) in buttonConfig"
+        :key="index"
+        :style="{
+          left: (buttonWidth + 10) * index,
+          width: buttonWidth,
+          height: buttonHeight,
+        }"
         :name="index.toString()"
         :autoFocus="index === 0"
-    >
-      {{ item.name }}
-    </Item>
-  </jsv-focus-block>
-</div>
-</template>
-
-<style>
-</style>
+      >
+        {{ item.name }}
+      </Item>
+    </jsv-focus-block>
+  </div>
+</template>