@shijiu/jsview-vue 0.9.502 → 0.9.590

package/samples/LongText/Button.vue

@@ -1,153 +1,51 @@
-<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 = "";
+<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 = "LongTextScroll";
-            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 = "LongTextScroll";
-            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("longTextScroll");
   }
-}
+};
 </script>
 
 <template>
-  <div>
-    <jsv-focus-block
-      :ref="onleftRef"
-      namespace="btn_left"
-      :onAction="getLeftActionCallback()"
-    >
-      <div
-        :style="{
-          width: 100,
-          height: 60,
-          left: -10,
-          top: -5,
-          backgroundColor: this.focusId === 1 ? '#DD0000' : '#FFFFFF',
-        }"
-      ></div>
-      <div
-        :style="{
-          width: 90,
-          height: 50,
-          left: -5,
-          fontSize: '30px',
-          textAlign: 'center',
-          lineHeight: '50px',
-          backgroundColor: '#EEEEEE',
-        }"
-      >
-        同意
-      </div>
-    </jsv-focus-block>
-    <jsv-focus-block
-      :ref="onRightRef"
-      namespace="btn_right"
-      :onAction="getRightActionCallback()"
-    >
-      <div
-        :style="{
-          width: 100,
-          height: 60,
-          left: 110,
-          top: -5,
-          backgroundColor: this.focusId === 2 ? '#DD0000' : '#FFFFFF',
-        }"
-      ></div>
-      <div
-        :style="{
-          width: 90,
-          height: 50,
-          left: 115,
-          fontSize: '30px',
-          textAlign: 'center',
-          lineHeight: '50px',
-          backgroundColor: '#EEEEEE',
-        }"
-      >
-        取消
-      </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/LongText/ButtonItem.vue

@@ -0,0 +1,44 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-07-08 15:05:00
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-07-08 17:45:44
+ * @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/LongText/LongTextScroll.vue

@@ -1,118 +1,85 @@
-<script lang="ts">
+<script setup>
 import Scroll from "./Scroll.vue";
-import { Options, Vue } from "vue-class-component";
+import { ref, onMounted } from "vue";
 
-@Options({
-  components: {
-    Scroll,
-  },
-  props: {
-    step: Number,
-    style: Object,
-    scrollStyle: Object,
-    scrollBlockStyle: Object,
-    textStyle: Object,
-  },
-})
-export default class LongTextScroll extends Vue {
-  constructor(props: any) {
-    super(props);
-    console.log("test LongTextScoll");
-  }
+const props = defineProps({
+  step: Number,
+  style: Object,
+  scrollStyle: Object,
+  scrollBlockStyle: Object,
+  textStyle: Object,
+});
 
-  onMainRef(ref: any) {
-    this.rootRef = ref;
-  }
+const rootRef = ref(null);
+const element = ref(null);
+const scrollY = ref(0);
+const textY = ref(0);
 
-  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 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("LongTextScroll getFocus");
-      },
-      onBlur: () => {
-        console.log("LongTextScroll loseFocus");
-      },
-    };
-    return onAction;
-  }
-
-  OnLoad = () => {
-    // 图片加载完成的回调
-    console.log("Image loaded!");
-  };
-
-  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 textStyle: any = null;
+          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 {
+            rootRef.value.findBlockByName("button").requestFocus();
+          }
+          break;
+      }
+    }
+  },
+  onFocus: () => {
+    console.log("LongTextScroll getFocus");
+  },
+  onBlur: () => {
+    console.log("LongTextScroll loseFocus");
+  },
+};
 
-  mounted() {
-    this.rootRef.requestFocus();
-  }
-}
+const OnLoad = () => {
+  // 图片加载完成的回调
+  console.log("Image loaded!");
+};
+onMounted(() => {
+  rootRef.value.requestFocus();
+});
 </script>
 
 
 <template>
   <jsv-focus-block
-    :ref="onMainRef"
-    namespace="LongTextScroll"
-    :onAction="getActionCallback()"
+    ref="rootRef"
+    name="longTextScroll"
+    :onAction="onAction"
   >
     <div :style="{ clipPath: 'inset(0px 0px 0px 0px)', ...style }">
       <div
-        :ref="
-          (ele) => {
-            this.element = ele;
-          }
-        "
+        ref="element"
         :style="{ top: textY, width: style.width, ...textStyle }"
       >
         {{

package/samples/LongText/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/Marquee/App.vue

@@ -2,43 +2,34 @@
  * @Author: ChenChanghua
  * @Date: 2022-01-18 18:24:18
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-01-26 16:10:21
+ * @LastEditTime: 2022-07-08 13:41:53
  * @Description: file content
 -->
-<script>
-import JsvMarquee from "jsview/utils/JsViewVueWidget/JsvMarquee.vue";
-import { jJsvRuntimeBridge } from "jsview/utils/JsViewVueTools/JsvRuntimeBridge";
+<script setup>
+import { jJsvRuntimeBridge, JsvMarquee } from "jsview";
+import { useRouter } from "vue-router";
+import { onMounted } from "vue";
 
-export default {
-  components: {
-    JsvMarquee,
-  },
-  setup() {
-    return {
-      width: 600,
-      height: 50,
-      fontStyle: {
-        lineHeight: 50,
-        fontSize: 50,
-      },
-      longText:
-        "石室诗士施氏，嗜狮，誓食十狮。施氏时时适市视狮。十时，适十狮适市。是时，适施氏适市。施氏视是十狮，恃矢势，使是十狮逝世。氏拾是十狮尸，适石室。石室湿，氏使侍拭石室。石室拭，施氏始试食是十狮尸。食时，始识是十狮尸，实十石狮尸。试释是事。",
-      shortText: "测试文字",
-    };
-  },
-  methods: {
-    _onKeyDown(ev) {
-      if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-        this.$router?.go(-1); // 有router时，是从DemoHomepage进入，回退
-      }
-      return true;
-    },
-  },
-  mounted() {
-    // 调试接口，对接JSCenter平台去掉启动图的处理
-    jJsvRuntimeBridge.notifyPageLoaded();
-  },
+const width = 600;
+const height = 50;
+const fontStyle = {
+  lineHeight: 50,
+  fontSize: 50,
 };
+const longText =
+  "石室诗士施氏，嗜狮，誓食十狮。施氏时时适市视狮。十时，适十狮适市。是时，适施氏适市。施氏视是十狮，恃矢势，使是十狮逝世。氏拾是十狮尸，适石室。石室湿，氏使侍拭石室。石室拭，施氏始试食是十狮尸。食时，始识是十狮尸，实十石狮尸。试释是事。";
+const shortText = "测试文字";
+const router = useRouter();
+
+const _onKeyDown = (ev) => {
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    router.go(-1); // 有router时，是从DemoHomepage进入，回退
+  }
+  return true;
+};
+onMounted(() => {
+  jJsvRuntimeBridge.notifyPageLoaded();
+});
 </script>
 <template>
   <jsv-focus-block
@@ -76,7 +67,6 @@ export default {
         backgroundColor: '#007788',
       }"
     >
-      >
       <jsv-marquee
         :layoutStyles="{
           width: width,
@@ -96,7 +86,6 @@ export default {
         backgroundColor: '#007788',
       }"
     >
-      >
       <jsv-marquee
         :layoutStyles="[
           {
@@ -104,11 +93,19 @@ export default {
             height: height,
           },
         ]"
-        :fontStyles="[fontStyle]"
         :text="shortText"
         :slideSpeed="60"
         :forceSlide="true"
+        className="test-font"
       />
     </div>
   </jsv-focus-block>
-</template>
+</template>
+
+<style scoped>
+.test-font {
+  font-size: 50;
+  line-height: 50;
+  color: #ff0000;
+}
+</style>

package/samples/MaskClip/App.vue

@@ -2,45 +2,32 @@
  * @Author: ChenChanghua
  * @Date: 2022-01-24 19:35:59
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-01-25 10:04:39
+ * @LastEditTime: 2022-07-08 17:04:35
  * @Description: file content
 -->
-<script>
-import { jJsvRuntimeBridge } from "jsview/utils/JsViewVueTools/JsvRuntimeBridge";
-import JsvMaskClipDiv from "jsview/utils/JsViewVueWidget/JsvMaskClipDiv";
+<script setup>
+import {
+  jJsvRuntimeBridge,
+  JsvMaskClipDiv,
+} from "jsview";
+import { useRouter } from "vue-router";
+import { onMounted } from "vue";
 import mask1_pic from "./images/mask-025/res/1.png";
 import mask2_pic from "./images/mask-025/res/2.png";
 import mask3_pic from "./images/mask-025/res/3.png";
 import mask4_pic from "./images/mask-025/res/4.png";
 import bg_pic from "./images/php.jpg";
 
-export default {
-  components: {
-    JsvMaskClipDiv,
-  },
-  props: {},
-  setup() {
-    return {
-      mask1_pic,
-      mask2_pic,
-      mask3_pic,
-      mask4_pic,
-      bg_pic,
-    };
-  },
-  methods: {
-    _onKeyDown(ev) {
-      if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-        this.$router?.go(-1); // 有router时，是从DemoHomepage进入，回退
-      }
-      return true;
-    },
-  },
-  mounted() {
-    // 调试接口，对接JSCenter平台去掉启动图的处理
-    jJsvRuntimeBridge.notifyPageLoaded();
-  },
+const router = useRouter();
+const _onKeyDown = (ev) => {
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    router.go(-1); // 有router时，是从DemoHomepage进入，回退
+  }
+  return true;
 };
+onMounted(() => {
+  jJsvRuntimeBridge.notifyPageLoaded();
+});
 </script>
 
 <template>