@shijiu/jsview-vue-samples 2.0.1073 → 2.0.1106

package/MetroWidgetDemos/PerformanceTest/components/ContentItem.vue

@@ -13,7 +13,7 @@ import couponMid from "../assets/coupon_mid.png";
 import borderLeft from "../assets/line_left.png";
 import borderMid from "../assets/line_mid.png";
 import borderRight from "../assets/line_right.png";
-import { ref, shallowRef, computed } from "vue";
+import { ref, computed } from "vue";
 
 const props = defineProps({
   data: Object,
@@ -314,29 +314,29 @@ const soldTotalText = computed(() => {
 
 <style scoped>
 .frame-background {
-  width: 213px;
-  height: 337px;
-  border-radius: 10px 10px 10px 10px;
+  width: 213;
+  height: 337;
+  border-radius: 10;
   background-color: #f7f7f4;
   transition: transform 0.2s linear;
 }
 
 .poster-holder {
-  width: 213px;
-  height: 213px;
-  border-radius: 10px 10px 0px 0px;
+  width: 213;
+  height: 213;
+  border-radius: 10 10 0 0;
   background-color: #cfcac6;
 }
 .poster {
-  width: 213px;
-  height: 213px;
-  border-radius: 7px 7px 0px 0px;
+  width: 213;
+  height: 213;
+  border-radius: 7 7 0 0;
 }
 
 .title-font {
-  font-size: 21px;
+  font-size: 21;
   color: #73665c;
-  line-height: 29px;
+  line-height: 29;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -345,42 +345,42 @@ const soldTotalText = computed(() => {
 .title-layout {
   top: 221;
   left: 13;
-  width: 193px;
-  height: 29px;
+  width: 193;
+  height: 29;
 }
 .ticket-text {
   height: 24;
   color: #ffffff;
-  font-size: 16px;
+  font-size: 16;
   text-align: center;
-  line-height: 24px;
+  line-height: 24;
 }
 .sold-text {
-  height: 25px;
+  height: 25;
   color: #ff7a00;
-  font-size: 20px;
+  font-size: 20;
   text-align: center;
-  line-height: 25px;
+  line-height: 25;
 }
 .prize-title-layout {
-  width: 35px;
-  height: 24px;
+  width: 35;
+  height: 24;
   top: 296;
   left: 13;
 }
 .prize-title-font {
   color: #de2825;
   text-align: center;
-  font-size: 17px;
-  line-height: 24px;
+  font-size: 17;
+  line-height: 24;
 }
 .prize-font {
   top: 289;
   left: 53;
   width: 158; /*213 - 55*/
-  height: 37px;
-  line-height: 37px;
-  font-size: 28px;
+  height: 37;
+  line-height: 37;
+  font-size: 28;
   color: #de2825;
 }
 </style>

package/MetroWidgetDemos/PerformanceTest/components/MyTab.vue

@@ -1,97 +1,88 @@
 <!--
  * @Author: ChenChanghua
  * @Date: 2021-09-29 16:13:35
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-12-02 16:14:11
+ * @LastEditors: ZhengYi
+ * @LastEditTime: 2023-05-04 
  * @Description: file content
 -->
-<script>
-import { ref, shallowRef } from "vue";
+<script setup>
+import { computed, shallowRef } from "vue";
 
-export default {
-  props: {
-    name: String,
-    onEdgeDown: Function,
-    onItemFocus: Function,
-  },
-  setup() {
-    let activeId = ref(0);
-    let focused = ref(false);
-    return {
-      activeId,
-      focused,
-    };
-  },
-  computed: {
-    tab1Class() {
-      if (this.activeId == 0) {
-        return this.focused
-          ? "text-active item-focused"
-          : "text-active item-normal";
-      } else {
-        return "text-normal item-normal";
-      }
-    },
-    tab2Class() {
-      if (this.activeId == 1) {
-        return this.focused
-          ? "text-active item-focused"
-          : "text-active item-normal";
-      } else {
-        return "text-normal item-normal";
-      }
-    },
-    tab3Class() {
-      if (this.activeId == 2) {
-        return this.focused
-          ? "text-active item-focused"
-          : "text-active item-normal";
-      } else {
-        return "text-normal item-normal";
+const props = defineProps({
+  name: String,
+  onEdgeDown: Function,
+  onItemFocus: Function,
+})
+
+let activeId = shallowRef(0);
+let focused = shallowRef(false);
+
+const tab1Class = computed(() => {
+  if (activeId.value == 0) {
+    return focused.value
+      ? "text-active item-focused"
+      : "text-active item-normal";
+  } else {
+    return "text-normal item-normal";
+  }
+})
+const tab2Class = computed(() => {
+  if (activeId.value == 1) {
+    return focused.value
+      ? "text-active item-focused"
+      : "text-active item-normal";
+  } else {
+    return "text-normal item-normal";
+  }
+})
+const tab3Class = computed(() => {
+  if (activeId.value == 2) {
+    return focused.value
+      ? "text-active item-focused"
+      : "text-active item-normal";
+  } else {
+    return "text-normal item-normal";
+  }
+})
+
+
+const onKeyDown = (ev) => {
+  switch (ev.keyCode) {
+    case 37:
+      activeId.value--;
+      if (activeId.value < 0) {
+        activeId.value = 2;
       }
-    },
-  },
-  methods: {
-    onKeyDown(ev) {
-      switch (ev.keyCode) {
-        case 37:
-          this.activeId--;
-          if (this.activeId < 0) {
-            this.activeId = 2;
-          }
-          this.onItemFocus(this.activeId);
-          break;
-        case 39:
-          this.activeId++;
-          if (this.activeId > 2) {
-            this.activeId = 0;
-          }
-          this.onItemFocus(this.activeId);
-          break;
-        case 40:
-          this.onEdgeDown();
-          break;
+      props.onItemFocus(activeId.value);
+      break;
+    case 39:
+      activeId.value++;
+      if (activeId.value > 2) {
+        activeId.value = 0;
       }
-    },
-    onFocus() {
-      this.focused = true;
-    },
-    onBlur() {
-      this.focused = false;
-    },
-    getOnAction() {
-      return {
-        onKeyDown: this.onKeyDown,
-        onFocus: this.onFocus,
-        onBlur: this.onBlur,
-      };
-    },
-  },
-};
+      props.onItemFocus(activeId.value);
+      break;
+    case 40:
+      props.onEdgeDown();
+      break;
+  }
+}
+const onFocus = () => {
+  focused.value = true;
+}
+const onBlur = () => {
+  focused.value = false;
+}
+const actionDefines = {
+  onBlur,
+  onFocus,
+  onKeyDown
+}
+
 </script>
 
 <template>
-  <jsv-focus-block :name="name" :onAction="getOnAction()"></jsv-focus-block>
+  <jsv-focus-block :name="props.name" :onAction="actionDefines"></jsv-focus-block>
   <div :class="tab1Class">Tab1</div>
   <div :class="tab2Class" :style="{ left: 220 }">Tab2</div>
   <div :class="tab3Class" :style="{ left: 440 }">Tab3</div>
@@ -99,31 +90,31 @@ export default {
 
 <style scoped>
 .text-normal {
-  width: 200px;
-  height: 50px;
-  line-height: 50px;
+  width: 200;
+  height: 50;
+  line-height: 50;
   color: #444444;
-  font-size: 25px;
+  font-size: 25;
   text-align: center;
 }
 
 .text-active {
-  width: 200px;
-  height: 50px;
-  line-height: 50px;
+  width: 200;
+  height: 50;
+  line-height: 50;
   color: #ffffff;
-  font-size: 25px;
+  font-size: 25;
   text-align: center;
 }
 
 .item-focused {
-  width: 200px;
-  height: 50px;
+  width: 200;
+  height: 50;
   background-color: #008080;
 }
 .item-normal {
-  width: 200px;
-  height: 50px;
+  width: 200;
+  height: 50;
   background-color: #87CECB;
 }
 </style>

package/MetroWidgetDemos/PingPong/App.vue

@@ -1,16 +1,17 @@
 <!--
  * @Author: ChenChanghua
  * @Date: 2021-12-21 15:36:29
- * @LastEditors: Please set LastEditors
- * @LastEditTime: 2023-03-09 16:28:50
+ * @LastEditors: ZhengYi
+ * @LastEditTime: 2023-05-04 
  * @Description: file content
 -->
-<script>
+<script setup>
 import ViewSwiper from "./ViewSwiper.vue";
 import AppTab from "./AppTab.vue";
-import { reactive } from "vue";
+import { reactive, provide, shallowRef } from "vue";
 import { EdgeDirection } from "jsview";
-
+import { useRouter } from "vue-router";
+const router = useRouter();
 const pageList = [];
 const tabData = [];
 
@@ -46,101 +47,67 @@ for (let i = 0; i < 10; ++i) {
     name: "testPage-" + i,
   });
 }
-export default {
-  components: {
-    ViewSwiper,
-    AppTab,
-  },
-  setup() {
-    let globalInfo = reactive({
-      tabId: 0,
-    });
-    return {
-      tabData,
-      appPageName: "/page",
-      appTabName: "/tab",
-      globalInfo,
-      pageList,
-      preFocusName: "/tab",
-      curFocusName: "/tab",
-    };
-  },
-  provide() {
-    return {
-      globalInfo: this.globalInfo,
-    };
-  },
-  methods: {
-    $_app_onFocus() {
-      console.log("App onFocus");
-      this.$refs.focusNode.findBlockByName(this.curFocusName).requestFocus();
-    },
-    onKeyDown(ev) {
-      if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-        this.$router?.go(-1);
-      }
-      return true;
-    },
-    $_app_pageOnEdge(info) {
-      console.log("App page on edge ", info);
-      if (info.direction === EdgeDirection.top) {
-        this.curFocusName = "/tab";
-        this.$refs.focusNode.findBlockByName(this.appTabName).requestFocus();
-      }
-    },
-    $_app_tabOnEdge(info) {
-      console.log("App tab on edge ", info);
-      if (info.direction === EdgeDirection.bottom) {
-        this.curFocusName = "/page";
-        this.$refs.focusNode.findBlockByName(this.appPageName).requestFocus();
-      }
-    },
-  },
-};
+let globalInfo = reactive({
+  tabId: 0,
+});
+let focusNode = shallowRef(null)
+const appPageName = "/page";
+const appTabName = "/tab";
+const curFocusName = shallowRef("/tab");
+provide("globalInfo", globalInfo)
+
+const $_app_onFocus = () => {
+  console.log("App onFocus");
+  focusNode.value.findBlockByName(curFocusName.value).requestFocus();
+}
+
+const onKeyDown = (ev) => {
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    router?.go(-1);
+  }
+  return true;
+}
+
+const $_app_pageOnEdge = (info) => {
+  console.log("App page on edge ", info);
+  if (info.direction === EdgeDirection.top) {
+    curFocusName.value = "/tab";
+    focusNode.value.findBlockByName(appTabName).requestFocus();
+  }
+}
+
+const $_app_tabOnEdge = (info) => {
+  console.log("App tab on edge ", info);
+  if (info.direction === EdgeDirection.bottom) {
+    curFocusName.value = "/page";
+    focusNode.value.findBlockByName(appPageName).requestFocus();
+  }
+}
 </script>
 
 <template>
-  <jsv-focus-block
-    ref="focusNode"
-    name="/main"
-    autoFocus
-    :onAction="{
-      onKeyDown: onKeyDown,
-      onFocus: $_app_onFocus,
-    }"
-    :style="{
-      width: 1280,
-      height: 720,
-      backgroundColor: '#007788',
-    }"
-  >
-    <div
-      :style="{
+  <jsv-focus-block ref="focusNode" name="/main" autoFocus :onAction="{
+    onKeyDown: onKeyDown,
+    onFocus: $_app_onFocus,
+  }" :style="{
+    width: 1280,
+    height: 720,
+    backgroundColor: '#007788',
+  }">
+    <div :style="{
         top: 0,
         left: 100,
-      }"
-    >
-      <app-tab
-        :data="tabData"
-        :name="appTabName"
-        :layout="{ width: 600, height: 100 }"
-        :onEdge="$_app_tabOnEdge"
-        :style="{
+      }">
+      <app-tab :data="tabData" :name="appTabName" :layout="{ width: 600, height: 100 }" :onEdge="$_app_tabOnEdge" :style="{
           top: 15,
-        }"
-      ></app-tab>
+        }"></app-tab>
     </div>
 
     <div :style="{ top: 100, left: 200 }">
-      <view-swiper
-        :name="appPageName"
-        :pageData="pageList"
-        :onEdge="$_app_pageOnEdge"
-        :layout="{
+      <view-swiper :name="appPageName" :pageData="pageList" :onEdge="$_app_pageOnEdge" :layout="{
           width: 600,
           height: 600,
-        }"
-      ></view-swiper>
+        }"></view-swiper>
     </div>
   </jsv-focus-block>
 </template>

package/MetroWidgetDemos/PingPong/AppPage.vue

@@ -1,14 +1,14 @@
 <!--
  * @Author: ChenChanghua
  * @Date: 2022-07-12 10:45:38
- * @LastEditors: Please set LastEditors
- * @LastEditTime: 2023-03-09 16:27:44
+ * @LastEditors: ZhengYi
+ * @LastEditTime: 2023-05-04 
  * @Description: file content
 -->
 <script setup>
 import { VERTICAL, MetroWidget } from "jsview";
 import WidgetItem from "./WidgetItem.vue";
-import { ref, shallowRef, watch, onBeforeUnmount } from "vue";
+import { shallowRef, watch, onBeforeUnmount } from "vue";
 
 const props = defineProps({
   data: {

package/MetroWidgetDemos/PingPong/Item.vue

@@ -4,7 +4,7 @@
  * @Description: file content
 -->
 <script setup>
-import { ref, shallowRef, inject } from "vue";
+import { ref, shallowRef } from "vue";
 
 const props = defineProps({
   data: Object,

package/MetroWidgetDemos/PingPong/TabItem.vue

@@ -1,12 +1,12 @@
 <!--
  * @Author: ChenChanghua
  * @Date: 2022-07-12 14:52:53
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-09-01 17:10:14
+ * @LastEditors: ZhengYi
+ * @LastEditTime: 2023-05-04 
  * @Description: file content
 -->
 <script setup>
-import { ref, shallowRef, inject } from "vue";
+import { ref, inject } from "vue";
 
 const props = defineProps({
   data: Object,

package/MetroWidgetDemos/PingPong/WidgetItem.vue

@@ -6,7 +6,7 @@
 
 <script setup>
 import { HORIZONTAL, MetroWidget, useFocusHub } from "jsview";
-import { ref, shallowRef } from "vue";
+import { shallowRef } from "vue";
 import Item from "./Item.vue";
 
 const props = defineProps({

package/MetroWidgetDemos/SkeletonDiagram/App.vue

@@ -3,11 +3,9 @@ import {
   MetroWidget,
   VERTICAL,
   useFocusHub,
-  JsvPosterImage,
-  JsvPosterDiv,
 } from "jsview";
 import Item from "./Item.vue";
-import { ref, onMounted } from "vue";
+import { onMounted } from "vue";
 import { useRouter } from "vue-router";
 import data from "./data.js";
 
@@ -58,7 +56,7 @@ onMounted(() => {
       :direction="VERTICAL"
       :provideData="provideData"
       :measures="measures"
-      :padding="{ left: 50, right: 50, top: 50, height: 50 }"
+      :padding="{ left: 50, right: 50, top: 50, bottom: 50 }"
       :enableItemRenderBreak="true"
       :placeHolderSetting="{
         backgroundColor: 'rgba(78,105,127, 0.8)',

package/MetroWidgetDemos/basic/Item.vue

@@ -4,7 +4,7 @@
  * @Description: file content
 -->
 <script setup>
-import { ref, shallowRef, inject } from "vue";
+import { ref } from "vue";
 
 const props = defineProps({
   data: Object,

package/MetroWidgetDemos/direction/App.vue

@@ -14,8 +14,6 @@ import {
 import Item from "./Item.vue";
 import { onMounted } from "vue";
 
-const TAG = "MetroWidgetDemo";
-
 const focusHub = useFocusHub();
 
 const randomColor = () => {

package/MetroWidgetDemos/direction/Item.vue

@@ -4,7 +4,7 @@
  * @Description: file content
 -->
 <script setup>
-import { ref, shallowRef, inject } from "vue";
+import { ref, shallowRef } from "vue";
 
 const props = defineProps({
   data: Object,

package/MetroWidgetDemos/focusableItemBasic/App.vue

@@ -4,7 +4,7 @@
  * @Description: file content
 -->
 <script setup>
-import { MetroWidget, HORIZONTAL, EdgeDirection, useFocusHub } from "jsview";
+import { MetroWidget, HORIZONTAL, useFocusHub } from "jsview";
 import { onMounted } from "vue";
 import ButtonItem from "./ButtonItem.vue";
 

package/MetroWidgetDemos/focusableItemBasic/ButtonItem.vue

@@ -4,7 +4,7 @@
  * @Description: 一个简单的按左右键, 焦点在左右两个view来回切换的控件
 -->
 <script setup>
-import { ref, shallowRef } from "vue";
+import { ref } from "vue";
 import { useFocusHub } from "jsview";
 
 const props = defineProps({

package/MetroWidgetDemos/focusableItemMetroWidget/App.vue

@@ -4,7 +4,7 @@
  * @Description: file content
 -->
 <script setup>
-import { MetroWidget, VERTICAL, EdgeDirection, useFocusHub } from "jsview";
+import { MetroWidget, VERTICAL, useFocusHub } from "jsview";
 import WidgetItem from "./WidgetItem.vue";
 import { onMounted } from "vue";
 

package/MetroWidgetDemos/focusableItemMetroWidget/Item.vue

@@ -4,7 +4,7 @@
  * @Description: file content
 -->
 <script setup>
-import { ref, shallowRef, inject } from "vue";
+import { ref } from "vue";
 
 const props = defineProps({
   data: Object,

package/MetroWidgetDemos/focusableItemMetroWidget/WidgetItem.vue

@@ -1,7 +1,7 @@
 
 <script setup>
 import { HORIZONTAL, MetroWidget, useFocusHub } from "jsview";
-import { ref, shallowRef } from "vue";
+import {  shallowRef } from "vue";
 import Item from "./Item.vue";
 
 const props = defineProps({

package/MetroWidgetDemos/focusableItemMix/App.vue

@@ -6,7 +6,7 @@
  * @Description: file content
 -->
 <script setup>
-import { MetroWidget, HORIZONTAL, EdgeDirection, useFocusHub } from "jsview";
+import { MetroWidget, HORIZONTAL, useFocusHub } from "jsview";
 import ButtonItem from "./ButtonItem.vue";
 import Item from "./Item.vue";
 import { onMounted } from "vue";