@shijiu/jsview-vue-samples 2.1.367-test.0 → 2.1.428

package/TouchWidget/App.vue

@@ -0,0 +1,95 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-07-11 13:31:36
+ * @Description: file content
+-->
+<script setup>
+import { MetroWidget, VERTICAL, useFocusHub, METRO_WIDGET_CONST } from "jsview";
+import WidgetItem from "./WidgetItem.vue";
+import { onMounted } from "vue";
+
+const focusHub = useFocusHub();
+
+const provideData = () => {
+  const data = [];
+  for (let i = 0; i < 10; i++) {
+    data.push({
+      width: 500,
+      height: 190,
+      name: "widget_" + i,
+      marginBottom: 10,
+      index: i,
+    });
+  }
+  return data;
+};
+
+const measures = (item) => {
+  return {
+    width: item.width,
+    height: item.height,
+    marginRight: item.marginRight,
+    marginBottom: item.marginBottom,
+    /**重要代码: itemSlide设置为ACT_FOCUS_RECT_EVENT, 由子MetroWidget控制滚动 */
+    itemSlide: METRO_WIDGET_CONST.ITEM_SLIDE.ACT_FOCUS_RECT_EVENT,
+  };
+};
+
+onMounted(() => {
+  focusHub.setFocus("mwWidget");
+});
+</script>
+
+<template>
+  <div :style="{ width: 1280, height: 720, backgroundColor: '#007788' }" />
+  <div
+    :style="{
+      left: 100,
+      top: 20,
+      width: 800,
+      height: 400,
+      fontSize: 30,
+      color: '#FFFFFF',
+    }"
+  >
+    {{ `MetroWidget的item是包含MetroWidget的组件` }}
+  </div>
+  <!-- 为了保证边缘的item缩放后依旧完整显示, 需要设置padding, 注意width/height是包含padding的 -->
+  <metro-widget
+    name="mwWidget"
+    :top="10"
+    :left="50"
+    :width="660"
+    :height="600"
+    :provideData="provideData"
+    :padding="{ left: 30, right: 30 }"
+    :direction="VERTICAL"
+    :measures="measures"
+    :touchFlag="1"
+  >
+    <!-- 重要代码: 为了实现焦点就近移动, 需要传递onItemEdge回调 -->
+    <template #renderItem="{ data, onAction, onItemEdge }">
+      <widget-item :data="data" :onAction="onAction" :onItemEdge="onItemEdge" />
+    </template>
+  </metro-widget>
+
+  <div
+    :style="{
+      width: 50,
+      height: 50,
+      backgroundColor: '#ff000055',
+      animation: 'testRotate 2s infinite',
+    }"
+  ></div>
+</template>
+
+<style scoped>
+@keyframes testRotate {
+  from {
+    transform: rotate3d(0, 0, 1, 0deg);
+  }
+  to {
+    transform: rotate3d(0, 0, 1, 360deg);
+  }
+}
+</style>

package/TouchWidget/Item.vue

@@ -0,0 +1,64 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-09 15:33:54
+ * @Description: file content
+-->
+<script setup>
+import { ref } from "vue";
+
+const props = defineProps({
+  data: Object,
+  onAction: Object,
+});
+
+const focused = ref(false);
+
+// 自身的焦点状态自己记录, 通过回调来改变
+const onFocus = () => {
+  focused.value = true;
+};
+const onBlur = () => {
+  focused.value = false;
+};
+const onClick = () => {
+  console.log("testtest item onclick ", props.data);
+};
+
+// 一般在create的时候进行回调的注册, 使用 option api的可以在created时进行注册
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+props.onAction.register("onClick", onClick);
+</script>
+
+<template>
+  <div
+    :style="{
+      width: data.width,
+      height: data.height,
+      transform: focused ? 'scale3d(1.2, 1.2, 1.2)' : '',
+      transition: 'transform 0.2s linear',
+    }"
+  >
+    <div
+      v-if="focused"
+      :style="{
+        left: -2,
+        top: -2,
+        width: data.width + 4,
+        height: data.height + 4,
+        backgroundColor: '#FF0000',
+      }"
+    />
+    <div
+      :style="{
+        width: data.width,
+        height: data.height,
+        fontSize: 30,
+        color: '#FFFFFF',
+        backgroundColor: data.color,
+      }"
+    >
+      {{ data.content }}
+    </div>
+  </div>
+</template>

package/TouchWidget/WidgetItem.vue

@@ -0,0 +1,96 @@
+<script setup>
+import { HORIZONTAL, MetroWidget, useFocusHub } from "jsview";
+import { shallowRef } from "vue";
+import Item from "./Item.vue";
+
+const props = defineProps({
+  data: Object,
+  onItemEdge: Function,
+  onAction: Object,
+});
+const focusHub = useFocusHub();
+const mwRef = shallowRef(null);
+
+const measures = (item) => {
+  return item;
+};
+const randomColor = () => {
+  let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
+  return (
+    "#" + new Array(6 - randomColor.length).fill("0").join("") + randomColor
+  );
+};
+const provideData = () => {
+  const data = [];
+  for (let i = 0; i < 10; i++) {
+    data.push({
+      width: (i + props.data.index) % 2 == 0 ? 90 : 180,
+      height: 90,
+      marginRight: 10,
+      marginBottom: 10,
+      content: i,
+      color: randomColor(),
+    });
+  }
+  return data;
+};
+const onFocus = (rect) => {
+  /** 重要代码: 参数rect为父MetroWidget传递的, 焦点过来的区域
+   *  因此需要调用setEnterFocusRect来设置焦点进入区域, 以寻找最近的焦点
+   */
+  mwRef.value?.setEnterFocusRect(rect);
+  focusHub.setFocus(props.data.name);
+};
+const onBlur = () => {
+  //onBlur时需要返还焦点给父MetroWidget
+  focusHub.returnFocusToParent();
+};
+
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+</script>
+
+<template>
+  <div
+    :style="{
+      width: 900,
+      height: 50,
+      fontSize: 30,
+      color: '#FFFFFF',
+    }"
+  >
+    {{ data.name }}
+  </div>
+  <!-- 重要代码: sendFocusRectEvent可以让MetroWidget的item在获焦时发送事件, 通知父的MetroWidget进行滚动 -->
+  <!-- 重要代码: onItemEdge直接作为onEdge回调, 既子MetroWidget到达边缘时触发父的onItemEdge -->
+  <metro-widget
+    ref="mwRef"
+    :name="data.name"
+    :top="50"
+    :width="data.width"
+    :height="data.height"
+    :provideData="provideData"
+    :direction="HORIZONTAL"
+    :padding="{
+      left: 30,
+      right: 30,
+      top: 10,
+      bottom: 10,
+    }"
+    :measures="measures"
+    :onEdge="onItemEdge"
+    :sendFocusRectEvent="true"
+    :touchFlag="1"
+    :enableItemRenderBreak="true"
+    :placeHolderSetting="{
+      backgroundColor: 'rgba(78,105,127, 0.8)',
+      focusBackgroundColor: '#770088aa',
+      borderRadius: 10,
+      gap: 10,
+    }"
+  >
+    <template #renderItem="{ data, onAction }">
+      <item :data="data" :onAction="onAction" />
+    </template>
+  </metro-widget>
+</template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shijiu/jsview-vue-samples",
-  "version": "2.1.367-test.0",
+  "version": "2.1.428",
   "license": "MIT",
   "repository": "system/jsview-framework",
   "author": "mengxk",