@shijiu/jsview-vue 0.9.766 → 0.9.783

package/samples/MetroWidgetDemos/padding/App.vue

@@ -0,0 +1,222 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-08 15:54:16
+ * @Description: file content
+-->
+<script setup>
+import { MetroWidget, HORIZONTAL, useFocusHub, EdgeDirection } from "jsview";
+import Item from "./Item.vue";
+import { onMounted } from "vue";
+
+const TAG = "MetroWidgetDemo";
+
+const focusHub = useFocusHub();
+
+const randomColor = () => {
+  let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
+  return (
+    "#" + new Array(6 - randomColor.length).fill("0").join("") + randomColor
+  );
+};
+
+const data = [];
+for (let i = 0; i < 30; i++) {
+  data.push({
+    width: 90,
+    height: 90,
+    marginRight: 10,
+    marginBottom: 10,
+    color: randomColor(),
+    content: i,
+  });
+}
+
+const widget1 = {
+  provideData: () => {
+    return data;
+  },
+  measures: (data) => {
+    return {
+      width: data.width,
+      height: data.height,
+      marginRight: data.marginRight,
+      marginBottom: data.marginBottom,
+    };
+  },
+  onEdge: (edgeInfo) => {
+    if (edgeInfo.direction == EdgeDirection.bottom) {
+      focusHub.setFocus("widget2");
+    }
+  },
+  widgetLayout: {
+    left: 50,
+    top: 50,
+    width: 500,
+    height: 200,
+  },
+};
+
+const widget2 = {
+  provideData: () => {
+    return data;
+  },
+  measures: (data) => {
+    return {
+      width: data.width,
+      height: data.height,
+      marginRight: data.marginRight,
+      marginBottom: data.marginBottom,
+    };
+  },
+  onEdge: (edgeInfo) => {
+    if (edgeInfo.direction == EdgeDirection.top) {
+      focusHub.setFocus("widget1");
+    } else if (edgeInfo.direction == EdgeDirection.bottom) {
+      focusHub.setFocus("widget3");
+    }
+  },
+  widgetLayout: {
+    left: 50,
+    top: 300,
+    width: 500,
+    height: 220,
+  },
+  padding: {
+    left: 10,
+    top: 10,
+    right: 10,
+    bottom: 10,
+  },
+};
+
+const widget3 = {
+  provideData: () => {
+    return data;
+  },
+  measures: (data) => {
+    return {
+      width: data.width,
+      height: data.height,
+      marginRight: data.marginRight,
+      marginBottom: data.marginBottom,
+    };
+  },
+  onEdge: (edgeInfo) => {
+    if (edgeInfo.direction == EdgeDirection.top) {
+      focusHub.setFocus("widget2");
+    }
+  },
+  widgetLayout: {
+    left: 50,
+    top: 550,
+    width: 500,
+    height: 200,
+  },
+  padding: {
+    left: 10,
+    top: 10,
+    right: 10,
+    bottom: 10,
+  },
+};
+
+onMounted(() => {
+  //组件mount后设置焦点
+  focusHub.setFocus("widget1");
+});
+</script>
+
+<template>
+  <div
+    :style="{
+      width: 1920,
+      height: 1080,
+      backgroundColor: '#007788',
+    }"
+  />
+  <div
+    :style="{
+      left: widget1.widgetLayout.left,
+      top: widget1.widgetLayout.top - 50,
+      width: 1280,
+      height: 50,
+      fontSize: 20,
+      color: '#FFFFFF',
+    }"
+  >
+    {{ "未设置padding, 导致边缘放大的item显示不全. height为200" }}
+  </div>
+  <metro-widget
+    name="widget1"
+    :left="widget1.widgetLayout.left"
+    :top="widget1.widgetLayout.top"
+    :width="widget1.widgetLayout.width"
+    :height="widget1.widgetLayout.height"
+    :provideData="widget1.provideData"
+    :measures="widget1.measures"
+    :onEdge="widget1.onEdge"
+    :direction="HORIZONTAL"
+  >
+    <template #renderItem="{ data, onAction }">
+      <item :data="data" :onAction="onAction" />
+    </template>
+  </metro-widget>
+
+  <div
+    :style="{
+      left: widget2.widgetLayout.left,
+      top: widget2.widgetLayout.top - 50,
+      width: 1280,
+      height: 50,
+      fontSize: 20,
+      color: '#FFFFFF',
+    }"
+  >
+    {{ "设置padding, 注意排布范围是height减去padding占用的范围,\n因此还需要排两行需要调大height, height=220" }}
+  </div>
+  <metro-widget
+    name="widget2"
+    :left="widget2.widgetLayout.left"
+    :top="widget2.widgetLayout.top"
+    :width="widget2.widgetLayout.width"
+    :height="widget2.widgetLayout.height"
+    :provideData="widget2.provideData"
+    :measures="widget2.measures"
+    :onEdge="widget2.onEdge"
+    :direction="HORIZONTAL"
+    :padding="widget2.padding"
+  >
+    <template #renderItem="{ data, onAction }">
+      <item :data="data" :onAction="onAction" />
+    </template>
+  </metro-widget>
+
+  <div
+    :style="{
+      left: widget3.widgetLayout.left,
+      top: widget3.widgetLayout.top - 50,
+      width: 1280,
+      height: 50,
+      fontSize: 20,
+      color: '#FFFFFF',
+    }"
+  >
+    {{ "设置padding, 但未调整组件尺寸, 导致只能排一行. height=200" }}
+  </div>
+  <metro-widget
+    name="widget3"
+    :left="widget3.widgetLayout.left"
+    :top="widget3.widgetLayout.top"
+    :width="widget3.widgetLayout.width"
+    :height="widget3.widgetLayout.height"
+    :provideData="widget3.provideData"
+    :measures="widget3.measures"
+    :onEdge="widget3.onEdge"
+    :direction="HORIZONTAL"
+    :padding="widget3.padding"
+  >
+    <template #renderItem="{ data, onAction }">
+      <item :data="data" :onAction="onAction" />
+    </template>
+  </metro-widget>
+</template>

package/samples/MetroWidgetDemos/padding/Item.vue

@@ -0,0 +1,64 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-08 14:52:17
+ * @Description: file content
+-->
+<script setup>
+import { ref, shallowRef, inject } from "vue";
+
+const props = defineProps({
+  data: Object,
+  onAction: Object,
+});
+
+const divRef = shallowRef(null);
+const focused = ref(false);
+
+// 注册回调
+const onFocus = () => {
+  focused.value = true;
+};
+const onBlur = () => {
+  focused.value = false;
+};
+const onClick = () => {
+  console.log("item onclick ", props.data);
+};
+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.1, 1.1, 1)' : '',
+      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>
+    <div
+      ref="divRef"
+      :style="{
+        width: data.width,
+        height: data.height,
+        fontSize: '30px',
+        color: '#FFFFFF',
+        backgroundColor: data.color,
+      }"
+    >
+      {{ data.content }}
+    </div>
+  </div>
+</template>

package/samples/MetroWidgetDemos/routeList.js

@@ -0,0 +1,64 @@
+/*
+ * @Author: ChenChanghua
+ * @Date: 2023-03-09 14:02:58
+ * @Description: file content
+ */
+export default [
+  {
+    name: "基础示例",
+    path: "/metroWidget/basic",
+    component: () => import("jsview/samples/MetroWidgetDemos/basic/App"),
+  },
+  {
+    name: "direction",
+    path: "/metroWidget/direction",
+    component: () => import("jsview/samples/MetroWidgetDemos/direction/App"),
+  },
+  {
+    name: "padding",
+    path: "/metroWidget/padding",
+    component: () => import("jsview/samples/MetroWidgetDemos/padding/App"),
+  },
+  {
+    name: "slideSetting",
+    path: "/metroWidget/slideSetting",
+    component: () => import("jsview/samples/MetroWidgetDemos/slideSetting/App"),
+  },
+  {
+    name: "layoutType",
+    path: "/metroWidget/layoutType",
+    component: () => import("jsview/samples/MetroWidgetDemos/layoutType/App"),
+  },
+  {
+    name: "嵌套(基础)",
+    path: "/metroWidget/focusableItemBasic",
+    component: () => import("jsview/samples/MetroWidgetDemos/focusableItemBasic/App"),
+  },
+  {
+    name: "嵌套(混合)",
+    path: "/metroWidget/focusableItemMix",
+    component: () => import("jsview/samples/MetroWidgetDemos/focusableItemMix/App"),
+  },
+  {
+    name: "嵌套(MetroWidget)",
+    path: "/metroWidget/focusableItemMetroWidget",
+    component: () => import("jsview/samples/MetroWidgetDemos/focusableItemMetroWidget/App"),
+  },
+  // {
+  //   name: "嵌套示例",
+  //   path: "/metroWidget/Advanced",
+  //   component: () => import("jsview/samples/MetroWidgetDemos/Advanced/App"),
+  // },
+  {
+    name: "乒乓模式",
+    path: "/metroWidget/PingPong",
+    component: () =>
+      import("jsview/samples/MetroWidgetDemos/PingPong/App"),
+  },
+  {
+    name: "性能测试",
+    path: "/metroWidget/PerformanceTest",
+    component: () =>
+      import("jsview/samples/MetroWidgetDemos/PerformanceTest/App"),
+  },
+]

package/samples/MetroWidgetDemos/slideSetting/App.vue

@@ -0,0 +1,225 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-08 15:54:16
+ * @Description: file content
+-->
+<script setup>
+import {
+  MetroWidget,
+  HORIZONTAL,
+  useFocusHub,
+  EdgeDirection,
+  SeamlessSlide,
+  WholePageSlide,
+  FixPositionSlide,
+} from "jsview";
+import Item from "./Item.vue";
+import { onMounted } from "vue";
+
+const TAG = "MetroWidgetDemo";
+
+const focusHub = useFocusHub();
+
+const randomColor = () => {
+  let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
+  return (
+    "#" + new Array(6 - randomColor.length).fill("0").join("") + randomColor
+  );
+};
+
+const data = [];
+for (let i = 0; i < 30; i++) {
+  data.push({
+    width: 90,
+    height: 90,
+    marginRight: 10,
+    marginBottom: 10,
+    color: randomColor(),
+    content: i,
+  });
+}
+
+const widget1 = {
+  provideData: () => {
+    return data;
+  },
+  measures: (data) => {
+    return {
+      width: data.width,
+      height: data.height,
+      marginRight: data.marginRight,
+      marginBottom: data.marginBottom,
+    };
+  },
+  onEdge: (edgeInfo) => {
+    if (edgeInfo.direction == EdgeDirection.bottom) {
+      focusHub.setFocus("widget2");
+    }
+  },
+  widgetLayout: {
+    left: 50,
+    top: 50,
+    width: 500,
+    height: 200,
+  },
+  slideSetting: new SeamlessSlide({
+    startPercent: 0.2,
+    endPercent: 0.8,
+  }),
+};
+
+const widget2 = {
+  provideData: () => {
+    return data;
+  },
+  measures: (data) => {
+    return {
+      width: data.width,
+      height: data.height,
+      marginRight: data.marginRight,
+      marginBottom: data.marginBottom,
+    };
+  },
+  onEdge: (edgeInfo) => {
+    if (edgeInfo.direction == EdgeDirection.top) {
+      focusHub.setFocus("widget1");
+    } else if (edgeInfo.direction == EdgeDirection.bottom) {
+      focusHub.setFocus("widget3");
+    }
+  },
+  widgetLayout: {
+    left: 50,
+    top: 300,
+    width: 500,
+    height: 220,
+  },
+  slideSetting: new WholePageSlide(),
+};
+
+const widget3 = {
+  provideData: () => {
+    return data;
+  },
+  measures: (data) => {
+    return {
+      width: data.width,
+      height: data.height,
+      marginRight: data.marginRight,
+      marginBottom: data.marginBottom,
+    };
+  },
+  onEdge: (edgeInfo) => {
+    if (edgeInfo.direction == EdgeDirection.top) {
+      focusHub.setFocus("widget2");
+    }
+  },
+  widgetLayout: {
+    left: 50,
+    top: 550,
+    width: 500,
+    height: 200,
+  },
+  slideSetting: new FixPositionSlide({ fixPercent: 0.5 }),
+};
+
+onMounted(() => {
+  //组件mount后设置焦点
+  focusHub.setFocus("widget1");
+});
+</script>
+
+<template>
+  <div
+    :style="{
+      width: 1920,
+      height: 1080,
+      backgroundColor: '#007788',
+    }"
+  />
+  <div
+    :style="{
+      left: widget1.widgetLayout.left,
+      top: widget1.widgetLayout.top - 50,
+      width: 1280,
+      height: 50,
+      fontSize: 20,
+      color: '#FFFFFF',
+    }"
+  >
+    {{ "无缝滚动" }}
+  </div>
+  <metro-widget
+    name="widget1"
+    :left="widget1.widgetLayout.left"
+    :top="widget1.widgetLayout.top"
+    :width="widget1.widgetLayout.width"
+    :height="widget1.widgetLayout.height"
+    :provideData="widget1.provideData"
+    :measures="widget1.measures"
+    :onEdge="widget1.onEdge"
+    :direction="HORIZONTAL"
+    :slideSetting="widget1.slideSetting"
+  >
+    <template #renderItem="{ data, onAction }">
+      <item :data="data" :onAction="onAction" />
+    </template>
+  </metro-widget>
+
+  <div
+    :style="{
+      left: widget2.widgetLayout.left,
+      top: widget2.widgetLayout.top - 50,
+      width: 1280,
+      height: 50,
+      fontSize: 20,
+      color: '#FFFFFF',
+    }"
+  >
+    {{ "翻页" }}
+  </div>
+  <metro-widget
+    name="widget2"
+    :left="widget2.widgetLayout.left"
+    :top="widget2.widgetLayout.top"
+    :width="widget2.widgetLayout.width"
+    :height="widget2.widgetLayout.height"
+    :provideData="widget2.provideData"
+    :measures="widget2.measures"
+    :onEdge="widget2.onEdge"
+    :direction="HORIZONTAL"
+    :slideSetting="widget2.slideSetting"
+  >
+    <template #renderItem="{ data, onAction }">
+      <item :data="data" :onAction="onAction" />
+    </template>
+  </metro-widget>
+
+  <div
+    :style="{
+      left: widget3.widgetLayout.left,
+      top: widget3.widgetLayout.top - 50,
+      width: 1280,
+      height: 50,
+      fontSize: 20,
+      color: '#FFFFFF',
+    }"
+  >
+    {{ "焦点固定位置" }}
+  </div>
+  <metro-widget
+    name="widget3"
+    :left="widget3.widgetLayout.left"
+    :top="widget3.widgetLayout.top"
+    :width="widget3.widgetLayout.width"
+    :height="widget3.widgetLayout.height"
+    :provideData="widget3.provideData"
+    :measures="widget3.measures"
+    :onEdge="widget3.onEdge"
+    :direction="HORIZONTAL"
+    :slideSetting="widget3.slideSetting"
+  >
+    <template #renderItem="{ data, onAction }">
+      <item :data="data" :onAction="onAction" />
+    </template>
+  </metro-widget>
+</template>

package/samples/MetroWidgetDemos/slideSetting/Item.vue

@@ -0,0 +1,45 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-03-08 14:52:17
+ * @Description: file content
+-->
+<script setup>
+import { ref, shallowRef, inject } from "vue";
+
+const props = defineProps({
+  data: Object,
+  onAction: Object,
+});
+
+const divRef = shallowRef(null);
+const focused = ref(false);
+
+// 注册回调
+const onFocus = () => {
+  focused.value = true;
+};
+const onBlur = () => {
+  focused.value = false;
+};
+const onClick = () => {
+  console.log("item onclick ", props.data);
+};
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+props.onAction.register("onClick", onClick);
+</script>
+
+<template>
+  <div
+    ref="divRef"
+    :style="{
+      width: data.width,
+      height: data.height,
+      fontSize: 30,
+      color: focused ? '#FF0000' : '#FFFFFF',
+      backgroundColor: data.color,
+    }"
+  >
+    {{ data.content }}
+  </div>
+</template>