@shijiu/jsview-vue 0.9.502 → 0.9.631

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>

package/samples/HashHistory/components/Item.vue

@@ -1,69 +1,55 @@
-<script lang="ts">
-import { Options, Vue } from "vue-class-component";
-
-@Options({
-  props: {
-    style: Object,
-    name: String,
-    autoFocus: Boolean
-  },
-})
-
-class Item extends Vue {
-  constructor(props: object) {
-    super(props);
-  }
-
-  onFocus() {
-    this.hasFocused = true;
-  }
-
-  onBlur() {
-    this.hasFocused = false;
-  }
-
-  getFocusStyle() {
-    return {
-      width: this.style.width + 10,
-      height: this.style.height + 10,
-    }
-  }
-
-  getItemStyle() {
-    return {
-      width: this.style.width,
-      height: this.style.height,
-      backgroundColor: '#0FF000',
-      lineHeight: this.style.height,
-      fontSize: `${Math.floor(this.style.height * 0.55)}px`,
-    }
-  }
-
-  private hasFocused: boolean = false;
-  private style!: any;
-}
-
-export default Item;
+<script setup>
+import { ref } from "vue";
+const props = defineProps({
+  style: Object,
+  name: String,
+  autoFocus: Boolean,
+});
+
+const hasFocused = ref(false);
+const onFocus = () => {
+  hasFocused.value = true;
+};
+
+const onBlur = () => {
+  hasFocused.value = false;
+};
+
+const focusStyle = {
+  width: props.style.width + 10,
+  height: props.style.height + 10,
+};
+
+const itemStyle = {
+  width: props.style.width,
+  height: props.style.height,
+  backgroundColor: "#0FF000",
+  lineHeight: props.style.height,
+  fontSize: `${Math.floor(props.style.height * 0.55)}px`,
+};
 </script>
 
 <template>
-<jsv-focus-block :name="name" :autoFocus="autoFocus?'':undefined"
-  :onFocus="onFocus" :onBlur="onBlur"
->
-  <div :style="style">
-    <div class="focus" :style="getFocusStyle()" v-if="hasFocused" />
-    <div class="item" :style="getItemStyle()">
-      <slot/>
+  <jsv-focus-block
+    :name="name"
+    :autoFocus="autoFocus ? '' : undefined"
+    :onFocus="onFocus"
+    :onBlur="onBlur"
+  >
+    <div :style="style">
+      <div class="focus" :style="focusStyle" v-if="hasFocused"></div>
+      <div class="item" :style="itemStyle">
+        <slot></slot>
+      </div>
     </div>
-  </div>
-</jsv-focus-block>
+  </jsv-focus-block>
 </template>
 
 <style scoped>
 .focus {
   top: -5;
   left: -5;
-  background-color: #0000FF;
+  background-color: #0000ff;
 }
 .item {
   text-align: center;

package/samples/HashHistory/router.js

@@ -1,30 +1,41 @@
-import { createRouter }  from "vue-router";
-import { createJsvHashHistory }  from "jsview/utils/JsViewVueTools/JsvHashHistory";
+import { createRouter } from "vue-router";
+import { createJsvHashHistory } from "jsview";
 
 const routeList = [
   // 功能实例
-  { 
+  {
     name: "Home",
     path: "/",
-    redirect: "/__MainJsvApp/MainPage", 
-  }, { 
+    redirect: "/__MainJsvApp/MainPage",
+  },
+  {
     name: "MainPage",
     path: "/__MainJsvApp/MainPage",
-    component: () => import('./views/MainPage')
-  }, { 
+    component: () => import("./views/MainPage"),
+  },
+  {
     name: "SubPageFirst",
     path: "/__MainJsvApp/SubPageFirst",
-    component: () => import('./views/SubPageFirst')
-  }, { 
+    component: () => import("./views/SubPage"),
+    props: {
+      name: "First",
+      jumpTo: "Second",
+    },
+  },
+  {
     name: "SubPageSecond",
     path: "/__MainJsvApp/SubPageSecond",
-    component: () => import('./views/SubPageSecond')
+    component: () => import("./views/SubPage"),
+    props: {
+      name: "Second",
+      jumpTo: "First",
+    },
   },
 ];
 
 const router = createRouter({
   history: createJsvHashHistory(),
   routes: routeList,
-})
+});
 
-export { router, routeList }
+export { router, routeList };