@shijiu/jsview-vue 1.9.727 → 1.9.747

package/samples/MetroWidgetDemos/Advanced/App.vue

@@ -1,46 +0,0 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2022-07-11 13:31:36
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-11-02 14:51:40
- * @Description: file content
--->
-<script setup>
-import { MetroWidget, VERTICAL, EdgeDirection, useFocusHub } from "jsview";
-import { useRouter } from "vue-router";
-import Buttons from "./Buttons.vue";
-import Mixed from "./Mixed.vue";
-import Widgets from "./widgets/Widgets.vue";
-
-const router = useRouter();
-const focusHub = useFocusHub();
-
-const onFocus = () => {
-  focusHub.setFocus("mwButton");
-};
-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',
-    }"
-  >
-    <buttons></buttons>
-    <mixed></mixed>
-    <widgets></widgets>
-  </jsv-focus-block>
-</template>

package/samples/MetroWidgetDemos/Advanced/ButtonItem.vue

@@ -1,90 +0,0 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2022-07-11 13:26:24
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-11-02 15:37:33
- * @Description: file content
--->
-<script setup>
-import { ref, shallowRef } from "vue";
-import { useFocusHub } from "jsview";
-
-const props = defineProps({
-  data: Object,
-  query: String,
-  onAction: Object,
-  onItemEdge: Function,
-});
-const focusHub = useFocusHub();
-
-let focusIndex = ref(0);
-let focused = ref(false);
-let focusBlock = shallowRef(null);
-
-const onFocus = () => {
-  //onFocus时, 获得焦点, 以处理自己内部的焦点逻辑
-  focusHub.setFocus(props.data.name);
-  focused.value = true;
-};
-const onBlur = () => {
-  focused.value = false;
-  focusIndex.value = 0;
-  //onBlur的时候, 需要将焦点返还给父
-  focusBlock.value?.returnFocusToParent();
-};
-const onKeyDown = (ev) => {
-  if (ev.keyCode == 37 && focusIndex.value == 1) {
-    focusIndex.value = 0;
-    return true;
-  } else if (ev.keyCode == 39 && focusIndex.value == 0) {
-    focusIndex.value = 1;
-    return true;
-  } else if (ev.keyCode == 13) {
-    console.log("button click", props.data);
-    return true;
-  }
-  return false;
-};
-
-props.onAction.register("onFocus", onFocus);
-props.onAction.register("onBlur", onBlur);
-</script>
-
-<template>
-  <jsv-focus-block
-    ref="focusBlock"
-    :name="data.name"
-    :onAction="{
-      onKeyDown: onKeyDown,
-    }"
-  >
-    <div
-      :style="{
-        width: 50,
-        height: 50,
-        fontSize: 20,
-        color: '#FFFFFF',
-        backgroundColor: '#00AA00',
-      }"
-    ></div>
-
-    <div
-      :style="{
-        left: 50,
-        width: 50,
-        height: 50,
-        backgroundColor: '#0000AA',
-      }"
-    ></div>
-
-    <div
-      :style="{
-        visibility: this.focused ? 'visible' : 'hidden',
-        left: 50 * focusIndex,
-        width: 10,
-        height: 10,
-        backgroundColor: '#FF0000',
-      }"
-    ></div>
-  </jsv-focus-block>
-</template>

package/samples/MetroWidgetDemos/Advanced/Buttons.vue

@@ -1,70 +0,0 @@
-<!--
- * @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 focusHub = 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) {
-    focusHub.setFocus("mwWidget");
-  } else if (edgeInfo.direction == EdgeDirection.bottom) {
-    focusHub.setFocus("mwMix");
-  }
-};
-</script>
-
-<template>
-  <div
-    :style="{
-      left: 50,
-      top: 20,
-      width: 300,
-      height: 400,
-      fontSize: 30,
-      color: '#FFFFFF',
-    }"
-  >
-    {{ `item可以是可获得焦点的控件` }}
-  </div>
-  <metro-widget
-    name="mwButton"
-    :top="120"
-    :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

@@ -1,77 +0,0 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2022-07-11 13:31:36
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-11-02 15:37: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 focusHub = 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) {
-    focusHub.setFocus("mwWidget");
-  } else if (edgeInfo.direction == EdgeDirection.top) {
-    focusHub.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/Item.vue

@@ -1,83 +0,0 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2022-11-01 15:30:14
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-11-02 15:39:17
- * @Description: file content
--->
-<!--
- * @Author: ChenChanghua
- * @Date: 2022-05-10 15:21:24
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-11-01 15:24:26
- * @Description: file content
--->
-<script setup>
-import { ref, shallowRef, inject } from "vue";
-
-const props = defineProps({
-  data: Object,
-  query: Object,
-  onAction: Object,
-});
-
-const divRef = shallowRef(null);
-const focused = ref(false);
-
-const focusSize = inject("focusSize");
-
-// 自身的焦点状态自己记录, 通过回调来改变
-const onFocus = () => {
-  focused.value = true;
-  if (focusSize) {
-    divRef.value?.getBoundingClientRect().then(
-      (data) => {
-        focusSize.width = data.width;
-        focusSize.height = data.height;
-        focusSize.left = data.left;
-        focusSize.top = data.top;
-      },
-      (error) => {
-        console.log("get absolute position failed", error);
-      }
-    );
-  }
-};
-const onBlur = () => {
-  focused.value = false;
-};
-const onClick = () => {
-  console.log("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
-      ref="divRef"
-      :style="{
-        width: data.width,
-        height: data.height,
-        fontSize: '30px',
-        color: '#FFFFFF',
-        backgroundColor: data.color,
-        borderRadius: '10px',
-        animation: animation,
-      }"
-    >
-      {{ data.content }}
-    </div>
-  </div>
-</template>

package/samples/MetroWidgetDemos/Advanced/widgets/WidgetItem.vue

@@ -1,89 +0,0 @@
-
-<script setup>
-import { HORIZONTAL, MetroWidget, useFocusHub } from "jsview";
-import { ref, shallowRef } from "vue";
-import Item from "./Item.vue";
-
-const props = defineProps({
-  data: Object,
-  query: 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) => {
-  //获得焦点时需要做就近移动的处理, 因此需要通过setEnterFocusRect设置寻找最近焦点的区域
-  mwRef.value?.setEnterFocusRect(rect);
-  focusHub.setFocus(props.data.name);
-};
-const onBlur = () => {
-  //onBlur时需要返还焦点给父MetroWidget
-  mwRef.value?.getFocusBlockRef().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"
-    :top="50"
-    :name="data.name"
-    :provideData="provideData"
-    :width="data.width"
-    :height="data.height"
-    :direction="HORIZONTAL"
-    :padding="{
-      left: 30,
-      right: 30,
-      top: 10,
-      bottom: 10,
-    }"
-    :measures="measures"
-    :slideSetting="seamlessSlide"
-    :onEdge="onItemEdge"
-    :sendFocusRectEvent="true"
-  >
-    <template #renderItem="{ data, query, onAction }">
-      <item :data="data" :query="query" :onAction="onAction" />
-    </template>
-  </metro-widget>
-</template>

package/samples/MetroWidgetDemos/Advanced/widgets/Widgets.vue

@@ -1,116 +0,0 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2022-07-11 13:31:36
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-11-02 15:35:12
- * @Description: file content
--->
-<script setup>
-import {
-  MetroWidget,
-  VERTICAL,
-  EdgeDirection,
-  JsvNinePatch,
-  useFocusHub,
-} from "jsview";
-import { advanceMetroWidget } from "../../data";
-import WidgetItem from "../widgets/WidgetItem.vue";
-import focusImg from "./focus1.png";
-import { ref, shallowRef, reactive, provide } from "vue";
-
-const focusHub = useFocusHub();
-const showFocus = ref(false);
-
-const provideData = () => {
-  return advanceMetroWidget;
-};
-
-const onFocus = () => {
-  console.log("testtest", " widget onfocus");
-  showFocus.value = true;
-};
-
-const onBlur = () => {
-  showFocus.value = false;
-};
-
-const focusSize = reactive({
-  width: 0,
-  height: 0,
-  left: 0,
-  top: 0,
-});
-provide("focusSize", focusSize);
-
-// 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) {
-    focusHub.setFocus("mwButton");
-  }
-};
-</script>
-
-<template>
-  <div
-    :style="{
-      left: 500,
-      top: 20,
-      width: 500,
-      height: 400,
-      fontSize: 30,
-      color: '#FFFFFF',
-    }"
-  >
-    {{ `进一步, MetroWidget的item\n可以是包含MetroWidget的组件` }}
-  </div>
-  <!-- 为了保证边缘的item缩放后依旧完整显示, 需要设置padding, 注意width/height是包含padding的 -->
-  <metro-widget
-    name="mwWidget"
-    :top="100"
-    :left="400"
-    :provideData="provideData"
-    :width="660"
-    :height="600"
-    :padding="{ left: 30, right: 30 }"
-    :direction="VERTICAL"
-    :measures="measures"
-    :onEdge="onEdge"
-    :onFocus="onFocus"
-    :onBlur="onBlur"
-  >
-    <!-- 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>
-  <jsv-nine-patch
-    v-show="showFocus"
-    :style="{
-      width: focusSize.width,
-      height: focusSize.height,
-      top: focusSize.top,
-      left: focusSize.left,
-    }"
-    :imageUrl="focusImg"
-    :imageWidth="55"
-    :centerWidth="1"
-    :borderOutset="13"
-    :imageDspWidth="55"
-    :animTime="0.2"
-    :waitForInit="true"
-  ></jsv-nine-patch>
-</template>

package/samples/MetroWidgetDemos/Item.vue

@@ -1,85 +0,0 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2022-05-10 15:21:24
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-11-01 15:24:26
- * @Description: file content
--->
-<script setup>
-import { ref, shallowRef, inject } from "vue";
-
-const props = defineProps({
-  data: Object,
-  query: Object,
-  onAction: Object,
-});
-
-const divRef = shallowRef(null);
-const focused = ref(false);
-
-const focusSize = inject("focusSize");
-
-// 自身的焦点状态自己记录, 通过回调来改变
-const onFocus = () => {
-  focused.value = true;
-  if (focusSize) {
-    divRef.value?.getBoundingClientRect().then(
-      (data) => {
-        console.log("testtest focus size", data)
-        focusSize.width = data.width;
-        focusSize.height = data.height;
-        focusSize.left = data.left;
-        focusSize.top = data.top;
-      },
-      (error) => {
-        console.log("testtest abs failed", error);
-      }
-    );
-  }
-};
-const onBlur = () => {
-  focused.value = false;
-};
-const onClick = () => {
-  console.log("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>
-    <div
-      ref="divRef"
-      :style="{
-        width: data.width,
-        height: data.height,
-        fontSize: '30px',
-        color: '#FFFFFF',
-        backgroundColor: data.color,
-      }"
-    >
-      {{ data.content }}
-    </div>
-  </div>
-</template>