@shijiu/jsview-vue 0.9.502 → 0.9.631

package/samples/Input/InputPanel.vue

@@ -2,14 +2,17 @@
  * @Author: ChenChanghua
  * @Date: 2022-01-25 10:33:07
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-01-26 16:20:46
+ * @LastEditTime: 2022-09-02 13:44:41
  * @Description: file content
 -->
 <script>
 import FullKeyboard from "./FullKeyboard.vue";
-import JsvInput from "jsview/utils/JsViewVueWidget/JsvInput/JsvInput.vue";
-import { EdgeDirection } from "jsview/utils/JsViewEngineWidget";
+import { EdgeDirection, JsvInput, useFocusHub } from "jsview";
 import { ref } from "vue";
+
+const blurColor = "#AAAAAA";
+const focusColor = "#FFFF00";
+
 export default {
   components: {
     FullKeyboard,
@@ -25,17 +28,20 @@ export default {
   setup() {
     return {
       showCursor: ref(false),
+      focusHub: useFocusHub(),
+      cursorColor: ref(blurColor),
     };
   },
   methods: {
     _onFocus() {
       this.showCursor = true;
-      this.$refs.focusNode
-        .findBlockByName(`${this.name}/keyboard`)
-        .requestFocus();
+      this.cursorColor = blurColor;
+      this.focusHub.setFocus(`${this.name}/keyboard`);
     },
     _onBlur() {
+      console.log("testtest onblur");
       this.showCursor = false;
+      this.cursorColor = blurColor;
     },
     _keyboardOnClick(item) {
       const char = item.content;
@@ -49,9 +55,8 @@ export default {
     },
     _keyboardOnEdge(edgeInfo) {
       if (edgeInfo.direction === EdgeDirection.top) {
-        this.$refs.focusNode
-          .findBlockByName(`${this.name}/etext`)
-          .requestFocus();
+        this.focusHub.setFocus(`${this.name}/etext`);
+        this.cursorColor = focusColor;
       } else {
         this.onEdge?.(edgeInfo);
       }
@@ -64,9 +69,8 @@ export default {
     },
     _inputOnEdge(edgeInfo) {
       if (edgeInfo.direction === EdgeDirection.bottom) {
-        this.$refs.focusNode
-          .findBlockByName(`${this.name}/keyboard`)
-          .requestFocus();
+        this.focusHub.setFocus(`${this.name}/keyboard`);
+        this.cursorColor = blurColor;
       } else {
         this.onEdge?.(edgeInfo);
       }
@@ -82,6 +86,7 @@ export default {
     ref="focusNode"
     :onAction="{
       onFocus: _onFocus,
+      onBlur: _onBlur,
     }"
   >
     <div
@@ -112,6 +117,7 @@ export default {
       :cursorWidth="2"
       :onTextChange="_onTextChange"
       :onTextOverflow="_onTextOverflow"
+      :cursorColor="cursorColor"
     />
 
     <div :style="{ top: 100 }">

package/samples/Input/KeyboardItem.vue

@@ -33,7 +33,7 @@ export default {
     },
     _onClick() {
       this.onClick(this.data);
-    }
+    },
   },
   created() {
     this.onAction.register("onFocus", this._onFocus);

package/samples/LongImage/App.vue

@@ -16,36 +16,20 @@
  *
  -->
 
-<script lang="ts">
-import { Options, Vue } from "vue-class-component";
+<script setup>
 import LongImageScroll from "./LongImageScroll.vue";
 import Button from "./Button.vue";
-import LongImageSource from "./assets/1280x7200.jpg";
+import longImageSource from "./assets/1280x7200.jpg";
+import { useRouter } from "vue-router";
 
-interface KeyEvent {
-  keyCode: Number;
-}
+const router = useRouter();
 
-@Options({
-  components: {
-    LongImageScroll,
-    Button,
-  },
-})
-class App extends Vue {
-  constructor(props: any) {
-    super(props);
+const onKeyDown = (ev) => {
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    router.go(-1); // 有router时，是从DemoHomepage进入，回退
   }
-  private LongImageSource: String = LongImageSource;
-
-  onKeyDown(ev: KeyEvent): Boolean {
-    if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-      this.$router?.go(-1); // 有router时，是从DemoHomepage进入，回退
-    }
-    return true;
-  }
-}
-export default App;
+  return true;
+};
 </script>
 
 
@@ -74,7 +58,7 @@ export default App;
     <div :style="{ left: 100, top: 100 }">
       <LongImageScroll
         :style="{ width: 1000, height: 500, backgroundColor: '#EEEEEE' }"
-        :imageSrc="LongImageSource"
+        :imageSrc="longImageSource"
         :scrollBlockStyle="{
           width: 10,
           height: 30,
@@ -89,7 +73,7 @@ export default App;
         :step="60"
       />
       <div :style="{ left: 400, top: 550 }">
-        <Button />
+        <Button></Button>
       </div>
     </div>
   </jsv-focus-block>

package/samples/LongImage/Button.vue

@@ -1,153 +1,58 @@
-<script lang="ts">
-import { Vue } from "vue-class-component";
-export default class Button extends Vue {
-  constructor(props: any) {
-    super(props);
-  }
-  private onKeyDown?: Function = undefined;
-  private leftRef: any = null;
-  private rightRef: any = null;
-  private focusId: Number = 0; // 0：button未获得焦点/焦点移出。 1：button获取焦点切焦点在按钮1上。 2：button获取焦点切焦点在按钮2上。
-  private focusName: String = "";
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-07-08 15:18:02
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-07-08 17:47:25
+ * @Description: file content
+-->
+<script setup>
+import { ref } from "vue";
+import { HORIZONTAL, MetroWidget, EdgeDirection, useFocusHub } from "jsview";
+import ButtonItem from "./ButtonItem.vue";
 
-  onleftRef(ref: any) {
-    this.leftRef = ref;
-  }
+const focusHub = useFocusHub();
+const data = [
+  {
+    width: 100,
+    height: 50,
+    marginRight: 100,
+    content: "同意",
+  },
+  {
+    width: 100,
+    height: 50,
+    content: "取消",
+  },
+];
 
-  onRightRef(ref: any) {
-    this.rightRef = ref;
-  }
-
-  private getLeftActionCallback() {
-    const onAction = {
-      // onKeyDown: this.onKeyDown,
-      onKeyDown: (ev: any) => {
-        let keyUsed = true;
-        switch (ev.keyCode) {
-          case 37:
-            this.focusName = "btn_left";
-            break;
-          case 38:
-            this.focusName = "LongImageScroll";
-            break;
-          case 39:
-            this.focusName = "btn_right";
-            break;
-          default:
-            keyUsed = false;
-        }
-        if (keyUsed) {
-          console.log("Button requestFocusName = ", this.focusName);
-          this.leftRef.findBlockByName(this.focusName).requestFocus();
-        }
-        return keyUsed;
-      },
-      onFocus: () => {
-        console.log("btn_left getFocus");
-        this.focusId = 1;
-      },
-      onBlur: () => {
-        console.log("btn_left loseFocus");
-        this.focusId = 0;
-      },
-    };
-    return onAction;
-  }
+const measures = (item) => {
+  return item;
+};
 
-  private getRightActionCallback() {
-    const onAction = {
-      // onKeyDown: this.onKeyDown,
-      onKeyDown: (ev: any) => {
-        let keyUsed = true;
-        switch (ev.keyCode) {
-          case 37:
-            this.focusName = "btn_left";
-            break;
-          case 38:
-            this.focusName = "LongImageScroll";
-            break;
-          case 39:
-            this.focusName = "btn_right";
-            break;
-          default:
-            keyUsed = false;
-        }
-        if (keyUsed) {
-          this.leftRef.findBlockByName(this.focusName).requestFocus();
-        }
-        return keyUsed;
-      },
-      onFocus: () => {
-        console.log("btn_left getFocus");
-        this.focusId = 2;
-      },
-      onBlur: () => {
-        console.log("btn_left loseFocus");
-        this.focusId = 0;
-      },
-    };
-    return onAction;
+const onEdge = (edgeInfo) => {
+  if (edgeInfo.direction == EdgeDirection.top) {
+    focusHub.setFocus("longImageScroll");
   }
-}
+};
 </script>
 
 <template>
-  <div>
-    <jsv-focus-block
-      :ref="onleftRef"
-      namespace="btn_left"
-      :onAction="getLeftActionCallback()"
-    >
-      <div
-        :style="{
-          width: 130,
-          height: 60,
-          left: -25,
-          top: -5,
-          backgroundColor: this.focusId === 1 ? '#DD0000' : '#FFFFFF',
-        }"
-      ></div>
-      <div
-        :style="{
-          width: 120,
-          height: 50,
-          left: -20,
-          fontSize: '30px',
-          textAlign: 'center',
-          lineHeight: '50px',
-          backgroundColor: '#EEEEEE',
-        }"
-      >
-        按钮1
-      </div>
-    </jsv-focus-block>
-    <jsv-focus-block
-      :ref="onRightRef"
-      namespace="btn_right"
-      :onAction="getRightActionCallback()"
-    >
-      <div
-        :style="{
-          width: 130,
-          height: 60,
-          left: 125,
-          top: -5,
-          backgroundColor: this.focusId === 2 ? '#DD0000' : '#FFFFFF',
-        }"
-      ></div>
-      <div
-        :style="{
-          width: 120,
-          height: 50,
-          left: 130,
-          fontSize: '30px',
-          textAlign: 'center',
-          lineHeight: '50px',
-          backgroundColor: '#EEEEEE',
-        }"
-      >
-        按钮2
-      </div>
-    </jsv-focus-block>
-  </div>
+  <metro-widget
+    name="button"
+    :width="500"
+    :height="50"
+    :data="data"
+    :direction="HORIZONTAL"
+    :measures="measures"
+    :onEdge="onEdge"
+  >
+    <template #renderItem="{ data, query, onEdge, onAction }">
+      <button-item
+        :data="data"
+        :query="query"
+        :onEdge="onEdge"
+        :onAction="onAction"
+      />
+    </template>
+  </metro-widget>
 </template>

package/samples/LongImage/ButtonItem.vue

@@ -0,0 +1,44 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-07-08 15:05:00
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-07-08 17:46:39
+ * @Description: file content
+-->
+<script setup>
+import { ref } from "vue";
+
+const props = defineProps({
+  data: Object,
+  query: Object,
+  onEdge: Function,
+  onAction: Object,
+});
+const focused = ref(false);
+const onFocus = () => {
+  focused.value = true;
+};
+
+const onBlur = () => {
+  focused.value = false;
+};
+
+const onClick = () => {};
+
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+props.onAction.register("onClick", onClick);
+</script>
+
+<template>
+  <div
+    :style="{
+      width: props.data.width,
+      height: props.data.height,
+      fontSize: 30,
+      backgroundColor: focused ? '#DD8800' : '#BBBBAA',
+    }"
+  >
+    {{ data.content }}
+  </div>
+</template>

package/samples/LongImage/LongImageScroll.vue

@@ -1,125 +1,90 @@
-<script lang="ts">
+<script setup>
 import Scroll from "./Scroll.vue";
-import { Options, Vue } from "vue-class-component";
+import { ref, onMounted } from "vue";
+import { useFocusHub } from "jsview";
 
-@Options({
-  components: {
-    Scroll,
-  },
-  props: {
-    step: Number,
-    style: Object,
-    scrollStyle: Object,
-    scrollBlockStyle: Object,
-    imageSrc: String,
-  },
-})
-export default class LongImageScroll extends Vue {
-  constructor(props: any) {
-    super(props);
-  }
-
-  onMainRef(ref: any) {
-    this.rootRef = ref;
-  }
+const props = defineProps({
+  step: Number,
+  style: Object,
+  scrollStyle: Object,
+  scrollBlockStyle: Object,
+  imageSrc: String,
+});
 
-  private getActionCallback() {
-    const onAction = {
-      onKeyDown: (ev: any) => {
-        const valid =
-          this.element &&
-          this.element.clientHeight &&
-          this.element.clientHeight > this.style.height;
-        // let keyUsed = true;
-        if (valid) {
-          let text_y;
-          switch (ev.keyCode) {
-            case 38:
-              if (this.textY !== 0) {
-                text_y =
-                  this.textY + this.step >= 0 ? 0 : this.textY + this.step;
-                (this.textY = text_y),
-                  (this.scrollY =
-                    (-text_y /
-                      (this.element.clientHeight - this.style.height)) *
-                    (this.scrollStyle.height - this.scrollBlockStyle.height));
-              }
-              break;
-            case 40:
-              if (
-                this.textY !==
-                this.style.height - this.element.clientHeight
-              ) {
-                text_y =
-                  this.textY - this.step <=
-                  this.style.height - this.element.clientHeight
-                    ? this.style.height - this.element.clientHeight
-                    : this.textY - this.step;
-                (this.textY = text_y),
-                  (this.scrollY =
-                    (-text_y /
-                      (this.element.clientHeight - this.style.height)) *
-                    (this.scrollStyle.height - this.scrollBlockStyle.height));
-              } else {
-                this.rootRef.findBlockByName("btn_left").requestFocus();
-              }
-              break;
+const focusHub = useFocusHub();
+const element = ref(null);
+const scrollY = ref(0);
+const textY = ref(0);
+const onAction = {
+  onKeyDown: (ev) => {
+    const valid =
+      element.value &&
+      element.value.clientHeight &&
+      element.value.clientHeight > props.style.height;
+    // let keyUsed = true;
+    if (valid) {
+      let text_y;
+      switch (ev.keyCode) {
+        case 38:
+          if (textY.value !== 0) {
+            text_y =
+              textY.value + props.step >= 0 ? 0 : textY.value + props.step;
+            (textY.value = text_y),
+              (scrollY.value =
+                (-text_y / (element.value.clientHeight - props.style.height)) *
+                (props.scrollStyle.height - props.scrollBlockStyle.height));
           }
-        }
-      },
-      onFocus: () => {
-        console.log("LongImageScroll getFocus");
-      },
-      onBlur: () => {
-        console.log("LongImageScroll loseFocus");
-      },
-    };
-    return onAction;
-  }
-
-  OnLoad = () => {
-    // 图片加载完成的回调
-    console.log("Image loaded!");
-  };
+          break;
+        case 40:
+          if (textY.value !== props.style.height - element.value.clientHeight) {
+            text_y =
+              textY.value - props.step <=
+              props.style.height - element.value.clientHeight
+                ? props.style.height - element.value.clientHeight
+                : textY.value - props.step;
+            (textY.value = text_y),
+              (scrollY.value =
+                (-text_y / (element.value.clientHeight - props.style.height)) *
+                (props.scrollStyle.height - props.scrollBlockStyle.height));
+          } else {
+            focusHub.setFocus("button");
+          }
+          break;
+      }
+    }
+  },
+  onFocus: () => {
+    console.log("LongImageScroll getFocus");
+  },
+  onBlur: () => {
+    console.log("LongImageScroll loseFocus");
+  },
+};
 
-  private element: any = null;
-  private scrollY: Number = 0;
-  private textY: any = 0;
-  private rootRef: any = null;
-  private step: any = 0;
-  private style: any = null;
-  private scrollStyle: any = null;
-  private scrollBlockStyle: any = null;
-  private imageSrc: any = null;
+const onLoad = () => {
+  // 图片加载完成的回调
+  console.log("Image loaded!");
+};
 
-  mounted() {
-    this.rootRef.requestFocus();
-  }
-}
+onMounted(() => {
+  focusHub.setFocus("longImageScroll");
+});
 </script>
 
 
 <template>
-  <jsv-focus-block
-    :ref="onMainRef"
-    namespace="LongImageScroll"
-    :onAction="getActionCallback()"
-  >
+  <jsv-focus-block name="longImageScroll" :onAction="onAction">
     <div :style="{ overflow: 'hidden', ...style }">
       <img
-        :alt="{}"
-        :ref="
-          (ele) => {
-            this.element = ele;
-          }
-        "
+        alt=""
+        ref="element"
         :src="imageSrc"
-        :style="{ top: this.textY, width: style.width }"
-        :onLoad="OnLoad"
+        :style="{ top: textY, width: style.width }"
+        :onLoad="onLoad"
       />
     </div>
     <Scroll
-      :top="this.scrollY"
+      :top="scrollY"
       :scrollStyle="scrollStyle"
       :scrollBlockStyle="scrollBlockStyle"
     />

package/samples/LongImage/Scroll.vue

@@ -1,16 +1,14 @@
-<script>
-export default {
-  props: {
-    scrollStyle: Object,
-    top: Number,
-    scrollBlockStyle: Object,
-  },
-};
+<script setup>
+defineProps({
+  scrollStyle: Object,
+  top: Number,
+  scrollBlockStyle: Object,
+});
 </script>
 <template>
   <div :style="{ ...scrollStyle }">
     <div :style="{ top: top }">
-      <div :style="{ ...scrollBlockStyle }" />
+      <div :style="{ ...scrollBlockStyle }"></div>
     </div>
   </div>
 </template>

package/samples/LongText/App.vue

@@ -23,40 +23,25 @@
  *    所以务必在盒子上实际测试缩进效果。
  -->
 
-<script lang="ts">
-import { Options, Vue } from "vue-class-component";
+<script setup>
 import LongTextScroll from "./LongTextScroll.vue";
 import Button from "./Button.vue";
-import { jJsvRuntimeBridge } from "jsview/utils/JsViewVueTools/JsvRuntimeBridge";
+import { jJsvRuntimeBridge } from "jsview";
+import { onMounted, ref } from "vue";
+import { useRouter } from "vue-router";
 
-interface KeyEvent {
-  keyCode: Number;
-}
+const router = useRouter();
 
-@Options({
-  components: {
-    LongTextScroll,
-    Button,
-  },
-})
-class App extends Vue {
-  constructor(props: any) {
-    super(props);
+const onKeyDown = (ev) => {
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    router.go(-1); // 有router时，是从DemoHomepage进入，回退
   }
+  return true;
+};
 
-  onKeyDown(ev: KeyEvent): Boolean {
-    if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-      this.$router?.go(-1); // 有router时，是从DemoHomepage进入，回退
-    }
-    return true;
-  }
-
-  mounted() {
-    // 调试接口，对接JSCenter平台去掉启动图的处理
-    jJsvRuntimeBridge.notifyPageLoaded();
-  }
-}
-export default App;
+onMounted(() => {
+  jJsvRuntimeBridge.notifyPageLoaded();
+});
 </script>
 
 <template>