@shijiu/jsview-vue-samples 1.9.888 → 1.9.915

package/MetroWidgetDemos/PingPong/ViewSwiper.vue

@@ -8,7 +8,7 @@
 <script>
 import AppPage from "./AppPage.vue";
 import { getKeyFramesGroup } from "jsview";
-import { reactive, ref, shallowRef } from "vue";
+import { reactive, ref } from "vue";
 
 export default {
   components: {
@@ -121,34 +121,34 @@ export default {
     $_appSwiper_initAnimation() {
       let leftSlideOutDefine = `@keyframes app-swiper-left-slide-out {
         from {
-          transform: translate3d(0px, 0px, 0px);
+          transform: translate3d(0, 0, 0);
         }
         to {
-          transform: translate3d(${-this.layout.width}px, 0px, 0px);
+          transform: translate3d(${-this.layout.width}, 0, 0);
         }
       }`;
       let leftSlideInDefine = `@keyframes app-swiper-left-slide-in {
         from {
-          transform: translate3d(${this.layout.width}px, 0px, 0px);
+          transform: translate3d(${this.layout.width}, 0, 0);
         }
         to {
-          transform: translate3d(0px, 0px, 0px);
+          transform: translate3d(0, 0, 0);
         }
       }`;
       let rightSlideOutDefine = `@keyframes app-swiper-right-slide-out {
         from {
-          transform: translate3d(0px, 0px, 0px);
+          transform: translate3d(0, 0, 0);
         }
         to {
-          transform: translate3d(${this.layout.width}px, 0px, 0px);
+          transform: translate3d(${this.layout.width}, 0, 0);
         }
       }`;
       let rightSlideInDefine = `@keyframes app-swiper-right-slide-in {
         from {
-          transform: translate3d(${-this.layout.width}px, 0px, 0px);
+          transform: translate3d(${-this.layout.width}, 0, 0);
         }
         to {
-          transform: translate3d(0px, 0px, 0px);
+          transform: translate3d(0, 0, 0);
         }
       }`;
       this.styleShell.insertRule(leftSlideOutDefine);

package/MetroWidgetDemos/Simple/RelativeTemplate.vue

@@ -7,13 +7,13 @@
 -->
 <script setup>
 import { MetroWidget, WholePageSlide, HORIZONTAL, EdgeDirection } from "jsview";
-import { ref, shallowRef } from "vue";
+import { ref } from "vue";
 import { useFocusHub } from "jsview";
 import { simpleData } from "../data";
 import Item from "../Item.vue";
 
 const focusHub = useFocusHub();
-const mwRef = shallowRef(null);
+const mwRef = ref(null);
 
 const wholePageSlide = new WholePageSlide();
 let innerData = simpleData.concat();

package/MetroWidgetDemos/WidgetItem.vue

@@ -1,7 +1,7 @@
 
 <script setup>
 import { HORIZONTAL, MetroWidget, useFocusHub } from "jsview";
-import { ref, shallowRef } from "vue";
+import { ref } from "vue";
 import Item from "./Item.vue";
 
 const props = defineProps({
@@ -11,7 +11,7 @@ const props = defineProps({
   onAction: Object,
 });
 const focusHub = useFocusHub();
-const mwRef = shallowRef(null);
+const mwRef = ref(null);
 
 const measures = (item) => {
   return item;

package/NinePatchDemo/App.vue

@@ -7,7 +7,7 @@ import {
 } from "jsview";
 import Item from "./Item.vue";
 import borderImageUrl from "./assets/border.png";
-import { ref, shallowRef, onMounted } from "vue";
+import { ref, onMounted } from "vue";
 import { useRouter, useRoute } from "vue-router";
 
 const router = useRouter();
@@ -77,7 +77,7 @@ const _onKeyDown = (ev) => {
   return false;
 };
 
-const myFocusWidget = shallowRef(null);
+const myFocusWidget = ref(null);
 
 onMounted(() => {
   myFocusWidget.value.getFocusBlockRef().requestFocus();
@@ -137,7 +137,7 @@ onMounted(() => {
           :centerWidth="25"
           :borderOutset="14"
           :imageDspWidth="81"
-          :animTime="0.2"
+          :animTime=0.2
         ></jsv-nine-patch>
       </div>
     </jsv-focus-block>

package/NinePatchDemo/Item.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, shallowRef, computed } from "vue";
+import { ref, computed } from "vue";
 
 const props = defineProps({
   data: Object,
@@ -40,7 +40,7 @@ const onBlur = () => {
 };
 
 const onClicked = () => {
-  onsole.log(`item ${props.query.id} clicked`);
+  console.log(`item ${props.query.id} clicked`);
 };
 
 props.onAction.register("onFocus", onFocus);
@@ -58,12 +58,12 @@ props.onAction.register("onClick", onClicked);
 .focus {
   transform: scale3d(1.05, 1.05, 1);
   transition: transform 0.25s linear;
-  font-size: 30px;
+  font-size: 30;
 }
 
 .blur {
   transform: scale3d(1, 1, 1);
   transition: transform 0.25s linear;
-  font-size: 30px;
+  font-size: 30;
 }
-</style>
+</style>

package/Preload/App.vue

@@ -11,7 +11,7 @@ import awesome from "./images/awesomeface.png";
 import cat from "./images/cat.jpg";
 import { data } from "./data.js";
 import Item from "./Item.vue";
-import { ref, shallowRef } from "vue";
+import { ref } from "vue";
 import { useRouter } from "vue-router";
 
 const name = "/preload";
@@ -81,8 +81,8 @@ downloadInfo = [
     <div
       :style="{
         textAlign: 'center',
-        fontSize: '30px',
-        lineHeight: '50px',
+        fontSize: 30,
+        lineHeight: 50,
         color: '#ffffff',
         left: 100,
         top: 20,
@@ -118,7 +118,7 @@ downloadInfo = [
         top: 350,
         width: 800,
         height: 800,
-        fontSize: '30px',
+        fontSize: 30,
         color: '#000000',
       }"
     >
@@ -132,4 +132,4 @@ downloadInfo = [
       :onPreloading="_onPreloading"
     />
   </jsv-focus-block>
-</template>
+</template>

package/Preload/Item.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, shallowRef } from "vue";
+import { ref } from "vue";
 const props = defineProps({
   data: Object,
   query: Object,

package/QrcodeDemo/App.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { JsvQrcode } from "jsview";
-import { ref, shallowRef } from "vue";
+import { ref } from "vue";
 import { useRouter } from "vue-router";
 
 const router = useRouter();
@@ -37,8 +37,8 @@ const onKeyDown = (ev) => {
       <div
         :style="{
           textAlign: 'left',
-          fontSize: '30px',
-          lineHeight: '50px',
+          fontSize: 30,
+          lineHeight: 50,
           color: '#ffffff',
           left: 200 + 420,
           top: 100,

package/ScaleDownNeon/App.vue

@@ -1,8 +1,8 @@
 <!--
  * @Author: ChenChanghua
  * @Date: 2022-10-24 13:19:41
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-10-24 13:50:18
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2023-02-13 11:20:12
  * @Description: file content
 -->
 <script setup>
@@ -34,7 +34,7 @@ const style1 = {
   top: 0,
   width: 250,
   height: 250,
-  borderRadius: "15px",
+  borderRadius: 15,
 };
 
 const style2 = {
@@ -42,7 +42,7 @@ const style2 = {
   top: 260,
   width: 250,
   height: 250,
-  borderRadius: "15px",
+  borderRadius: 15,
 };
 </script>
 <template>
@@ -60,22 +60,22 @@ const style2 = {
 
         <div :style="{ left: 120, top: 0 }">
           <img alt="" :style="style1" :src="test4" />
-          <img alt="" :style="style2" jsvImgScaledownTex :src="test4" />
+          <img alt="" :style="style2" data-jsv-img-scaledown-tex :src="test4" />
         </div>
 
         <div :style="{ left: 380, top: 0 }">
           <img alt="" :style="style1" :src="test1" />
-          <img alt="" :style="style2" jsvImgScaledownTex :src="test1" />
+          <img alt="" :style="style2" data-jsv-img-scaledown-tex :src="test1" />
         </div>
 
         <div :style="{ left: 640, top: 0 }">
           <img alt="" :style="style1" :src="test2" />
-          <img alt="" :style="style2" jsvImgScaledownTex :src="test2" />
+          <img alt="" :style="style2" data-jsv-img-scaledown-tex :src="test2" />
         </div>
 
         <div :style="{ left: 900, top: 0 }">
           <img alt="" :style="style1" :src="test3" />
-          <img alt="" :style="style2" jsvImgScaledownTex :src="test3" />
+          <img alt="" :style="style2" data-jsv-img-scaledown-tex :src="test3" />
         </div>
       </div>
     </div>
@@ -96,7 +96,7 @@ const style2 = {
   width: 100;
   height: 200;
   color: #ffffff;
-  font-size: 25px;
+  font-size: 25;
 }
 .top0 {
   top: 0;

package/SoundPool/App.vue

@@ -1,16 +1,14 @@
 <!--
  * @Author: ChenChanghua
  * @Date: 2022-01-25 09:56:46
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-07-08 18:09:10
- * @Description: file content
+ * @LastEditors: Please set LastEditors
 -->
 <script setup>
 import coin from "./coin.mp3";
 import lose from "./lose.mp3";
 import bgmusic from "./bgmusic.mp3";
 import { JsvSoundPool, jJsvRuntimeBridge } from "jsview";
-import { onMounted, onBeforeUnmount, shallowRef } from "vue";
+import { onMounted, onBeforeUnmount, shallowRef, toRaw } from "vue";
 import { useRouter } from "vue-router";
 
 const router = useRouter();
@@ -47,13 +45,12 @@ const _onKeyDown = (ev) => {
       }
       break;
     case 13:
-      bgm.value?.play();
+      toRaw(bgm.value)?.play();
       break;
   }
   return true;
 };
 soundPool.request(`url(${coin})`, null, 1, (state, audioController) => {
-  console.log("cchtest load succeed", audioController);
   if (state === 0) {
     coinController1 = audioController;
   }
@@ -101,8 +98,8 @@ onBeforeUnmount(() => {
       <div
         :style="{
           textAlign: 'center',
-          fontSize: '30px',
-          lineHeight: '50px',
+          fontSize: 30,
+          lineHeight: 50,
           color: '#ffffff',
           left: 100,
           top: 20,
@@ -131,4 +128,4 @@ onBeforeUnmount(() => {
       <jsv-audiotrack ref="bgm" :src="bgmusic" loop="loop" />
     </div>
   </jsv-focus-block>
-</template>
+</template>

package/SprayView/App.vue

@@ -172,9 +172,9 @@ export default {
             top: 20,
             width: 500,
             height: 100,
-            lineHeight: '100px',
+            lineHeight: 100,
             textAlign: 'center',
-            fontSize: '50px',
+            fontSize: 50,
             color: '#FFFFFF',
           }"
         >
@@ -194,13 +194,13 @@ export default {
     transform: translate3d(0, 0, 0);
   }
   25% {
-    transform: translate3d(100px, 0, 0);
+    transform: translate3d(100, 0, 0);
   }
   50% {
     transform: translate3d(0, 0, 0);
   }
   75% {
-    transform: translate3d(100px, 0, 0);
+    transform: translate3d(100, 0, 0);
   }
   100% {
     transform: translate3d(0, 0, 0);
@@ -221,52 +221,52 @@ export default {
     transform: translate3d(0, 0, 0);
   }
   25% {
-    transform: translate3d(500px, 0, 0);
+    transform: translate3d(500, 0, 0);
   }
   50% {
-    transform: translate3d(500px, 100px, 0);
+    transform: translate3d(500, 100, 0);
   }
   75% {
-    transform: translate3d(0, 100px, 0);
+    transform: translate3d(0, 100, 0);
   }
   100% {
     transform: translate3d(0, 0, 0);
   }
 }
 .root {
-  width: 1280px;
-  height: 720;
+  width: 1920;
+  height: 1080;
   background-color: #334c4c;
 }
 
 .spray-ok {
-  width: 100px;
-  height: 100px;
+  width: 100;
+  height: 100;
   background-color: #00ff00;
 }
 .spray-rotate {
-  width: 10px;
-  height: 100px;
+  width: 10;
+  height: 100;
   background-color: #00ff00;
   animation: rotate 3s linear infinite;
 }
 .spray-move {
-  width: 100px;
-  height: 100px;
+  width: 100;
+  height: 100;
   background-color: #00ff00;
   animation: move-back-force 10s linear infinite;
 }
 .spray-cycle {
-  width: 40px;
-  height: 40px;
+  width: 40;
+  height: 40;
   animation: cycle 3s linear infinite;
 }
 .describe {
-  left: 0px;
-  top: 140px;
-  width: 250px;
-  height: 200px;
+  left: 0;
+  top: 140;
+  width: 250;
+  height: 200;
   color: #ffffff;
-  font-size: 20px;
+  font-size: 20;
 }
 </style>

package/SpriteImage/App.vue

@@ -114,8 +114,8 @@ export default {
     <div
       :style="{
         textAlign: 'center',
-        fontSize: '30px',
-        lineHeight: '50px',
+        fontSize: 30,
+        lineHeight: 50,
         color: '#ffffff',
         left: 200,
         top: 100,
@@ -148,8 +148,8 @@ export default {
     <div
       :style="{
         textAlign: 'center',
-        fontSize: '30px',
-        lineHeight: '50px',
+        fontSize: 30,
+        lineHeight: 50,
         color: '#ffffff',
         left: 700,
         top: 100,

package/Swiper/App.vue

@@ -3,13 +3,7 @@
  * @Date: 2023-02-10 14:45:39
  * @Description: file content
 -->
-<!--
- * @Author: ChenChanghua
- * @Date: 2022-01-19 09:57:00
- * @LastEditors: Please set LastEditors
- * @LastEditTime: 2023-02-10 15:42:05
- * @Description: file content
--->
+
 <script setup>
 import { JsvSwiper } from "jsview";
 import { useRouter } from "vue-router";
@@ -67,7 +61,7 @@ const onKeyDown = (ev) => {
         }"
         :autoplayInterval="1000"
         :onChange="onChange"
-        :reverseSwipe="true"
+        :reverseSwipe="false"
         ref="swiper"
       >
         <template #itemView="{ dataIndex }">

package/TextBox/App.vue

@@ -22,7 +22,7 @@ import RenderLeft from "./RenderLeft.vue";
 import RenderRight from "./RenderRight.vue";
 import RenderCenter from "./RenderCenter.vue";
 import RenderOneLine from "./RenderOneLine.vue";
-import { ref, shallowRef } from "vue";
+import { ref } from "vue";
 import { useRouter } from "vue-router";
 
 const router = useRouter();
@@ -80,7 +80,6 @@ const onBlur = () => {
       onBlur: onBlur,
     }"
   >
-    <div :style="{width:1280, height:720, backgroundColor:'#000000'}"/>
     <div :style="{ top: offsetY, left: offsetX }">
       <RenderLeft :text="text" :moveCount="moveCount" />
       <RenderRight :text="text" />

package/TextBox/RenderCenter.vue

@@ -17,9 +17,9 @@ export default {
         top: -50,
         width: 400,
         height: 50,
-        fontSize: '20px',
+        fontSize: 20,
         textAlign: 'left',
-        lineHeight: '50px',
+        lineHeight: 50,
         backgroundColor: '#00ff00',
       }"
     >
@@ -33,9 +33,9 @@ export default {
         width: 400,
         height: 300,
         backgroundColor: 'rgba(255,255,0,0.5)',
-        fontSize: '30px',
+        fontSize: 30,
         textAlign: 'center',
-        lineHeight: '40px',
+        lineHeight: 40,
       }"
     >
       {{ `[TC]${text}` }}
@@ -46,9 +46,9 @@ export default {
         top: -50,
         width: 400,
         height: 50,
-        fontSize: '20px',
+        fontSize: 20,
         textAlign: 'left',
-        lineHeight: '50px',
+        lineHeight: 50,
         backgroundColor: '#00ff00',
       }"
     >
@@ -62,9 +62,9 @@ export default {
         width: 400,
         height: 300,
         backgroundColor: 'rgba(255,255,0,0.5)',
-        fontSize: '30px',
+        fontSize: 30,
         textAlign: 'center',
-        lineHeight: '40px',
+        lineHeight: 40,
       }"
       :enableLatex="true"
     >
@@ -76,9 +76,9 @@ export default {
         top: -50,
         width: 400,
         height: 50,
-        fontSize: '20px',
+        fontSize: 20,
         textAlign: 'left',
-        lineHeight: '50px',
+        lineHeight: 50,
         backgroundColor: '#00ff00',
       }"
     >
@@ -92,9 +92,9 @@ export default {
         width: 400,
         height: 300,
         backgroundColor: 'rgba(255,255,0,0.5)',
-        fontSize: '30px',
+        fontSize: 30,
         textAlign: 'center',
-        lineHeight: '40px',
+        lineHeight: 40,
       }"
     >
       {{ `[BC]${text}` }}
@@ -106,9 +106,9 @@ export default {
         top: -50,
         width: 500,
         height: 50,
-        fontSize: '20px',
+        fontSize: 20,
         textAlign: 'left',
-        lineHeight: '50px',
+        lineHeight: 50,
         backgroundColor: '#00ff00',
       }"
     >
@@ -122,9 +122,9 @@ export default {
         width: 500,
         height: 300,
         backgroundColor: 'rgba(255,255,0,0.5)',
-        fontSize: '30px',
+        fontSize: 30,
         textAlign: 'center',
-        lineHeight: '80px',
+        lineHeight: 80,
       }"
     >
       {{ `[MC]${text}` }}

package/TextBox/RenderLeft.vue

@@ -17,9 +17,9 @@ export default {
         top: -50,
         width: 400,
         height: 50,
-        fontSize: '20px',
+        fontSize: 20,
         textAlign: 'left',
-        lineHeight: '50px',
+        lineHeight: 50,
         backgroundColor: '#00ff00',
       }"
     >
@@ -33,9 +33,9 @@ export default {
         width: 400,
         height: 300,
         backgroundColor: 'rgba(255,255,0,0.5)',
-        fontSize: '30px',
+        fontSize: 30,
         textAlign: 'left',
-        lineHeight: '40px',
+        lineHeight: 40,
       }"
     >
       {{ `测试文字变化能引起刷新: [${moveCount}]\n[TL]${text}` }}
@@ -46,9 +46,9 @@ export default {
         top: -50,
         width: 400,
         height: 50,
-        fontSize: '20px',
+        fontSize: 20,
         textAlign: 'left',
-        lineHeight: '50px',
+        lineHeight: 50,
         backgroundColor: '#00ff00',
       }"
     >
@@ -62,9 +62,9 @@ export default {
         width: 400,
         height: 300,
         backgroundColor: 'rgba(255,255,0,0.5)',
-        fontSize: '30px',
+        fontSize: 30,
         textAlign: 'left',
-        lineHeight: '40px',
+        lineHeight: 40,
       }"
     >
       {{ `[ML]${text}` }}
@@ -75,9 +75,9 @@ export default {
         top: -50,
         width: 400,
         height: 50,
-        fontSize: '20px',
+        fontSize: 20,
         textAlign: 'left',
-        lineHeight: '50px',
+        lineHeight: 50,
         backgroundColor: '#00ff00',
       }"
     >
@@ -91,9 +91,9 @@ export default {
         width: 400,
         height: 300,
         backgroundColor: 'rgba(255,255,0,0.5)',
-        fontSize: '30px',
+        fontSize: 30,
         textAlign: 'left',
-        lineHeight: '40px',
+        lineHeight: 40,
       }"
     >
       {{ `[BL]${text}` }}
@@ -104,9 +104,9 @@ export default {
         top: -50,
         width: 500,
         height: 50,
-        fontSize: '20px',
+        fontSize: 20,
         textAlign: 'left',
-        lineHeight: '50px',
+        lineHeight: 50,
         backgroundColor: '#00ff00',
       }"
     >
@@ -120,9 +120,9 @@ export default {
         width: 500,
         height: 300,
         backgroundColor: 'rgba(255,255,0,0.5)',
-        fontSize: '30px',
+        fontSize: 30,
         textAlign: 'left',
-        lineHeight: '80px',
+        lineHeight: 80,
       }"
       className="test"
     >