@shijiu/jsview-vue 0.9.766 → 0.9.804

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/Simple/AbsoluteTemplate.vue

@@ -1,75 +0,0 @@
-<!--
- * @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/samples/MetroWidgetDemos/Simple/App.vue

@@ -1,45 +0,0 @@
-<!--
- * @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/samples/MetroWidgetDemos/Simple/RelativeTemplate.vue

@@ -1,111 +0,0 @@
-<!--
- * @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>

package/samples/MetroWidgetDemos/data.js

@@ -1,205 +0,0 @@
-/*
- * @Author: ChenChanghua
- * @Date: 2022-07-11 14:00:33
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-11-02 15:23:08
- * @Description: file content
- */
-
-const randomColor = () => {
-  let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
-  return (
-    "#" + new Array(6 - randomColor.length).fill("0").join("") + randomColor
-  );
-};
-
-const simpleData = [
-  {
-    width: 90,
-    height: 90,
-    marginRight: 10,
-    marginBottom: 10,
-    color: randomColor(),
-    content: "0",
-  },
-  {
-    width: 90,
-    height: 90,
-    marginRight: 10,
-    marginBottom: 10,
-    color: randomColor(),
-    content: "1",
-  },
-  {
-    width: 90,
-    height: 90,
-    marginRight: 10,
-    marginBottom: 10,
-    color: randomColor(),
-    content: "2",
-  },
-  {
-    width: 190,
-    height: 190,
-    marginRight: 10,
-    marginBottom: 10,
-    color: randomColor(),
-    content: "3",
-  },
-  {
-    width: 90,
-    height: 90,
-    marginRight: 10,
-    marginBottom: 10,
-    color: randomColor(),
-    content: "4",
-  },
-  {
-    width: 90,
-    height: 90,
-    marginRight: 10,
-    marginBottom: 10,
-    color: randomColor(),
-    content: "5",
-  },
-  {
-    width: 90,
-    height: 190,
-    marginRight: 10,
-    marginBottom: 10,
-    color: randomColor(),
-    content: "6",
-  },
-  {
-    width: 90,
-    height: 90,
-    marginRight: 10,
-    marginBottom: 10,
-    color: randomColor(),
-    content: "7",
-  },
-  {
-    width: 90,
-    height: 190,
-    marginRight: 10,
-    marginBottom: 10,
-    color: randomColor(),
-    content: "8",
-  },
-  {
-    width: 90,
-    height: 90,
-    marginRight: 10,
-    marginBottom: 10,
-    color: randomColor(),
-    content: "9",
-  },
-];
-
-const simpleDataAbs = [
-  {
-    left: 0,
-    top: 0,
-    width: 90,
-    height: 90,
-    marginRight: 10,
-    marginBottom: 10,
-    color: randomColor(),
-    content: "0",
-  },
-  {
-    left: 0,
-    top: 200,
-    width: 90,
-    height: 90,
-    marginRight: 10,
-    marginBottom: 10,
-    color: randomColor(),
-    content: "1",
-  },
-  {
-    left: 200,
-    top: 0,
-    width: 90,
-    height: 90,
-    marginRight: 10,
-    marginBottom: 10,
-    color: randomColor(),
-    content: "2",
-  },
-  {
-    left: 200,
-    top: 200,
-    width: 90,
-    height: 90,
-    marginRight: 10,
-    marginBottom: 10,
-    color: randomColor(),
-    content: "3",
-  },
-  {
-    left: 400,
-    top: 0,
-    width: 90,
-    height: 90,
-    marginRight: 10,
-    marginBottom: 10,
-    color: randomColor(),
-    content: "4",
-  },
-  {
-    left: 400,
-    top: 200,
-    width: 90,
-    height: 90,
-    marginRight: 10,
-    marginBottom: 10,
-    color: randomColor(),
-    content: "5",
-  },
-];
-
-const advanceButton = [];
-for (let i = 0; i < 6; i++) {
-  advanceButton.push({
-    width: 100,
-    height: 50,
-    name: "button_" + i,
-    marginRight: 10,
-    marginBottom: 10,
-  });
-}
-
-const advanceMetroWidget = [];
-for (let i = 0; i < 10; i++) {
-  advanceMetroWidget.push({
-    width: 500,
-    height: 170,
-    name: "widget_" + i,
-    marginBottom: 10,
-    index: i,
-  });
-}
-
-const advanceMix = [];
-for (let i = 0; i < 6; i++) {
-  advanceMix.push({
-    width: 100,
-    height: 50,
-    name: "mix_button_" + i,
-    marginRight: 10,
-    marginBottom: 10,
-    type: i % 3 == 0 ? "button" : "item",
-    color: randomColor(),
-    content: i,
-  });
-}
-
-export {
-  randomColor,
-  simpleData,
-  simpleDataAbs,
-  advanceButton,
-  advanceMetroWidget,
-  advanceMix,
-};

package/utils/JsViewVueWidget/JsvSwiper/Indicator.vue

@@ -1,35 +0,0 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2021-11-23 09:44:44
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2021-11-23 17:11:08
- * @Description: file content
--->
-<script>
-export default {
-  props: {
-    number: Number,
-    vertical: Boolean,
-    itemSize: Number,
-    current: Number,
-  },
-  computed: {
-    indexList() {
-      return new Array(this.number).fill(0).map((_, index) => {
-        return index;
-      });
-    },
-  },
-};
-</script>
-
-<template>
-  <div
-    v-for="index in indexList"
-    :key="index"
-    :style="vertical ? { top: itemSize * index } : { left: itemSize * index }"
-  >
-    <slot v-if="index == current" name="current"></slot>
-    <slot v-else name="normal"></slot>
-  </div>
-</template>