@shijiu/jsview-vue-samples 1.9.747

package/MetroWidgetDemos/PingPong/AppPage.vue

@@ -0,0 +1,73 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-07-12 10:45:38
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-09-01 17:04:31
+ * @Description: file content
+-->
+<script setup>
+import { VERTICAL, MetroWidget } from "jsview";
+import WidgetItem from "../WidgetItem.vue";
+import { ref, shallowRef, watch, onBeforeUnmount } from "vue";
+
+const props = defineProps({
+  data: {
+    type: Object,
+    require: true,
+  },
+  name: {
+    type: String,
+    require: true,
+  },
+  onEdge: {
+    type: Function,
+  },
+});
+
+const widgetRef = shallowRef(null);
+
+const provideData = () => {
+  return props.data.data;
+};
+const measures = (item) => {
+  return {
+    width: item.width,
+    height: item.height,
+    doSlide: false,
+  };
+};
+
+const watcher = watch(
+  () => props.data,
+  (newValue, oldValue) => {
+    widgetRef.value?.refreshData();
+  }
+);
+
+onBeforeUnmount(() => {
+  watcher();
+})
+
+</script>
+
+<template>
+  <metro-widget
+    ref="widgetRef"
+    :name="name"
+    :width="data.width"
+    :height="data.height"
+    :provideData="provideData"
+    :direction="VERTICAL"
+    :measures="measures"
+    :onEdge="onEdge"
+  >
+    <template #renderItem="{ data, query, onItemEdge, onAction }">
+      <widget-item
+        :data="data"
+        :query="query"
+        :onItemEdge="onItemEdge"
+        :onAction="onAction"
+      ></widget-item>
+    </template>
+  </metro-widget>
+</template>

package/MetroWidgetDemos/PingPong/AppTab.vue

@@ -0,0 +1,62 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-07-12 10:45:19
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-09-01 16:19:51
+ * @Description: file content
+-->
+<script setup>
+import { HORIZONTAL, MetroWidget } from "jsview";
+import TabItem from "./TabItem.vue";
+
+const props = defineProps({
+  data: {
+    type: Object,
+    require: true,
+  },
+  name: {
+    type: String,
+    require: true,
+  },
+  layout: {
+    type: Object,
+  },
+  onEdge: {
+    type: Function,
+  },
+});
+
+const measures = (item) => {
+  return {
+    width: item.width,
+    height: item.height,
+    marginRight: item.marginRight,
+  };
+};
+const provideData = () => {
+  return props.data;
+};
+</script>
+
+<template>
+  <jsv-focus-block>
+    <metro-widget
+      :name="name"
+      :width="layout.width"
+      :height="layout.height"
+      :provideData="provideData"
+      :direction="HORIZONTAL"
+      :measures="measures"
+      :onEdge="onEdge"
+      :padding="{
+        top: 30,
+        left: 60,
+        right: 60,
+      }"
+    >
+      <template #renderItem="{ data, query, onAction }">
+        <tab-item :data="data" :query="query" :onAction="onAction"></tab-item>
+      </template>
+    </metro-widget>
+  </jsv-focus-block>
+</template>

package/MetroWidgetDemos/PingPong/TabItem.vue

@@ -0,0 +1,84 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-07-12 14:52:53
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-09-01 17:10:14
+ * @Description: file content
+-->
+<script setup>
+import { ref, shallowRef, inject } from "vue";
+
+const props = defineProps({
+  data: Object,
+  query: Object,
+  onAction: Object,
+});
+
+const globalInfo = inject("globalInfo");
+
+const focused = ref(false);
+const active = ref(false);
+
+// 自身的焦点状态自己记录, 通过回调来改变
+const onFocus = () => {
+  globalInfo.tabId = props.query.id;
+  focused.value = true;
+  active.value = false;
+};
+const onBlur = () => {
+  focused.value = false;
+  active.value =
+    props.query.getCurrentFocusId().id === props.query.id ? true : false;
+};
+const onClick = () => {
+  console.log("tab 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 && active"
+      :style="{
+        left: -2,
+        top: -2,
+        width: data.width + 4,
+        height: data.height + 4,
+        backgroundColor: '#00FF00',
+      }"
+    ></div>
+    <div
+      v-if="focused"
+      :style="{
+        left: -2,
+        top: -2,
+        width: data.width + 4,
+        height: data.height + 4,
+        backgroundColor: '#FF0000',
+      }"
+    ></div>
+    <div
+      :style="{
+        width: data.width,
+        height: data.height,
+        fontSize: '30px',
+        color: '#FFFFFF',
+        backgroundColor: data.color,
+      }"
+    >
+      {{ data.content }}
+    </div>
+  </div>
+</template>

package/MetroWidgetDemos/PingPong/ViewSwiper.vue

@@ -0,0 +1,214 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-07-12 10:30:33
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-09-01 17:05:07
+ * @Description: file content
+-->
+<script>
+import AppPage from "./AppPage.vue";
+import { getKeyFramesGroup } from "jsview";
+import { reactive, ref, shallowRef } from "vue";
+
+export default {
+  components: {
+    AppPage,
+  },
+  props: {
+    name: {
+      type: String,
+    },
+    curIndex: {
+      type: Object,
+    },
+    pageData: {
+      type: Array,
+    },
+    onEdge: {
+      type: Function,
+    },
+    layout: {
+      type: Object,
+    },
+    duration: {
+      type: Number,
+      default: 0.3,
+    },
+  },
+  inject: ["globalInfo"],
+  provide() {
+    return {
+      animState: this.animState,
+    };
+  },
+  setup() {
+    let styleShell = getKeyFramesGroup();
+    let animState = reactive({
+      value: 0, //0: 不在动画， 在动画中
+    });
+    return {
+      refName0: "page0",
+      refName1: "page1",
+      styleShell,
+      animState,
+    };
+  },
+  data() {
+    return {
+      curPage: 0,
+      page0Show: true,
+      page1Show: false,
+      page0Data: this.pageData[0],
+      page1Data: null,
+      page0Left: 0,
+      page1Left: 1280,
+      page0Anim: {
+        anim: "",
+        onend: null,
+      },
+      page1Anim: {
+        anim: "",
+        onend: null,
+      },
+    };
+  },
+  methods: {
+    $_appSwiper_onFocus() {
+      let curPageData = this.curPage === 0 ? this.page0Data : this.page1Data;
+      this.$refs.focusNode?.findBlockByName(curPageData.name).requestFocus();
+    },
+    $_appSwiper_tabIdWatcher(newValue, oldValue) {
+      console.log("AppSwiper curIndex changed ", newValue, oldValue);
+      if (newValue != oldValue) {
+        let direction = newValue > oldValue ? "left" : "right";
+        if (this.curPage == 0) {
+          this.curPage = 1;
+          this.page1Data = this.pageData[newValue];
+          this.page1Show = true;
+          this.animState.value = 1;
+          this.page0Anim = {
+            anim: `app-swiper-${direction}-slide-out ${this.duration}s`,
+            onend: () => {
+              this.page0Show = false;
+              this.page0Data = null;
+              this.animState.value = 0;
+            },
+          };
+          this.page1Anim = {
+            anim: `app-swiper-${direction}-slide-in ${this.duration}s`,
+            onend: null,
+          };
+        } else {
+          this.curPage = 0;
+          this.page0Data = this.pageData[newValue];
+          this.page0Show = true;
+          this.animState.value = 1;
+          this.page0Anim = {
+            anim: `app-swiper-${direction}-slide-in ${this.duration}s`,
+            onend: null,
+          };
+          this.page1Anim = {
+            anim: `app-swiper-${direction}-slide-out ${this.duration}s`,
+            onend: () => {
+              this.page1Show = false;
+              this.page1Data = null;
+              this.animState.value = 0;
+            },
+          };
+        }
+      }
+    },
+    $_appSwiper_initAnimation() {
+      let leftSlideOutDefine = `@keyframes app-swiper-left-slide-out {
+        from {
+          transform: translate3d(0px, 0px, 0px);
+        }
+        to {
+          transform: translate3d(${-this.layout.width}px, 0px, 0px);
+        }
+      }`;
+      let leftSlideInDefine = `@keyframes app-swiper-left-slide-in {
+        from {
+          transform: translate3d(${this.layout.width}px, 0px, 0px);
+        }
+        to {
+          transform: translate3d(0px, 0px, 0px);
+        }
+      }`;
+      let rightSlideOutDefine = `@keyframes app-swiper-right-slide-out {
+        from {
+          transform: translate3d(0px, 0px, 0px);
+        }
+        to {
+          transform: translate3d(${this.layout.width}px, 0px, 0px);
+        }
+      }`;
+      let rightSlideInDefine = `@keyframes app-swiper-right-slide-in {
+        from {
+          transform: translate3d(${-this.layout.width}px, 0px, 0px);
+        }
+        to {
+          transform: translate3d(0px, 0px, 0px);
+        }
+      }`;
+      this.styleShell.insertRule(leftSlideOutDefine);
+      this.styleShell.insertRule(leftSlideInDefine);
+      this.styleShell.insertRule(rightSlideOutDefine);
+      this.styleShell.insertRule(rightSlideInDefine);
+    },
+    $_appSwiper_releaseAnimation() {
+      this.styleShell.removeRule("app-swiper-left-slide-out");
+      this.styleShell.removeRule("app-swiper-left-slide-in");
+      this.styleShell.removeRule("app-swiper-right-slide-out");
+      this.styleShell.removeRule("app-swiper-right-slide-in");
+    },
+  },
+  created() {
+    console.log("AppSwiper created", this.globalInfo);
+    this.$watch(() => this.globalInfo.tabId, this.$_appSwiper_tabIdWatcher);
+    this.$_appSwiper_initAnimation();
+  },
+  beforeUnmount() {
+    this.$_appSwiper_releaseAnimation();
+  },
+};
+</script>
+
+<template>
+  <jsv-focus-block
+    :name="name"
+    ref="focusNode"
+    :onAction="{
+      onFocus: $_appSwiper_onFocus,
+    }"
+  >
+    <div
+      :style="{
+        animation: page0Anim.anim,
+        animationFillMode: 'forwards',
+      }"
+      :onAnimationEnd="page0Anim.onend"
+    >
+      <app-page
+        v-if="page0Show"
+        :data="page0Data"
+        :name="page0Data.name"
+        :onEdge="onEdge"
+      ></app-page>
+    </div>
+    <div
+      :style="{
+        animation: page1Anim.anim,
+        animationFillMode: 'forwards',
+      }"
+      :onAnimationEnd="page1Anim.onend"
+    >
+      <app-page
+        v-if="page1Show"
+        :data="page1Data"
+        :name="page1Data.name"
+        :onEdge="onEdge"
+      ></app-page>
+    </div>
+  </jsv-focus-block>
+</template>

package/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 focusHub = 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) {
+    focusHub.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/MetroWidgetDemos/Simple/App.vue

@@ -0,0 +1,45 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-07-11 13:31:36
+ * @LastEditors: ChenChanghua
+ * @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 { useFocusHub } from "jsview";
+import AbsoluteTemplate from "./AbsoluteTemplate.vue";
+import RelativeTemplate from "./RelativeTemplate.vue";
+
+const router = useRouter();
+const focusHub = useFocusHub();
+
+const onFocus = () => {
+  focusHub.setFocus("button");
+};
+const onKeyDown = (ev) => {
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    router.go(-1);
+  }
+  return true;
+};
+</script>
+
+<template>
+  <jsv-focus-block
+    autoFocus
+    :onAction="{
+      onKeyDown,
+      onFocus,
+    }"
+    :style="{
+      width: 1920,
+      height: 1080,
+      backgroundColor: '#007788',
+    }"
+  >
+    <absolute-template></absolute-template>
+    <relative-template></relative-template>
+  </jsv-focus-block>
+</template>

package/MetroWidgetDemos/Simple/RelativeTemplate.vue

@@ -0,0 +1,111 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-07-11 13:31:36
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-07-18 10:07:01
+ * @Description: file content
+-->
+<script setup>
+import { MetroWidget, WholePageSlide, HORIZONTAL, EdgeDirection } from "jsview";
+import { ref, shallowRef } from "vue";
+import { useFocusHub } from "jsview";
+import { simpleData } from "../data";
+import Item from "../Item.vue";
+
+const focusHub = useFocusHub();
+const mwRef = shallowRef(null);
+
+const wholePageSlide = new WholePageSlide();
+let innerData = simpleData.concat();
+let dataPool = [];
+
+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;
+    focusHub.setFocus("button");
+  } else if (edgeInfo.direction == EdgeDirection.right) {
+    focusHub.setFocus("mwAbs");
+  }
+};
+
+const buttonFocus = ref(true);
+const buttonOnKeyDown = (ev) => {
+  switch (ev.keyCode) {
+    case 40:
+      buttonFocus.value = false;
+      focusHub.setFocus("mw");
+      return true;
+    case 13:
+      if (innerData.length == simpleData.length) {
+        innerData = [];
+        dataPool = simpleData.concat();
+      } else {
+        innerData.push(dataPool.shift());
+      }
+      mwRef.value?.refreshData(true);
+      return true;
+  }
+  return false;
+};
+</script>
+
+<template>
+  <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>
+</template>