@shijiu/jsview-vue 0.9.490 → 0.9.590

package/samples/NinePatchDemo/App.vue

@@ -1,27 +1,119 @@
+<script setup>
+import {
+  jJsvRuntimeBridge,
+  MetroWidget,
+  HORIZONTAL,
+  JsvNinePatch,
+} from "jsview";
+import Item from "./Item.vue";
+import borderImageUrl from "./assets/border.png";
+import { ref, onMounted } from "vue";
+import { useRouter, useRoute } from "vue-router";
+
+const router = useRouter();
+
+const data = [
+  {
+    blocks: {
+      w: 160,
+      h: 160,
+    },
+    color: "#FF9900",
+    content: 0,
+  },
+  {
+    blocks: {
+      w: 300,
+      h: 300,
+    },
+    color: "#0099FF",
+    content: 1,
+  },
+  {
+    blocks: {
+      w: 160,
+      h: 160,
+    },
+    color: "#FF9900",
+    content: 2,
+  },
+];
+
+const framePosition = ref({
+  x: 0,
+  y: 0,
+  width: 50,
+  height: 50,
+});
+
+const _onFramePositionChanged = (new_x, new_y, new_width, new_height) => {
+  console.log(
+    `new x=${new_x} y=${new_y} width=${new_width} height=${new_height}`
+  );
+
+  framePosition.value = {
+    x: new_x,
+    y: new_y,
+    width: new_width,
+    height: new_height,
+  };
+};
+
+const _measures = (item) => {
+  return {
+    width: item.blocks.w,
+    height: item.blocks.h,
+    marginRight: 10,
+    marginTop: 10,
+  };
+};
+
+const _onKeyDown = (ev) => {
+  // 8:Backspace, 27:Escape, 10000:盒子返回键
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    router?.go(-1); // 有router时，是从DemoHomepage进入，回退
+    return true;
+  }
+  return false;
+};
+
+const myFocusWidget = ref(null);
+
+onMounted(() => {
+  myFocusWidget.value.getFocusBlockRef().requestFocus();
+  jJsvRuntimeBridge.notifyPageLoaded();
+});
+</script>
+
 <template>
   <div :style="{ width: 1280, height: 720, backgroundColor: '#FFFFFF' }">
     <jsv-focus-block ref="focusNode" :onKeyDown="_onKeyDown">
-      <div :style="{
-            textAlign: 'center',
-            fontSize: 30,
-            lineHeight: 50,
-            color: '#ffffff',
-            left: 140,
-            top: 20,
-            width: 1000,
-            height: 50,
-            backgroundColor: 'rgba(27,38,151,0.8)'}"
-        >NinePatch展示,框的四个角的方形中心和项目的四个顶点严格对齐</div>
+      <div
+        :style="{
+          textAlign: 'center',
+          fontSize: 30,
+          lineHeight: 50,
+          color: '#ffffff',
+          left: 140,
+          top: 20,
+          width: 1000,
+          height: 50,
+          backgroundColor: 'rgba(27,38,151,0.8)',
+        }"
+      >
+        NinePatch展示,框的四个角的方形中心和项目的四个顶点严格对齐
+      </div>
       <metro-widget
-          ref="myFocusWidget"
-          :top="100"
-          :left="250"
-          :width="1000"
-          :height="400"
-          :direction="direction"
-          :data="data"
-          :measures="_measures"
-          :padding="{ left: 50, right: 50, top: 50, height: 50 }">
+        ref="myFocusWidget"
+        :top="100"
+        :left="250"
+        :width="1000"
+        :height="400"
+        :direction="HORIZONTAL"
+        :data="data"
+        :measures="_measures"
+        :padding="{ left: 50, right: 50, top: 50, height: 50 }"
+      >
         <template #renderItem="{ data, query, onEdge, onAction }">
           <item
             :data="data"
@@ -32,7 +124,7 @@
           />
         </template>
       </metro-widget>
-      <div :style="{top:150, left:300}">
+      <div :style="{ top: 150, left: 300 }">
         <jsv-nine-patch
           :style="{
             width: framePosition.width,
@@ -40,7 +132,7 @@
             top: framePosition.y,
             left: framePosition.x,
           }"
-          :imageUrl="imageUrl"
+          :imageUrl="borderImageUrl"
           :imageWidth="81"
           :centerWidth="25"
           :borderOutset="14"
@@ -51,96 +143,3 @@
     </jsv-focus-block>
   </div>
 </template>
-<script setup>
-import { jJsvRuntimeBridge } from "jsview/utils/JsViewVueTools/JsvRuntimeBridge";
-import {
-  HORIZONTAL,
-  MetroWidget,
-} from "jsview/utils/JsViewEngineWidget";
-import JsvNinePatch from "jsview/utils/JsViewVueWidget/JsvNinePatch.vue";
-import Item from "./Item.vue";
-import borderImageUrl from "./assets/border.png"
-import { ref, onMounted } from 'vue'
-import { useRouter, useRoute } from 'vue-router'
-
-
-const router = useRouter();
-
-const data = [
-    {
-        blocks: {
-            w: 160,
-            h: 160
-        },
-        color: "#FF9900",
-        content: 0
-    },
-    {
-        blocks: {
-            w: 300,
-            h: 300
-        },
-        color: "#0099FF",
-        content: 1
-    },
-    {
-        blocks: {
-            w: 160,
-            h: 160
-        },
-        color: "#FF9900",
-        content: 2
-    },
-];
-
-const framePosition = ref({
-        x: 0,
-        y: 0,
-        width: 50,
-        height: 50
-      });
-
-const direction = HORIZONTAL;
-
-const imageUrl = borderImageUrl;
-
-const _onFramePositionChanged = (new_x, new_y, new_width, new_height) => {
-      console.log(`new x=${new_x} y=${new_y} width=${new_width} height=${new_height}`);
-
-      framePosition.value = {
-        x: new_x,
-        y: new_y,
-        width: new_width,
-        height: new_height
-      };
-};
-
-const _measures = (item)=>{
-      return {
-        width: item.blocks.w,
-        height: item.blocks.h,
-        marginRight: 10,
-        marginTop: 10,
-      };
-    };
-
-const _onKeyDown = (ev) => {
-      // 8:Backspace, 27:Escape, 10000:盒子返回键
-      if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-        router?.go(-1); // 有router时，是从DemoHomepage进入，回退
-        return true;
-      }
-      return false;
-    };
-
-const myFocusWidget = ref(null);
-
-onMounted(()=>{
-  myFocusWidget.value.getFocusBlockRef().requestFocus();
-  jJsvRuntimeBridge.notifyPageLoaded();
-});
-
-</script>
-<style scoped>
-
-</style>

package/samples/NinePatchDemo/Item.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from 'vue'
+import { ref, computed } from "vue";
 
 const props = defineProps({
   data: Object,
@@ -11,7 +11,7 @@ const props = defineProps({
 
 let focused = ref(false);
 
-let styleValue = computed(()=>{
+let styleValue = computed(() => {
   return {
     width: props.data.blocks.w,
     height: props.data.blocks.h,
@@ -20,7 +20,7 @@ let styleValue = computed(()=>{
   };
 });
 
-const onFocus = ()=>{
+const onFocus = () => {
   focused.value = true;
   if (props.frameChanged) {
     let pos = props.query.position(props.query.id);
@@ -33,25 +33,24 @@ const onFocus = ()=>{
 
     props.frameChanged(new_x, new_y, new_width, new_height);
   }
-}
+};
 
-const onBlur = ()=>{
+const onBlur = () => {
   focused.value = false;
 };
 
-const onClicked = ()=>{
+const onClicked = () => {
   onsole.log(`item ${props.query.id} clicked`);
 };
 
 props.onAction.register("onFocus", onFocus);
 props.onAction.register("onBlur", onBlur);
 props.onAction.register("onClick", onClicked);
-
 </script>
 
 <template>
   <div :class="focused ? 'focus' : 'blur'" :style="styleValue">
-    {{ '' + props.data.content + (testData != null ? testData.MyName : "") }}
+    {{ "" + props.data.content + (testData != null ? testData.MyName : "") }}
   </div>
 </template>
 

package/samples/Preload/App.vue

@@ -1,69 +1,67 @@
-<script>
-import { HORIZONTAL, SimpleWidget } from "jsview/utils/JsViewEngineWidget";
+<script setup>
+import {
+  HORIZONTAL,
+  MetroWidget,
+  JsvPreload,
+  buildPreloadInfo,
+  buildDownloadInfo,
+} from "jsview";
 import awesome from "./images/awesomeface.png";
 import cat from "./images/cat.jpg";
 import { data } from "./data.js";
 import Item from "./Item.vue";
-import JsvPreload, {
-  buildPreloadInfo,
-  buildDownloadInfo,
-} from "jsview/utils/JsViewVueWidget/JsvPreload";
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+
+const name = "/preload";
+const text = ref("");
+let = preloadInfo = [];
+let = downloadInfo = [];
+const router = useRouter();
+let focusNode = ref(null);
+
+const _onPreloading = (percent) => {
+  console.log("preloading ", percent);
+};
+
+const _onPreloadDone = (imageInfo) => {
+  console.log("PRELOAD DONE!", imageInfo);
+};
+
+const _onDownloadDone = () => {
+  console.log("DOWNLOAD DONE!");
+  this.text = `图片下载完成\n${awesome}\n${cat}`;
+};
+
+const _measures = () => {
+  return {
+    width: 180,
+    height: 90,
+    focusable: true,
+  };
+};
+
+const _onKeyDown = (ev) => {
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    router.go(-1); // 有router时，是从DemoHomepage进入，回退
+  }
+  return true;
+};
 
-export default {
-  components: { SimpleWidget, Item, JsvPreload },
-  data() {
-    return {
-      data,
-      name: "/preload",
-      text: "",
-      direction: HORIZONTAL,
-      awesome,
-      cat,
-      preloadInfo: [],
-      downloadInfo: [],
-    };
-  },
-  methods: {
-    _onPreloading(percent) {
-        console.log("preloading ", percent)
-    },
-    _onPreloadDone(imageInfo) {
-      console.log("PRELOAD DONE!", imageInfo);
-    },
-    _onDownloadDone() {
-      console.log("DOWNLOAD DONE!");
-      this.text = `图片下载完成\n${this.awesome}\n${this.cat}`;
-    },
-    _measures() {
-      return {
-        width: 180,
-        height: 90,
-        focusable: true,
-      };
-    },
-    _onKeyDown(ev) {
-      if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-        this.$router?.go(-1); // 有router时，是从DemoHomepage进入，回退
-      }
-      return true;
-    },
-    _onFocus() {
-      this.$refs.focusNode.findBlockByName(this.name).requestFocus();
-    },
-  },
-  created() {
-    for (const item of this.data) {
-      this.preloadInfo.push(buildPreloadInfo(item.url));
-      this.preloadInfo.push(buildPreloadInfo(item.focusUrl));
-    }
-    this.preloadInfo.push(null); // 测试item为null的加载
-    this.downloadInfo = [
-      buildDownloadInfo(this.awesome),
-      buildDownloadInfo(this.cat),
-      buildDownloadInfo(null), // 测试URL为null的加载
-    ];
-  },
+const _onFocus = () => {
+  focusNode.value.findBlockByName(name).requestFocus();
 };
+
+for (const item of data) {
+  preloadInfo.push(buildPreloadInfo(item.url));
+  preloadInfo.push(buildPreloadInfo(item.focusUrl));
+}
+preloadInfo.push(null); // 测试item为null的加载
+downloadInfo = [
+  buildDownloadInfo(awesome),
+  buildDownloadInfo(cat),
+  buildDownloadInfo(null), // 测试URL为null的加载
+];
 </script>
 
 <template>
@@ -91,11 +89,11 @@ export default {
       预加载后，图片(按钮焦点切换)切换不闪屏
     </div>
     <div :style="{ top: 200, left: 300 }">
-      <simple-widget
+      <metro-widget
         :name="name"
         :width="540"
         :height="90"
-        :direction="direction"
+        :direction="HORIZONTAL"
         :data="data"
         :measures="_measures"
       >
@@ -107,7 +105,7 @@ export default {
             :onAction="onAction"
           />
         </template>
-      </simple-widget>
+      </metro-widget>
     </div>
     <div
       :style="{

package/samples/Preload/Item.vue

@@ -1,32 +1,24 @@
-<script>
-export default {
-  props: {
-    data: Object,
-    query: Object,
-    onEdge: Function,
-    onAction: Object,
-  },
-  data() {
-    return {
-      focus: false,
-    };
-  },
-  methods: {
-    onFocus() {
-      this.focus = true;
-    },
-    onBlur() {
-      this.focus = false;
-    },
-  },
-  created() {
-    this.onAction.register("onFocus", this.onFocus);
-    this.onAction.register("onBlur", this.onBlur);
-    this.onAction.register("onClick", () => {
-      console.log("cchtest item on click ", this.data);
-    });
-  },
+<script setup>
+import { ref } from "vue";
+const props = defineProps({
+  data: Object,
+  query: Object,
+  onEdge: Function,
+  onAction: Object,
+});
+const focus = ref(false);
+
+const onFocus = () => {
+  focus.value = true;
+};
+const onBlur = () => {
+  focus.value = false;
 };
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+props.onAction.register("onClick", () => {
+  console.log("cchtest item on click ", data);
+});
 </script>
 
 <template>
@@ -36,5 +28,5 @@ export default {
       height: 90,
       backgroundImage: focus ? data.focusUrl : data.url,
     }"
-  />
+  ></div>
 </template>

package/samples/QrcodeDemo/App.vue

@@ -1,33 +1,28 @@
-<script>
-import QRCode from "jsview/utils/JsViewVueWidget/JsvQrcode";
-export default {
-  components: { QRCode },
-  data() {
-    return {
-      value: "http://www.baidu.com/",
-      size: 400,
-      fgColor: "#0000FF",
-      bgColor: "#ffff00",
-      level: "H", // ，容错级别，分别是L(7%)、M(15%)、Q(25%)、H(30%),
-      includeImage: true,
-      imageH: 64,
-      imageW: 64,
-      imageSrc:
-        "http://oss.image.51vtv.cn/homepage/20191224/0fdcdc8b258fe7baac16b73f58f8989d.jpg",
-      tipsInfo: `功能：二维码展示可配置项：1.前景色 
+<script setup>
+import { JsvQrcode } from "jsview";
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
+const value = "http://www.baidu.com/";
+const size = 400;
+const fgColor = "#0000FF";
+const bgColor = "#ffff00";
+const level = "H"; // ，容错级别，分别是L(7%)、M(15%)、Q(25%)、H(30%),
+const includeImage = true;
+const imageH = 64;
+const imageW = 64;
+const imageSrc =
+  "http://oss.image.51vtv.cn/homepage/20191224/0fdcdc8b258fe7baac16b73f58f8989d.jpg";
+const tipsInfo = `功能：二维码展示可配置项：1.前景色 
 2.背景色 
 3.指定小图标 
-4.容错级别：'L', 'M', 'Q', 'H'`,
-    };
-  },
-  methods: {
-    onKeyDown(ev) {
-      if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-        this.$router?.go(-1); // 有router时，是从DemoHomepage进入，回退
-      }
-      return true;
-    },
-  },
+4.容错级别：'L', 'M', 'Q', 'H'`;
+const onKeyDown = (ev) => {
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    router.go(-1); // 有router时，是从DemoHomepage进入，回退
+  }
+  return true;
 };
 </script>
 
@@ -55,7 +50,7 @@ export default {
         {{ tipsInfo }}
       </div>
       <div :style="{ left: 200, top: 100 }">
-        <QRCode
+        <jsv-qrcode
           :value="value"
           :size="size"
           :fgColor="fgColor"