@shijiu/jsview-vue-samples 1.9.887 → 1.9.915

package/TextBox/RenderOneLine.vue

@@ -16,9 +16,9 @@ export default {
         top: -50,
         width: 400,
         height: 50,
-        fontSize: '20px',
+        fontSize: 20,
         textAlign: 'left',
-        lineHeight: '50px',
+        lineHeight: 50,
         backgroundColor: '#00ff00',
       }"
     >
@@ -32,9 +32,9 @@ export default {
         width: 400,
         height: 80,
         backgroundColor: 'rgba(255,255,0,0.5)',
-        fontSize: '30px',
+        fontSize: 30,
         textAlign: 'left',
-        lineHeight: '80px',
+        lineHeight: 80,
       }"
     >
       {{ text }}
@@ -45,9 +45,9 @@ export default {
         top: -50,
         width: 400,
         height: 50,
-        fontSize: '20px',
+        fontSize: 20,
         textAlign: 'left',
-        lineHeight: '50px',
+        lineHeight: 50,
         backgroundColor: '#00ff00',
       }"
     >
@@ -61,9 +61,9 @@ export default {
         width: 400,
         height: 80,
         backgroundColor: 'rgba(255,255,0,0.5)',
-        fontSize: '30px',
+        fontSize: 30,
         textAlign: 'center',
-        lineHeight: '80px',
+        lineHeight: 80,
       }"
     >
       {{ text }}
@@ -74,9 +74,9 @@ export default {
         top: -50,
         width: 400,
         height: 50,
-        fontSize: '20px',
+        fontSize: 20,
         textAlign: 'left',
-        lineHeight: '50px',
+        lineHeight: 50,
         backgroundColor: '#00ff00',
       }"
     >
@@ -90,9 +90,9 @@ export default {
         width: 400,
         height: 80,
         backgroundColor: 'rgba(255,255,0,0.5)',
-        fontSize: '30px',
+        fontSize: 30,
         textAlign: 'right',
-        lineHeight: '80px',
+        lineHeight: 80,
       }"
     >
       {{ text }}

package/TextBox/RenderRight.vue

@@ -16,9 +16,9 @@ export default {
         top: -50,
         width: 400,
         height: 50,
-        fontSize: '20px',
+        fontSize: 20,
         textAlign: 'left',
-        lineHeight: '50px',
+        lineHeight: 50,
         backgroundColor: '#00ff00',
       }"
     >
@@ -32,9 +32,9 @@ export default {
         width: 400,
         height: 300,
         backgroundColor: 'rgba(255,255,0,0.5)',
-        fontSize: '30px',
+        fontSize: 30,
         textAlign: 'right',
-        lineHeight: '40px',
+        lineHeight: 40,
       }"
     >
       {{ `[TR]${text}` }}
@@ -45,9 +45,9 @@ export default {
         top: -50,
         width: 400,
         height: 50,
-        fontSize: '20px',
+        fontSize: 20,
         textAlign: 'left',
-        lineHeight: '50px',
+        lineHeight: 50,
         backgroundColor: '#00ff00',
       }"
     >
@@ -61,9 +61,9 @@ export default {
         width: 400,
         height: 300,
         backgroundColor: 'rgba(255,255,0,0.5)',
-        fontSize: '30px',
+        fontSize: 30,
         textAlign: 'right',
-        lineHeight: '40px',
+        lineHeight: 40,
       }"
     >
       {{ `[MR]${text}` }}
@@ -74,9 +74,9 @@ export default {
         top: -50,
         width: 400,
         height: 50,
-        fontSize: '20px',
+        fontSize: 20,
         textAlign: 'left',
-        lineHeight: '50px',
+        lineHeight: 50,
         backgroundColor: '#00ff00',
       }"
     >
@@ -90,9 +90,9 @@ export default {
         width: 400,
         height: 300,
         backgroundColor: 'rgba(255,255,0,0.5)',
-        fontSize: '30px',
+        fontSize: 30,
         textAlign: 'right',
-        lineHeight: '40px',
+        lineHeight: 40,
       }"
     >
       {{ `[BR]${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: 'right',
-        lineHeight: '80px',
+        lineHeight: 80,
       }"
     >
       {{ `[BR]${text}` }}

package/TextShadowDemo/App.vue

@@ -62,9 +62,9 @@ export default {
           :style="{
             width: 320,
             height: 50,
-            fontSize: '25px',
+            fontSize: 25,
             textAlign: 'center',
-            lineHeight: '50px',
+            lineHeight: 50,
             backgroundColor: item.id % 2 == 0 ? '#00ff00' : '#0000ff',
           }"
         >
@@ -78,9 +78,9 @@ export default {
             height: 70,
             textShadow: item.textShadow,
             backgroundColor: item.id % 2 == 0 ? '#ffffee' : '#ffff10',
-            fontSize: '35px',
+            fontSize: 35,
             textAlign: 'center',
-            lineHeight: '40px',
+            lineHeight: 40,
           }"
         >
           文字阴影

package/TextureAnimation/App.vue

@@ -27,7 +27,7 @@ export default {
     return {
       styleShell,
       img,
-      borderRadius: "40px",
+      borderRadius: 40,
       repeat: -1,
       duration: 3000,
       translateAnim,
@@ -94,7 +94,6 @@ export default {
         }"
       />
       <jsv-texture-anim
-        ref="textureAnim1"
         :src="img"
         :width="300"
         :height="150"
@@ -132,7 +131,6 @@ export default {
         }"
       />
       <jsv-texture-anim
-        ref="textureAnim1"
         :src="img"
         :width="300"
         :height="150"
@@ -168,7 +166,6 @@ export default {
         }"
       />
       <jsv-texture-anim
-        ref="textureAnim1"
         :src="img"
         :width="300"
         :height="150"
@@ -204,15 +201,11 @@ export default {
         }"
       />
       <jsv-texture-anim
-        ref="textureAnim1"
         :src="img"
         :width="300"
         :height="150"
-        :duration="duration"
         :transform="translateTransform"
         :borderRadius="borderRadius"
-        :repeat="repeat"
-        :autoStart="true"
       ></jsv-texture-anim>
       <div
         :style="{
@@ -238,15 +231,11 @@ export default {
         }"
       />
       <jsv-texture-anim
-        ref="textureAnim1"
         :src="img"
         :width="300"
         :height="150"
-        :duration="duration"
         :transform="rotateTransform"
         :borderRadius="borderRadius"
-        :repeat="repeat"
-        :autoStart="true"
       ></jsv-texture-anim>
       <div
         :style="{
@@ -272,15 +261,11 @@ export default {
         }"
       />
       <jsv-texture-anim
-        ref="textureAnim1"
         :src="img"
         :width="300"
         :height="150"
-        :duration="duration"
         :transform="scaleTransform"
         :borderRadius="borderRadius"
-        :repeat="repeat"
-        :autoStart="true"
       ></jsv-texture-anim>
       <div
         :style="{
@@ -306,7 +291,6 @@ export default {
         }"
       />
       <jsv-texture-anim
-        ref="textureAnim1"
         :src="swipLight"
         :animation="swipAnim"
         :width="300"

package/TextureAnimation/App2.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, shallowRef, reactive } from "vue";
+import { ref, reactive } from "vue";
 import { useRouter } from "vue-router";
 import {
   jJsvRuntimeBridge,
@@ -65,8 +65,8 @@ const onKeyDown = (ev) => {
     <div
       :style="{
         textAlign: 'center',
-        fontSize: '30px',
-        lineHeight: '50px',
+        fontSize: 30,
+        lineHeight: 50,
         color: '#ffffff',
         left: 140,
         top: 20,

package/TextureSize/App.vue

@@ -42,7 +42,7 @@ const onKeyDown = (ev) => {
           <img
             alt=""
             class="graphSize top250"
-            jsvImgScaledownTex
+            data-jsv-img-scaledown-tex
             :src="bmpDemo"
           />
           <div class="underFont">
@@ -55,7 +55,7 @@ const onKeyDown = (ev) => {
           <img
             alt=""
             class="graphSize top250"
-            jsvImgScaledownTex
+            data-jsv-img-scaledown-tex
             :src="jpegDemo"
           />
           <div class="underFont">
@@ -67,9 +67,9 @@ const onKeyDown = (ev) => {
           <img alt="" class="graphSize top0" :src="pngDemo" />
           <img
             alt=""
-            :src="pngDemo"
             class="graphSize top250"
-            jsvImgScaledownTex
+            data-jsv-img-scaledown-tex
+            :src="pngDemo"
           />
           <div class="underFont">
             {{ `png有透明图片\n指定尺寸有明显锯齿` }}
@@ -82,7 +82,7 @@ const onKeyDown = (ev) => {
             alt=""
             :src="pngNoAlphaDemo"
             class="graphSize top250"
-            jsvImgScaledownTex
+            data-jsv-img-scaledown-tex
           />
           <div class="underFont">
             {{ `png无透明图片` }}
@@ -107,7 +107,7 @@ const onKeyDown = (ev) => {
   width: 210;
   height: 200;
   color: #ffffff;
-  font-size: 30px;
+  font-size: 30;
 }
 .top0 {
   top: 0;
@@ -119,7 +119,7 @@ const onKeyDown = (ev) => {
   left: 0;
   width: 200;
   height: 200;
-  border-radius: 15px 15px 15px 15px;
+  border-radius: 15 15 15 15;
 }
 .underFont {
   left: 0;
@@ -127,6 +127,6 @@ const onKeyDown = (ev) => {
   width: 200;
   height: 200;
   color: #ffffff;
-  font-size: 20px;
+  font-size: 20;
 }
 </style>

package/ThrowMoveDemo/AccelerateDemo.vue

@@ -95,9 +95,9 @@ export default {
 
 <style scoped>
 .font {
-  font-size: 32px;
+  font-size: 32;
   color: #73665c;
-  line-height: 40px;
+  line-height: 40;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -105,9 +105,9 @@ export default {
 }
 
 .detail-font {
-  font-size: 32px;
+  font-size: 32;
   color: #f7f7eb;
-  line-height: 30px;
+  line-height: 30;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;

package/ThrowMoveDemo/LRParabolicDemo.vue

@@ -80,9 +80,9 @@ function onKeyDown(ev) {
 
 <style scoped>
 .font {
-  font-size: 32px;
+  font-size: 32;
   color: #73665c;
-  line-height: 40px;
+  line-height: 40;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -90,9 +90,9 @@ function onKeyDown(ev) {
 }
 
 .detail-font {
-  font-size: 32px;
+  font-size: 32;
   color: #f7f7eb;
-  line-height: 30px;
+  line-height: 30;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;

package/ThrowMoveDemo/TargetDemo.vue

@@ -95,9 +95,9 @@ export default {
 
 <style scoped>
 .font {
-  font-size: 32px;
+  font-size: 32;
   color: #73665c;
-  line-height: 40px;
+  line-height: 40;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -105,9 +105,9 @@ export default {
 }
 
 .detail-font {
-  font-size: 32px;
+  font-size: 32;
   color: #f7f7eb;
-  line-height: 30px;
+  line-height: 30;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;

package/ThrowMoveDemo/UDParabolicDemo.vue

@@ -100,9 +100,9 @@ export default {
 
 <style scoped>
 .font {
-  font-size: 32px;
+  font-size: 32;
   color: #73665c;
-  line-height: 40px;
+  line-height: 40;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -110,9 +110,9 @@ export default {
 }
 
 .detail-font {
-  font-size: 32px;
+  font-size: 32;
   color: #f7f7eb;
-  line-height: 30px;
+  line-height: 30;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;

package/TouchSample/App.vue

@@ -101,7 +101,7 @@ export default {
         height: 50,
         backgroundColor: '#ff0000',
         fontSize: 18,
-        lineHeight: '50px',
+        lineHeight: 50,
       }"
       :onClick="
         () => {
@@ -120,7 +120,7 @@ export default {
         width: 400,
         height: 50,
         fontSize: 30,
-        lineHeight: '50px',
+        lineHeight: 50,
         color: '#f0ef29',
       }"
     >

package/TouchSample/Item.vue

@@ -92,12 +92,12 @@ export default {
 .focus {
   transform: scale3d(1, 1, 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>

package/TouchSample/MetroWidgetHorizontal.vue

@@ -10,7 +10,7 @@ import {
 import Item from "./Item.vue";
 
 import { metroWidgetH, measures } from "./data.js";
-import { ref, shallowRef } from "vue";
+import { ref } from "vue";
 
 export default {
   components: {
@@ -58,7 +58,7 @@ export default {
           width: 200,
           height: 40,
           fontSize: 25,
-          lineHeight: '40px',
+          lineHeight: 40,
           color: '#fff753',
         }"
       >
@@ -98,7 +98,7 @@ export default {
           width: 200,
           height: 40,
           fontSize: 25,
-          lineHeight: '40px',
+          lineHeight: 40,
           color: '#fff753',
         }"
       >

package/TouchSample/MetroWidgetVertical.vue

@@ -10,7 +10,7 @@ import {
 import Item from "./Item.vue";
 
 import { metroWidgetV, measures } from "./data.js";
-import { ref, shallowRef } from "vue";
+import { ref } from "vue";
 
 export default {
   components: {
@@ -58,7 +58,7 @@ export default {
           width: 200,
           height: 40,
           fontSize: 25,
-          lineHeight: '40px',
+          lineHeight: 40,
           color: '#fff753',
         }"
       >
@@ -98,7 +98,7 @@ export default {
           width: 200,
           height: 40,
           fontSize: 25,
-          lineHeight: '40px',
+          lineHeight: 40,
           color: '#fff753',
         }"
       >

package/TouchSample/TouchContainerHorizontal.vue

@@ -56,7 +56,7 @@ export default {
           width: 400,
           height: 30,
           fontSize: 18,
-          lineHeight: '30px',
+          lineHeight: 30,
           color: '#f0ef29',
         }"
       >
@@ -110,7 +110,7 @@ export default {
           width: 400,
           height: 40,
           fontSize: 18,
-          lineHeight: '40px',
+          lineHeight: 40,
           color: '#f0ef29',
         }"
       >

package/TouchSample/TouchContainerVertical.vue

@@ -56,7 +56,7 @@ export default {
           width: 400,
           height: 40,
           fontSize: 25,
-          lineHeight: '40px',
+          lineHeight: 40,
           color: '#f0ef29',
         }"
       >
@@ -110,7 +110,7 @@ export default {
           width: 400,
           height: 40,
           fontSize: 25,
-          lineHeight: '40px',
+          lineHeight: 40,
           color: '#f0ef29',
         }"
       >

package/TransitPage/App.vue

@@ -2,7 +2,7 @@
 import DemoApp from "../DemoHomepage/App.vue";
 import ActivityApp from "../MetroWidgetDemos/PerformanceTest/App.vue"; // TODO
 import { jJsvRuntimeBridge } from "jsview";
-import { ref, shallowRef, onMounted } from "vue";
+import { ref, onMounted } from "vue";
 
 const getShowMode = () => {
   let showMode = 0;

package/VideoDemo/App.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { provide, reactive, ref, shallowRef, watch } from "vue";
+import { provide, reactive, ref, shallowRef,  watch } from "vue";
 import Controllor from "./components/Controllor.vue";
 import VideoFrame from "./components/VideoFrame.vue";
 
@@ -78,8 +78,8 @@ watch(useTexture, () => {
 <style scoped>
 .caption {
   text-align: left;
-  font-size: 24px;
-  line-height: 30px;
+  font-size: 24;
+  line-height: 30;
   color: #ffffff;
   left: 10;
   top: 10;
@@ -90,7 +90,7 @@ watch(useTexture, () => {
 
 .text {
   color: #ff0000;
-  font-size: 24px;
+  font-size: 24;
   top: 550;
   width: 60;
   height: 40;

package/VideoDemo/components/Button.vue

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

package/VideoDemo/components/Controllor.vue

@@ -145,7 +145,7 @@ const onKeyDown = (ev) => {
   }
   if (changeFocusTo >= 0) {
     ev.ownerNode
-      .findBlockByName("controllor.video-" + (changeFocusTo + 10).toString())
+      .findBlockByName("video-" + (changeFocusTo + 10).toString())
       .requestFocus();
     focusedItemIndex = changeFocusTo;
     return true;
@@ -173,7 +173,7 @@ enableAnimation.value = false;
 
 <template>
   <div :style="style" :key="useTexture" :set="(leftOffset = 0)">
-    <jsv-focus-block namespace="controllor" :onKeyDown="onKeyDown">
+    <jsv-focus-block :onKeyDown="onKeyDown">
       <Button
         v-for="(item, index) in getButtonData()"
         :key="index"

package/VideoDemo/components/VideoFrame.vue

@@ -104,7 +104,7 @@ onMounted(() => {
         objectFit: objectFit,
         animation:
           useTexture && enableAnimation ? 'offscreenAnim 3s infinite' : null,
-        borderRadius: '80px 80px 160px 240px',
+        borderRadius: '80 80 160 240',
       }"
       :onCanPlay="onEvent"
       :onCanPlayThrough="onEvent"