@shijiu/jsview-vue 0.9.631 → 1.9.628

package/samples/Basic/components/anim/AnimGroup.vue

@@ -1,9 +1,9 @@
 <script setup>
 import { reactive, onMounted, onBeforeUnmount } from "vue";
-import ContentBlock from "../ContentBlock";
-import AnimKeyframeBasic from "./AnimKeyframeBasic";
-import AnimKeyframeComposite from "./AnimKeyframeComposite";
-import AnimTransition from "./AnimTransition";
+import ContentBlock from "../ContentBlock.vue";
+import AnimKeyframeBasic from "./AnimKeyframeBasic.vue";
+import AnimKeyframeComposite from "./AnimKeyframeComposite.vue";
+import AnimTransition from "./AnimTransition.vue";
 
 const props = defineProps({
   contentClass: String,

package/samples/Basic/components/div/DivGroup1.vue

@@ -1,8 +1,8 @@
 <script setup>
-import ContentBlock from "../ContentBlock";
-import DivBackground from "./DivBackground";
-import DivClip from "./DivClip";
-import DivLayout from "./DivLayout";
+import ContentBlock from "../ContentBlock.vue";
+import DivBackground from "./DivBackground.vue";
+import DivClip from "./DivClip.vue";
+import DivLayout from "./DivLayout.vue";
 
 const props = defineProps({
   contentClass: String,

package/samples/Basic/components/div/DivGroup2.vue

@@ -1,9 +1,9 @@
 <script setup>
-import ContentBlock from "../ContentBlock";
-import DivCssScoped from "./DivCssScoped";
-import DivCssVar from "./DivCssVar";
-import DivRadius from "./DivRadius";
-import DivTransform from "./DivTransform";
+import ContentBlock from "../ContentBlock.vue";
+import DivCssScoped from "./DivCssScoped.vue";
+import DivCssVar from "./DivCssVar.vue";
+import DivRadius from "./DivRadius.vue";
+import DivTransform from "./DivTransform.vue";
 
 const props = defineProps({
   contentClass: String,

package/samples/Basic/components/img/ImageGroup.vue

@@ -7,8 +7,8 @@
 </template>
 
 <script>
-import ContentBlock from '../ContentBlock';
-import ImgLayout from './ImgLayout';
+import ContentBlock from '../ContentBlock.vue';
+import ImgLayout from './ImgLayout.vue';
 
 export default {
     props: {

package/samples/Basic/components/panel/Panel1.vue

@@ -1,10 +1,10 @@
 <script setup>
-import TitleBar from "./TitleBar";
-import DivGroup1 from "../div/DivGroup1";
-import DivGroup2 from "../div/DivGroup2";
-import TextGroup1 from "../text/TextGroup1";
-import TextGroup2 from "../text/TextGroup2";
-import AnimGroup from "../anim/AnimGroup";
+import TitleBar from "./TitleBar.vue";
+import DivGroup1 from "../div/DivGroup1.vue";
+import DivGroup2 from "../div/DivGroup2.vue";
+import TextGroup1 from "../text/TextGroup1.vue";
+import TextGroup2 from "../text/TextGroup2.vue";
+import AnimGroup from "../anim/AnimGroup.vue";
 
 const props = defineProps({
   panelClass: String,

package/samples/Basic/components/panel/Panel2.vue

@@ -1,6 +1,6 @@
 <script setup>
-import TitleBar from "./TitleBar";
-import ImageGroup from "../img/ImageGroup";
+import TitleBar from "./TitleBar.vue";
+import ImageGroup from "../img/ImageGroup.vue";
 
 const props = defineProps({
   panelClass: String,

package/samples/Basic/components/text/TextGroup1.vue

@@ -1,8 +1,8 @@
 <script setup>
-import ContentBlock from "../ContentBlock";
-import TextAlign from "./TextAlign";
-import TextFontStyle from "./TextFontStyle";
-import TextOverflow from "./TextOverflow";
+import ContentBlock from "../ContentBlock.vue";
+import TextAlign from "./TextAlign.vue";
+import TextFontStyle from "./TextFontStyle.vue";
+import TextOverflow from "./TextOverflow.vue";
 
 const props = defineProps({
   contentClass: String,

package/samples/Basic/components/text/TextGroup2.vue

@@ -1,6 +1,6 @@
 <script setup>
-import ContentBlock from "../ContentBlock";
-import TextEmoji from "./TextEmoji";
+import ContentBlock from "../ContentBlock.vue";
+import TextEmoji from "./TextEmoji.vue";
 
 const props = defineProps({
   contentClass: String,

package/samples/Basic/components/text/TextOverflow.vue

@@ -77,7 +77,7 @@ const multiLine =
         top: (blockSize.height + gap) * 4,
         height: 65,
         whiteSpace: 'pre-wrap',
-        textOverflow: 'clip',
+        textOverflow: 'ellipsis',
         overflow: 'hidden',
       }"
     >
@@ -91,7 +91,7 @@ const multiLine =
         top: (blockSize.height + gap) * 4 + 67,
         height: 65,
         whiteSpace: 'pre-wrap',
-        textOverflow: 'ellipsis',
+        textOverflow: 'clip',
         overflow: 'hidden',
       }"
     >

package/samples/DemoHomepage/App.vue

@@ -6,7 +6,7 @@
  * @Description: file content
 -->
 <script>
-import { router } from "./router.js";
+import { router } from "./router";
 import { jJsvRuntimeBridge } from "jsview";
 
 export default {

package/samples/DemoHomepage/components/BodyFrame.vue

@@ -12,7 +12,6 @@ export default {
     data: Array,
     name: String,
     onEdge: Function,
-    tabId: Number,
   },
   setup() {
     return {
@@ -37,7 +36,6 @@ export default {
       }
       this.$router.push(data.path);
       localStorage.curFocusId = index;
-      localStorage.curTab = this.tabId;
     },
     _provideData() {
       return this.data;

package/samples/DemoHomepage/router.js

@@ -1,190 +1,175 @@
 import { createRouter } from "vue-router";
-import { createJsvHashHistory } from "jsview";
+import { jsvCreateHashHistory } from "jsview";
 
 const routeList = [
   // 功能实例
   {
     name: "Home",
     path: "/",
-    component: () => import("./views/Homepage"),
+    component: () => import("./views/Homepage.vue"),
   },
   {
     name: "基础示例合集",
     path: "/feature/Basic",
-    component: () => import("jsview/samples/Basic/App"),
+    component: () => import("jsview/samples/Basic/App.vue"),
   },
   {
     name: "可视化变化通知",
     path: "/feature/VisibleSensorDemo",
-    component: () => import("jsview/samples/VisibleSensorDemo/App"),
+    component: () => import("jsview/samples/VisibleSensorDemo/App.vue"),
   },
   {
     name: "快速刷新的表格布局组件",
     path: "/feature/GridDemo",
-    component: () => import("jsview/samples/GridDemo/App"),
+    component: () => import("jsview/samples/GridDemo/App.vue"),
   },
   {
     name: ".9图焦点框漂移",
     path: "/feature/NinePatchDemo",
-    component: () => import("jsview/samples/NinePatchDemo/App"),
+    component: () => import("jsview/samples/NinePatchDemo/App.vue"),
   },
   {
     name: "视频",
     path: "/feature/VideoDemo",
-    component: () => import("jsview/samples/VideoDemo/App"),
+    component: () => import("jsview/samples/VideoDemo/App.vue"),
   },
   {
     name: "焦点切换demo",
     path: "/feature/BasicFocusControl",
-    component: () => import("jsview/samples/BasicFocusControl/App"),
+    component: () => import("jsview/samples/BasicFocusControl/App.vue"),
   },
   {
     name: "Hash方式路由切换",
     path: "/feature/HashHistory",
     props: { routePath: "/feature/HashHistory" },
-    component: () => import("jsview/samples/HashHistory/App"),
+    component: () => import("jsview/samples/HashHistory/App.vue"),
   },
   {
     name: "翻牌游戏",
     path: "/feature/FlipCard",
-    component: () => import("jsview/samples/FlipCard/App"),
+    component: () => import("jsview/samples/FlipCard/App.vue"),
   },
   {
     name: "设置颜色空间",
     path: "/feature/ColorSpace",
-    component: () => import("jsview/samples/ColorSpace/App"),
+    component: () => import("jsview/samples/ColorSpace/App.vue"),
   },
   {
     name: "制定Texture尺寸",
     path: "/feature/TextureSize",
-    component: () => import("jsview/samples/TextureSize/App"),
+    component: () => import("jsview/samples/TextureSize/App.vue"),
   },
   {
     name: "动图",
     path: "/feature/AnimPicture",
-    component: () => import("jsview/samples/AnimPicture/App"),
+    component: () => import("jsview/samples/AnimPicture/App.vue"),
   },
   {
     name: "粒子效果",
     path: "/feature/SprayView",
-    component: () => import("jsview/samples/SprayView/App"),
+    component: () => import("jsview/samples/SprayView/App.vue"),
   },
   {
     name: "长文字",
     path: "/feature/LongText",
-    component: () => import("jsview/samples/LongText/App"),
+    component: () => import("jsview/samples/LongText/App.vue"),
   },
   {
     name: "长图片",
     path: "/feature/LongImage",
-    component: () => import("jsview/samples/LongImage/App"),
+    component: () => import("jsview/samples/LongImage/App.vue"),
   },
   {
     name: "二维码",
     path: "/feature/QrcodeDemo",
-    component: () => import("jsview/samples/QrcodeDemo/App"),
+    component: () => import("jsview/samples/QrcodeDemo/App.vue"),
   },
   {
     name: "文字阴影",
     path: "/feature/TextShadowDemo",
-    component: () => import("jsview/samples/TextShadowDemo/App"),
+    component: () => import("jsview/samples/TextShadowDemo/App.vue"),
   },
   {
     name: "多行文字区域内对齐",
     path: "/feature/TextBox",
-    component: () => import("jsview/samples/TextBox/App"),
+    component: () => import("jsview/samples/TextBox/App.vue"),
   },
   {
     name: "抛物运动写法样例",
     path: "/feature/ThrowMoveDemo",
-    component: () => import("jsview/samples/ThrowMoveDemo/App"),
+    component: () => import("jsview/samples/ThrowMoveDemo/App.vue"),
   },
   {
     name: "精灵图",
     path: "/feature/SpriteImage",
-    component: () => import("jsview/samples/SpriteImage/App"),
+    component: () => import("jsview/samples/SpriteImage/App.vue"),
   },
   {
     name: "文字滚动(标题跑马灯)",
     path: "/feature/Marquee",
-    component: () => import("jsview/samples/Marquee/App"),
+    component: () => import("jsview/samples/Marquee/App.vue"),
   },
   {
     name: "文字输入",
     path: "/feature/Input",
-    component: () => import("jsview/samples/Input/App"),
+    component: () => import("jsview/samples/Input/App.vue"),
   },
   {
     name: "拼图demo",
     path: "/feature/MaskClip",
-    component: () => import("jsview/samples/MaskClip/App"),
+    component: () => import("jsview/samples/MaskClip/App.vue"),
   },
   {
     name: "SoundPool",
     path: "/feature/SoundPool",
-    component: () => import("jsview/samples/SoundPool/App"),
+    component: () => import("jsview/samples/SoundPool/App.vue"),
   },
   {
     name: "TextureAnimation",
     path: "/feature/TextureAnimation",
-    component: () => import("jsview/samples/TextureAnimation/App"),
+    component: () => import("jsview/samples/TextureAnimation/App.vue"),
   },
   {
-    name: "焦点框旋转光效果",
+    name: "TextureAnimation2",
     path: "/feature/TextureAnimation2",
-    component: () => import("jsview/samples/TextureAnimation/App2"),
+    component: () => import("jsview/samples/TextureAnimation/App2.vue"),
   },
   {
     name: "公祭日黑白效果",
     path: "/feature/GrayDown",
-    component: () => import("jsview/samples/FilterDemo/App"),
-  },
-  {
-    name: "预加载",
-    path: "/feature/Preload",
-    component: () => import("jsview/samples/Preload/App"),
-  },
-  // {
-  //   name: "碰撞检测",
-  //   path: "/feature/Collision",
-  //   component: () => import("jsview/samples/Collision/App"),
-  // },
-  // {
-  //   name: "碰撞即停",
-  //   path: "/feature/ImpactStop",
-  //   component: () => import("jsview/samples/ImpactStop/App"),
-  // },
+    component: () => import("jsview/samples/FilterDemo/App.vue"),
+  },
 
   // MetroWidget示例
   {
     name: "简单示例",
     path: "/metroWidget/Simple",
-    component: () => import("jsview/samples/MetroWidgetDemos/Simple/App"),
+    component: () => import("jsview/samples/MetroWidgetDemos/Simple/App.vue"),
   },
   {
     name: "嵌套示例",
     path: "/metroWidget/Advanced",
-    component: () => import("jsview/samples/MetroWidgetDemos/Advanced/App"),
+    component: () => import("jsview/samples/MetroWidgetDemos/Advanced/App.vue"),
   },
   {
     name: "性能测试",
     path: "/metroWidget/PerformanceTest",
     component: () =>
-      import("jsview/samples/MetroWidgetDemos/PerformanceTest/App"),
+      import("jsview/samples/MetroWidgetDemos/PerformanceTest/App.vue"),
   },
   {
     name: "乒乓模式",
     path: "/metroWidget/PingPong",
     component: () =>
-      import("jsview/samples/MetroWidgetDemos/PingPong/App"),
+      import("jsview/samples/MetroWidgetDemos/PingPong/App.vue"),
   },
 ];
 
 const router = createRouter({
-  // 浏览器调试和盒子上都可以使用类WebHashHistory的createJsvHashHistory(推荐)
+  // 浏览器调试和盒子上都可以使用类WebHashHistory的jsvCreateHashHistory(推荐)
   // 或 createMemoryHistory;
   // createWebHashHistory只能用于浏览器调试，盒子不支持
-  history: createJsvHashHistory(),
+  history: jsvCreateHashHistory(),
   routes: routeList,
 });
 

package/samples/DemoHomepage/views/Homepage.vue

@@ -89,12 +89,15 @@ export default {
       }
     },
     tabItemFocus(data) {
+      console.log("cchtest tabItemFocus");
       if (data.id != this.tabId) {
         this.tabId = data.id;
         this.contentData = dataList[this.tabId];
+        localStorage.curTab = this.tabId;
       }
     },
     onDialogAction(msg) {
+      console.log("cchtes dialog onaction", msg);
       this.showExitDialog = false;
       this.changeFocus(this.preFocusName);
       switch (msg) {
@@ -118,8 +121,10 @@ export default {
     localStorage.curTab = 0;
     this.contentData = dataList[this.tabId];
   },
-  mounted() {},
-  beforeUnmount() {},
+  mounted() {
+  },
+  beforeUnmount() {
+  },
 };
 </script>
 
@@ -157,7 +162,6 @@ export default {
           :data="contentData"
           :name="name + '/bodyFrame'"
           :onEdge="onContentEdge"
-          :tabId="tabId"
         />
       </div>
 
@@ -172,8 +176,8 @@ export default {
 
 <style scoped>
 .rootSize {
-  width: 1920;
-  height: 1080;
+  width: 1280;
+  height: 720;
   background-color: #334c4c;
 }
 

package/samples/HashHistory/router.js

@@ -1,22 +1,22 @@
 import { createRouter } from "vue-router";
-import { createJsvHashHistory } from "jsview";
+import { jsvCreateHashHistory } from "jsview";
 
 const routeList = [
   // 功能实例
   {
     name: "Home",
     path: "/",
-    redirect: "/__MainJsvApp/MainPage",
+    redirect: "/__MainJsvApp/MainPage.vue",
   },
   {
     name: "MainPage",
     path: "/__MainJsvApp/MainPage",
-    component: () => import("./views/MainPage"),
+    component: () => import("./views/MainPage.vue"),
   },
   {
     name: "SubPageFirst",
     path: "/__MainJsvApp/SubPageFirst",
-    component: () => import("./views/SubPage"),
+    component: () => import("./views/SubPage.vue"),
     props: {
       name: "First",
       jumpTo: "Second",
@@ -25,7 +25,7 @@ const routeList = [
   {
     name: "SubPageSecond",
     path: "/__MainJsvApp/SubPageSecond",
-    component: () => import("./views/SubPage"),
+    component: () => import("./views/SubPage.vue"),
     props: {
       name: "Second",
       jumpTo: "First",
@@ -34,7 +34,7 @@ const routeList = [
 ];
 
 const router = createRouter({
-  history: createJsvHashHistory(),
+  history: jsvCreateHashHistory(),
   routes: routeList,
 });
 

package/samples/Input/App.vue

@@ -2,11 +2,11 @@
  * @Author: ChenChanghua
  * @Date: 2022-01-20 16:09:31
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-09-01 17:34:30
+ * @LastEditTime: 2022-07-08 13:37:44
  * @Description: file content
 -->
 <script>
-import { InputType, EdgeDirection, useFocusHub } from "jsview";
+import { InputType, EdgeDirection } from "jsview";
 import InputPanel from "./InputPanel.vue";
 
 export default {
@@ -17,7 +17,6 @@ export default {
     return {
       name: "/input",
       InputType,
-      focusHub: useFocusHub(),
     };
   },
   methods: {
@@ -28,23 +27,33 @@ export default {
       return true;
     },
     _onFocus() {
-      this.focusHub.setFocus(this.name + "/normal");
+      this.$refs.focusNode
+        .findBlockByName(this.name + "/normal")
+        .requestFocus();
     },
     _panel1OnEdge(edgeInfo) {
       if (edgeInfo.direction == EdgeDirection.right) {
-        this.focusHub.setFocus(this.name + "/password");
+        this.$refs.focusNode
+          .findBlockByName(this.name + "/password")
+          .requestFocus();
       }
     },
     _panel2OnEdge(edgeInfo) {
       if (edgeInfo.direction == EdgeDirection.left) {
-        this.focusHub.setFocus(this.name + "/normal");
+        this.$refs.focusNode
+          .findBlockByName(this.name + "/normal")
+          .requestFocus();
       } else if (edgeInfo.direction == EdgeDirection.right) {
-        this.focusHub.setFocus(this.name + "/number");
+        this.$refs.focusNode
+          .findBlockByName(this.name + "/number")
+          .requestFocus();
       }
     },
     _panel3OnEdge(edgeInfo) {
       if (edgeInfo.direction == EdgeDirection.left) {
-        this.focusHub.setFocus(this.name + "/password");
+        this.$refs.focusNode
+          .findBlockByName(this.name + "/password")
+          .requestFocus();
       }
     },
   },

package/samples/Input/InputPanel.vue

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

package/samples/MetroWidgetDemos/PingPong/App.vue

@@ -2,7 +2,7 @@
  * @Author: ChenChanghua
  * @Date: 2021-12-21 15:36:29
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-09-01 17:08:21
+ * @LastEditTime: 2022-07-12 16:11:32
  * @Description: file content
 -->
 <script>
@@ -20,13 +20,13 @@ for (let i = 0; i < 5; i++) {
     width: 100,
     height: 50,
     marginRight: 10,
-    content: "Tab_" + i,
+    content: "Tab-" + i,
     color: randomColor(),
   });
 
   let data = JSON.parse(JSON.stringify(advanceMetroWidget));
   data.forEach((item) => {
-    item.name = "testPage_" + i + "-" + item.name;
+    item.name = "testPage-" + i + "-" + item.name;
   });
   pageList.push({
     width: 600,