@shijiu/jsview-vue 0.9.590 → 0.9.602

package/samples/MetroWidgetDemos/Advanced/App.vue

@@ -2,18 +2,16 @@
  * @Author: ChenChanghua
  * @Date: 2022-07-11 13:31:36
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-07-11 18:02:13
+ * @LastEditTime: 2022-07-18 10:00:27
  * @Description: file content
 -->
 <script setup>
 import { MetroWidget, VERTICAL, EdgeDirection } from "jsview";
 import { useRouter } from "vue-router";
-import { ref } from "vue";
 import { useFocusHub } from "jsview";
-import { advanceButton, advanceMetroWidget, advanceMix } from "../data";
-import ButtonItem from "./ButtonItem.vue";
-import WidgetItem from "../WidgetItem.vue";
-import Item from "../Item.vue";
+import Buttons from "./Buttons.vue";
+import Mixed from "./Mixed.vue";
+import Widgets from "./Widgets.vue";
 
 const router = useRouter();
 const foucsHub = useFocusHub();
@@ -27,65 +25,6 @@ const onKeyDown = (ev) => {
   }
   return true;
 };
-
-//item为Buttonitem的一些回调
-const provideData = () => {
-  return advanceButton;
-};
-const measures = (item) => {
-  return {
-    width: item.width,
-    height: item.height,
-    marginRight: item.marginRight,
-    marginBottom: item.marginBottom,
-  };
-};
-const onEdge = (edgeInfo) => {
-  if (edgeInfo.direction == EdgeDirection.right) {
-    foucsHub.setFocus("mwWidget");
-  } else if (edgeInfo.direction == EdgeDirection.bottom) {
-    foucsHub.setFocus("mwMix");
-  }
-};
-
-//item为Widgetitem的一些回调
-const provideData2 = () => {
-  return advanceMetroWidget;
-};
-const measures2 = (item) => {
-  return {
-    width: item.width,
-    height: item.height,
-    marginRight: item.marginRight,
-    marginBottom: item.marginBottom,
-    doSlide: false,
-  };
-};
-const onEdge2 = (edgeInfo) => {
-  if (edgeInfo.direction == EdgeDirection.left) {
-    foucsHub.setFocus("mwButton");
-  }
-};
-
-//item混排的回调
-const provideData3 = () => {
-  return advanceMix;
-};
-const measures3 = (item) => {
-  return {
-    width: item.width,
-    height: item.height,
-    marginRight: item.marginRight,
-    marginBottom: item.marginBottom,
-  };
-};
-const onEdge3 = (edgeInfo) => {
-  if (edgeInfo.direction == EdgeDirection.right) {
-    foucsHub.setFocus("mwWidget");
-  } else if (edgeInfo.direction == EdgeDirection.top) {
-    foucsHub.setFocus("mwButton");
-  }
-};
 </script>
 
 <template>
@@ -101,111 +40,8 @@ const onEdge3 = (edgeInfo) => {
       backgroundColor: '#007788',
     }"
   >
-    <div
-      :style="{
-        left: 50,
-        top: 50,
-        width: 300,
-        height: 400,
-        fontSize: 30,
-        color: '#FFFFFF',
-      }"
-    >
-      {{ `item可以是可获得焦点的控件` }}
-    </div>
-    <metro-widget
-      name="mwButton"
-      :top="150"
-      :left="50"
-      :provideData="provideData"
-      :width="220"
-      :height="400"
-      :direction="VERTICAL"
-      :measures="measures"
-      :onEdge="onEdge"
-    >
-      <template #renderItem="{ data, query, onAction, onItemEdge }">
-        <button-item
-          :data="data"
-          :query="query"
-          :onAction="onAction"
-          :onItemEdge="onItemEdge"
-        />
-      </template>
-    </metro-widget>
-
-    <div
-      :style="{
-        left: 50,
-        top: 350,
-        width: 300,
-        height: 400,
-        fontSize: 30,
-        color: '#FFFFFF',
-      }"
-    >
-      {{ `item可以普通描画控件和可获焦控件混排` }}
-    </div>
-    <metro-widget
-      name="mwMix"
-      :top="450"
-      :left="50"
-      :provideData="provideData3"
-      :width="260"
-      :height="440"
-      :padding="{
-        top: 20,
-        left: 20,
-      }"
-      :direction="VERTICAL"
-      :measures="measures3"
-      :onEdge="onEdge3"
-    >
-      <template #renderItem="{ data, query, onAction, onItemEdge }">
-        <button-item
-          v-if="data.type == 'button'"
-          :data="data"
-          :query="query"
-          :onAction="onAction"
-          :onItemEdge="onItemEdge"
-        />
-        <item v-else :data="data" :query="query" :onAction="onAction" />
-      </template>
-    </metro-widget>
-
-    <div
-      :style="{
-        left: 500,
-        top: 50,
-        width: 500,
-        height: 400,
-        fontSize: 30,
-        color: '#FFFFFF',
-      }"
-    >
-      {{ `进一步, MetroWidget的item\n可以是包含MetroWidget的组件` }}
-    </div>
-    <metro-widget
-      name="mwWidget"
-      :top="150"
-      :left="400"
-      :provideData="provideData2"
-      :width="600"
-      :height="600"
-      :direction="VERTICAL"
-      :measures="measures2"
-      :onEdge="onEdge2"
-    >
-      <!-- data为每个item的数据, query提供获取MetroWidget内部状态的一些接口, onAction提供item注册自身回调的接口, onItemEdge则是item内部焦点处理到达边缘后, 需要通知MetroWidget时的回调 -->
-      <!-- measure2中会返回doSlide: false, 既MetroWidget自身不处理滚动, 滚动由子的sendFocusRectEvent控制 -->
-      <template #renderItem="{ data, query, onAction, onItemEdge }">
-        <widget-item
-          :data="data"
-          :query="query"
-          :onAction="onAction"
-          :onItemEdge="onItemEdge"
-        />
-      </template>
-    </metro-widget>
+    <buttons></buttons>
+    <mixed></mixed>
+    <widgets></widgets>
   </jsv-focus-block>
 </template>

package/samples/MetroWidgetDemos/Advanced/Buttons.vue

@@ -0,0 +1,70 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-07-11 13:31:36
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-07-18 09:49:59
+ * @Description: file content
+-->
+<script setup>
+import { MetroWidget, VERTICAL, EdgeDirection } from "jsview";
+import { useFocusHub } from "jsview";
+import { advanceButton } from "../data";
+import ButtonItem from "./ButtonItem.vue";
+
+const foucsHub = useFocusHub();
+
+//item为Buttonitem的一些回调
+const provideData = () => {
+  return advanceButton;
+};
+const measures = (item) => {
+  return {
+    width: item.width,
+    height: item.height,
+    marginRight: item.marginRight,
+    marginBottom: item.marginBottom,
+  };
+};
+const onEdge = (edgeInfo) => {
+  if (edgeInfo.direction == EdgeDirection.right) {
+    foucsHub.setFocus("mwWidget");
+  } else if (edgeInfo.direction == EdgeDirection.bottom) {
+    foucsHub.setFocus("mwMix");
+  }
+};
+</script>
+
+<template>
+  <div
+    :style="{
+      left: 50,
+      top: 50,
+      width: 300,
+      height: 400,
+      fontSize: 30,
+      color: '#FFFFFF',
+    }"
+  >
+    {{ `item可以是可获得焦点的控件` }}
+  </div>
+  <metro-widget
+    name="mwButton"
+    :top="150"
+    :left="50"
+    :provideData="provideData"
+    :width="220"
+    :height="400"
+    :direction="VERTICAL"
+    :measures="measures"
+    :onEdge="onEdge"
+  >
+    <template #renderItem="{ data, query, onAction, onItemEdge }">
+      <button-item
+        :data="data"
+        :query="query"
+        :onAction="onAction"
+        :onItemEdge="onItemEdge"
+      />
+    </template>
+  </metro-widget>
+</template>

package/samples/MetroWidgetDemos/Advanced/Mixed.vue

@@ -0,0 +1,77 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-07-11 13:31:36
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-07-18 09:57:40
+ * @Description: file content
+-->
+<script setup>
+import { MetroWidget, VERTICAL, EdgeDirection } from "jsview";
+import { useFocusHub } from "jsview";
+import { advanceMix } from "../data";
+import ButtonItem from "./ButtonItem.vue";
+import Item from "../Item.vue";
+
+const foucsHub = useFocusHub();
+
+//item混排的回调
+const provideData = () => {
+  return advanceMix;
+};
+const measures = (item) => {
+  return {
+    width: item.width,
+    height: item.height,
+    marginRight: item.marginRight,
+    marginBottom: item.marginBottom,
+  };
+};
+const onEdge = (edgeInfo) => {
+  if (edgeInfo.direction == EdgeDirection.right) {
+    foucsHub.setFocus("mwWidget");
+  } else if (edgeInfo.direction == EdgeDirection.top) {
+    foucsHub.setFocus("mwButton");
+  }
+};
+</script>
+
+<template>
+  <div
+    :style="{
+      left: 50,
+      top: 350,
+      width: 300,
+      height: 400,
+      fontSize: 30,
+      color: '#FFFFFF',
+    }"
+  >
+    {{ `item可以普通描画控件和可获焦控件混排` }}
+  </div>
+  <metro-widget
+    name="mwMix"
+    :top="450"
+    :left="50"
+    :provideData="provideData"
+    :width="260"
+    :height="440"
+    :padding="{
+      top: 20,
+      left: 20,
+    }"
+    :direction="VERTICAL"
+    :measures="measures"
+    :onEdge="onEdge"
+  >
+    <template #renderItem="{ data, query, onAction, onItemEdge }">
+      <button-item
+        v-if="data.type == 'button'"
+        :data="data"
+        :query="query"
+        :onAction="onAction"
+        :onItemEdge="onItemEdge"
+      />
+      <item v-else :data="data" :query="query" :onAction="onAction" />
+    </template>
+  </metro-widget>
+</template>

package/samples/MetroWidgetDemos/Advanced/Widgets.vue

@@ -0,0 +1,71 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-07-11 13:31:36
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-07-18 09:59:32
+ * @Description: file content
+-->
+<script setup>
+import { MetroWidget, VERTICAL, EdgeDirection } from "jsview";
+import { useFocusHub } from "jsview";
+import { advanceMetroWidget } from "../data";
+import WidgetItem from "../WidgetItem.vue";
+
+const foucsHub = useFocusHub();
+
+//item为Widgetitem的一些回调
+const provideData = () => {
+  return advanceMetroWidget;
+};
+// measures中会返回doSlide: false, 既MetroWidget自身不处理滚动, 滚动由子的sendFocusRectEvent控制
+const measures = (item) => {
+  return {
+    width: item.width,
+    height: item.height,
+    marginRight: item.marginRight,
+    marginBottom: item.marginBottom,
+    doSlide: false,
+  };
+};
+const onEdge = (edgeInfo) => {
+  if (edgeInfo.direction == EdgeDirection.left) {
+    foucsHub.setFocus("mwButton");
+  }
+};
+</script>
+
+<template>
+  <div
+    :style="{
+      left: 500,
+      top: 50,
+      width: 500,
+      height: 400,
+      fontSize: 30,
+      color: '#FFFFFF',
+    }"
+  >
+    {{ `进一步, MetroWidget的item\n可以是包含MetroWidget的组件` }}
+  </div>
+  <metro-widget
+    name="mwWidget"
+    :top="150"
+    :left="400"
+    :provideData="provideData"
+    :width="600"
+    :height="600"
+    :direction="VERTICAL"
+    :measures="measures"
+    :onEdge="onEdge"
+  >
+    <!-- data为每个item的数据, query提供获取MetroWidget内部状态的一些接口, onAction提供item注册自身回调的接口, onItemEdge则是item内部焦点处理到达边缘后, 需要通知MetroWidget时的回调 -->
+    <template #renderItem="{ data, query, onAction, onItemEdge }">
+      <widget-item
+        :data="data"
+        :query="query"
+        :onAction="onAction"
+        :onItemEdge="onItemEdge"
+      />
+    </template>
+  </metro-widget>
+</template>

package/samples/MetroWidgetDemos/Simple/AbsoluteTemplate.vue

@@ -0,0 +1,75 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-07-11 13:31:36
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-07-18 10:03:44
+ * @Description: file content
+-->
+<script setup>
+import { MetroWidget, WholePageSlide, HORIZONTAL, EdgeDirection } from "jsview";
+import { useFocusHub } from "jsview";
+import { simpleDataAbs } from "../data";
+import Item from "../Item.vue";
+const foucsHub = useFocusHub();
+
+const wholePageSlide = new WholePageSlide();
+
+const provideDataAbs = () => {
+  return simpleDataAbs;
+};
+const measuresAbs = (item) => {
+  return {
+    width: item.width,
+    height: item.height,
+    marginRight: item.marginRight,
+    marginBottom: item.marginBottom,
+    left: item.left,
+    top: item.top,
+  };
+};
+const onEdgeAbs = (edgeInfo) => {
+  if (edgeInfo.direction == EdgeDirection.left) {
+    foucsHub.setFocus("mw");
+  }
+};
+</script>
+
+<template>
+  <div
+    :style="{
+      left: 700,
+      top: 50,
+      width: 700,
+      height: 50,
+      color: '#FFFFFF',
+      fontSize: 30,
+    }"
+  >
+    绝对坐标布局
+  </div>
+  <!-- 绝对坐标布局, 将layoutType设为absolute, measures返回的对象需要有left,top信息  -->
+  <metro-widget
+    name="mwAbs"
+    :top="150"
+    :left="700"
+    :provideData="provideDataAbs"
+    :width="500"
+    :height="400"
+    :padding="{
+      left: 50,
+      top: 50,
+      right: 50,
+      bottom: 50,
+    }"
+    :direction="HORIZONTAL"
+    :measures="measuresAbs"
+    :slideSetting="wholePageSlide"
+    :onEdge="onEdgeAbs"
+    layoutType="absolute"
+  >
+    <!-- data为每个item的数据, query提供获取MetroWidget内部状态的一些接口, onAction提供item注册自身回调的接口 -->
+    <template #renderItem="{ data, query, onAction }">
+      <item :data="data" :query="query" :onAction="onAction" />
+    </template>
+  </metro-widget>
+</template>

package/samples/MetroWidgetDemos/Simple/App.vue

@@ -2,24 +2,18 @@
  * @Author: ChenChanghua
  * @Date: 2022-07-11 13:31:36
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-07-11 16:02:14
+ * @LastEditTime: 2022-07-18 10:06:28
  * @Description: file content
 -->
 <script setup>
 import { MetroWidget, WholePageSlide, HORIZONTAL, EdgeDirection } from "jsview";
 import { useRouter } from "vue-router";
-import { ref } from "vue";
 import { useFocusHub } from "jsview";
-import { simpleData, simpleDataAbs } from "../data";
-import Item from "../Item.vue";
+import AbsoluteTemplate from "./AbsoluteTemplate.vue";
+import RelativeTemplate from "./RelativeTemplate.vue";
 
 const router = useRouter();
 const foucsHub = useFocusHub();
-const mwRef = ref(null);
-
-const wholePageSlide = new WholePageSlide();
-let innerData = simpleData.concat();
-let dataPool = [];
 
 const onFocus = () => {
   foucsHub.setFocus("button");
@@ -30,66 +24,6 @@ const onKeyDown = (ev) => {
   }
   return true;
 };
-
-const provideData = () => {
-  return innerData;
-};
-const measures = (item) => {
-  return {
-    width: item.width,
-    height: item.height,
-    marginRight: item.marginRight,
-    marginBottom: item.marginBottom,
-  };
-};
-const onEdge = (edgeInfo) => {
-  // MetroWidget焦点到达边缘后的回调
-  if (edgeInfo.direction == EdgeDirection.top) {
-    buttonFocus.value = true;
-    foucsHub.setFocus("button");
-  } else if (edgeInfo.direction == EdgeDirection.right) {
-    foucsHub.setFocus("mwAbs");
-  }
-};
-
-const buttonFocus = ref(true);
-const buttonOnKeyDown = (ev) => {
-  switch (ev.keyCode) {
-    case 40:
-      buttonFocus.value = false;
-      foucsHub.setFocus("mw");
-      break;
-    case 13:
-      if (innerData.length == simpleData.length) {
-        innerData = [];
-        dataPool = simpleData.concat();
-      } else {
-        innerData.push(dataPool.shift());
-      }
-      mwRef.value?.refreshData(true);
-      break;
-  }
-  return true;
-};
-
-const provideDataAbs = () => {
-  return simpleDataAbs;
-};
-const measuresAbs = (item) => {
-  return {
-    width: item.width,
-    height: item.height,
-    marginRight: item.marginRight,
-    marginBottom: item.marginBottom,
-    left: item.left,
-    top: item.top,
-  };
-};
-const onEdgeAbs = (edgeInfo) => {
-  if (edgeInfo.direction == EdgeDirection.left) {
-    foucsHub.setFocus("mw");
-  }
-};
 </script>
 
 <template>
@@ -105,90 +39,7 @@ const onEdgeAbs = (edgeInfo) => {
       backgroundColor: '#007788',
     }"
   >
-    <jsv-focus-block
-      name="button"
-      :onAction="{
-        onKeyDown: buttonOnKeyDown,
-      }"
-    >
-      <div
-        :style="{
-          left: 100,
-          top: 50,
-          width: 500,
-          height: 100,
-          color: '#FFFFFF',
-          fontSize: 30,
-          backgroundColor: buttonFocus ? '#AA0000' : '#444444',
-        }"
-      >
-        {{ `自适应布局\n获焦时按确认查看时item排布的方式` }}
-      </div>
-    </jsv-focus-block>
-
-    <!-- item的排布区域为600*300, 但由于获焦时需要放大, 因此需要往外扩展padding, 合起来宽高为700*400 -->
-    <metro-widget
-      name="mw"
-      ref="mwRef"
-      :top="150"
-      :left="50"
-      :provideData="provideData"
-      :width="500"
-      :height="400"
-      :padding="{
-        left: 50,
-        top: 50,
-        right: 50,
-        bottom: 50,
-      }"
-      :direction="HORIZONTAL"
-      :measures="measures"
-      :slideSetting="wholePageSlide"
-      :onEdge="onEdge"
-    >
-      <!-- data为每个item的数据, query提供获取MetroWidget内部状态的一些接口, onAction提供item注册自身回调的接口 -->
-      <template #renderItem="{ data, query, onAction }">
-        <item :data="data" :query="query" :onAction="onAction" />
-      </template>
-    </metro-widget>
-
-    <div
-      :style="{
-        left: 700,
-        top: 50,
-        width: 700,
-        height: 50,
-        color: '#FFFFFF',
-        fontSize: 30,
-      }"
-    >
-      绝对坐标布局
-    </div>
-
-    <!-- 绝对坐标布局, 将layoutType设为absolute, measures返回的对象需要有left,top信息  -->
-    <metro-widget
-      name="mwAbs"
-      :top="150"
-      :left="700"
-      :provideData="provideDataAbs"
-      :width="500"
-      :height="400"
-      :padding="{
-        left: 50,
-        top: 50,
-        right: 50,
-        bottom: 50,
-      }"
-      :direction="HORIZONTAL"
-      :measures="measuresAbs"
-      :slideSetting="wholePageSlide"
-      :onEdge="onEdgeAbs"
-      layoutType="absolute"
-    >
-      <!-- data为每个item的数据, query提供获取MetroWidget内部状态的一些接口, onAction提供item注册自身回调的接口 -->
-      <template #renderItem="{ data, query, onAction }">
-        <item :data="data" :query="query" :onAction="onAction" />
-      </template>
-    </metro-widget>
+    <absolute-template></absolute-template>
+    <relative-template></relative-template>
   </jsv-focus-block>
 </template>