@shijiu/jsview-vue 0.9.490 → 0.9.590

package/samples/ClassNameDemo/components/ContentItem.vue

@@ -1,253 +0,0 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2021-06-10 14:17:17
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2021-06-28 16:53:49
- * @Description: file content
--->
-<script>
-import { Options, Vue, setup } from "vue-class-component";
-import posterHolder from "../assets/holder_logo.png";
-import couponLeft from "../assets/coupon_left.png";
-import couponRight from "../assets/coupon_right.png";
-import couponMid from "../assets/coupon_mid.png";
-import borderLeft from "../assets/line_left.png";
-import borderMid from "../assets/line_mid.png";
-import borderRight from "../assets/line_right.png";
-
-@Options({
-  props: {
-    data: Object
-  },
-})
-
-
-class ContentItem extends Vue {
-  constructor(props) {
-    super(props);
-
-    this.focused = false;
-    this.setup = setup(() => {
-      return {
-        posterHolder,
-        couponLeft,
-        couponMid,
-        couponRight,
-        borderLeft,
-        borderMid,
-        borderRight,
-      };
-    });
-  }
-
-  focus() {
-    this.focused = true;
-  }
-
-  blur() {
-    this.focused = false;
-  }
-
-  get focusTransform() {
-    return this.focused ? "scale3d(1.2, 1.2, 1)" : null;
-  }
-
-  get savePrizeWidth() {
-    return 10 * this.data.savePrize.length + 26;
-  }
-
-  get soldTotalWidth() {
-    let width = 44 + 22; //base width;
-    if (this.data.soldTotal >= 10000) {
-      let text = parseInt(this.data.soldTotal / 10000) + "";
-      width += text.length * 12 + 22;
-    } else {
-      width += (this.data.soldTotal + "").length * 12;
-    }
-    return width;
-  }
-
-  get soldTotalText() {
-    let text = "";
-    if (this.data.soldTotal >= 10000) {
-      text = parseInt(this.data.soldTotal / 10000) + "万";
-    } else {
-      text = this.data.soldTotal;
-    }
-    return text;
-  }
-}
-
-export default ContentItem;
-</script>
-
-<template>
-  <div class="frame-background"
-      :style="{
-        transform: focusTransform,
-      }"
-  >
-    <div class="poster-holder">
-      <div
-        :style="{
-          width: 107,
-          height: 23,
-          left: 53,
-          top: 95,
-          backgroundImage: setup.posterHolder,
-        }"
-      />
-    </div>
-    <div class="poster"
-        :style="{
-          backgroundImage: `url(${data.pictUrl})`,
-        }"
-    />
-    <div class="title-font title-layout">
-      {{ data.index + data.name }}
-    </div>
-    <div
-      :style="{
-        height: 24,
-        left: 13,
-        top: 256,
-        width: savePrizeWidth,
-      }"
-    >
-      <div :style="{ width: 5, height: 24, backgroundImage: setup.couponLeft }" />
-      <div
-        :style="{
-          left: 5,
-          width: savePrizeWidth - 11,
-          height: 24,
-          backgroundImage: setup.couponMid,
-        }"
-      />
-      <div
-        :style="{
-          left: savePrizeWidth - 6,
-          width: 5,
-          height: 24,
-          backgroundImage: setup.couponRight,
-        }"
-      />
-      <div class="ticket-text"
-        :style="{
-          width: savePrizeWidth,
-        }"
-      >
-        {{ `${data.savePrize}元券` }}
-      </div>
-    </div>
-
-    <div
-      :style="{
-        top: 256,
-        left: 27 + savePrizeWidth,
-      }"
-    >
-      <div :style="{ width: 7, height: 25, backgroundImage: setup.borderLeft }" />
-      <div
-        :style="{
-          left: 7,
-          width: soldTotalWidth - 13,
-          height: 25,
-          backgroundImage: setup.borderMid,
-        }"
-      />
-      <div
-        :style="{
-          left: soldTotalWidth - 7,
-          width: 7,
-          height: 25,
-          backgroundImage: setup.borderRight,
-        }"
-      />
-      <div class="sold-text"
-          :style="{
-            width: soldTotalWidth,
-          }"
-      >
-        {{ `已售${soldTotalText}件` }}
-      </div>
-    </div>
-
-    <div class="prize-title-font prize-title-layout">券后</div>
-    <div class="prize-font">
-      {{ `¥${data.prize - data.savePrize}` }}
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.frame-background {
-  width: 213px;
-  height: 337px;
-  border-radius: 10px 10px 10px 10px;
-  background-color: #f7f7f4;
-  transition: transform 0.2s linear;
-}
-
-.poster-holder {
-  width: 213px;
-  height: 213px;
-  border-radius: 10px 10px 0px 0px;
-  background-color: #cfcac6;
-}
-.poster {
-  width: 213px;
-  height: 213px;
-  border-radius: 7px 7px 0px 0px;
-}
-
-.title-font {
-  font-size: 21px;
-  color: #73665c;
-  line-height: 29px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  text-align: center;
-}
-.title-layout {
-  top: 221;
-  left: 13;
-  width: 193px;
-  height: 29px;
-}
-.ticket-text {
-  height: 24;
-  color: #ffffff;
-  font-size: 16px;
-  text-align: center;
-  line-height: 24px;
-}
-.sold-text {
-  height: 25px;
-  color: #ff7a00;
-  font-size: 20px;
-  text-align: center;
-  line-height: 25px;
-}
-.prize-title-layout {
-  width: 35px;
-  height: 24px;
-  top: 296;
-  left: 13;
-}
-.prize-title-font {
-  color: #de2825;
-  text-align: center;
-  font-size: 17px;
-  line-height: 24px;
-}
-.prize-font {
-  top: 289;
-  left: 53;
-  width: 158; /*213 - 55*/
-  height: 37px;
-  line-height: 37px;
-  font-size: 28px;
-  color: #de2825;
-}
-</style>

package/samples/ClassNameDemo/components/LoadingView.vue

@@ -1,43 +0,0 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2021-06-15 18:29:33
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2021-06-22 19:31:25
- * @Description: file content
--->
-<template>
-  <div>
-    <div class="text">
-      加载中
-    </div>
-    <div class="anim"/>
-  </div>
-</template>
-
-<style scoped>
-.text {
-  width: 1160;
-  height: 50px;
-  text-align: center;
-  background-color: rgba(255,0,0,0.5);
-  font-size: 40px;
-}
-
-.anim {
-  top: 10;
-  left: 500;
-  width: 30;
-  height: 30;
-  background-color: #FFFFFF;
-  animation: myRotate 1s infinite;
-}
-
-@keyframes myRotate {
-  from {
-    transform: rotate3d(0, 0, 1, 0);
-  }
-  to {
-    transform: rotate3d(0, 0, 1, 360deg);
-  }
-}
-</style>

package/samples/ClassNameDemo/components/TitleView.vue

@@ -1,24 +0,0 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2021-06-15 18:29:33
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2021-06-22 19:31:25
- * @Description: file content
--->
-<template>
-<div class="text">
-  使用ClassName写法可提升渲染性能
-</div>
-</template>
-
-<style scoped>
-.text {
-  width: 1080;
-  height: 50;
-  text-align: center;
-  font-size: 30px;
-  line-height: 50px;
-  color: #ffffff;
-  background-color: rgba(27,38,151,0.8);
-}
-</style>

package/samples/ClassNameDemo/data.js

@@ -1,24 +0,0 @@
-/*
- * @Author: ChenChanghua
- * @Date: 2021-06-08 13:32:38
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2021-06-22 19:33:26
- * @Description: file content
- */
-let data = [];
-
-// 添加300个模拟数据
-for (let i = 0; i < 183; i++) {
-  data.push({
-    index: i,
-    name: `商品：骆驼奶粉蛋白质粉，限时抢购，立刻发货，序号:${i}`,
-    prize: `${Math.floor(Math.random() * 200) +
-      200}` /* 测试数据要保证比最高优惠券(300左右)要高 */,
-    savePrize: `${i}`,
-    soldTotal: `${Math.floor(Math.random() * 50000)}`,
-    pictUrl:
-      "http://img.alicdn.com/bao/uploaded/i3/2207313464483/O1CN01Ab4vWz1izGAyRL1Yf_!!0-item_pic.jpg",
-  });
-}
-
-export { data };

package/samples/FlowMultiWidget/App.vue

@@ -1,91 +0,0 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2021-09-27 13:49:00
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2021-10-15 14:31:05
- * @Description: file content
--->
-<script>
-import { menuData, contentData } from "./data.js";
-import FlowPage from "./components/FlowPage.vue";
-import borderImg from "./assets/nine_patch_focus.png";
-import MyMenu from "./components/MyMenu.vue";
-import { ref } from "vue";
-
-export default {
-  components: {
-    FlowPage,
-    MyMenu,
-  },
-  setup() {
-    let showMenu = ref(false);
-    return {
-      menuData,
-      contentData,
-      borderImg,
-      showMenu,
-    };
-  },
-  methods: {
-    onFocus() {
-      this.$refs.rootNode.findBlockByName("/flow").requestFocus();
-    },
-    onKeyDown(ev) {
-      if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-        if (this.showMenu) {
-          this.showMenu = false;
-          this.$refs.rootNode.findBlockByName("/flow").requestFocus();
-        } else {
-          this.$router?.go(-1); // 有router时，是从DemoHomepage进入，回退
-        }
-        return true;
-      }
-
-      switch (ev.keyCode) {
-        case 10001:
-        case 77:
-          //menu key or M
-          this.showMenu = true;
-          //menu自动获得焦点
-          break;
-        case 10000:
-        case 82:
-          //back key or R
-          if (this.showMenu) {
-            this.showMenu = false;
-            this.$refs.rootNode.findBlockByName("/flow").requestFocus();
-          }
-          break;
-      }
-      return true;
-    },
-  },
-};
-</script>
-
-<template>
-  <div
-    :style="{
-      width: 1920,
-      height: 1080,
-      backgroundColor: '#123f80',
-    }"
-  >
-    <div
-      :style="{
-        top: 50,
-        left: 50,
-      }"
-    >
-      <jsv-focus-block
-        ref="rootNode"
-        autoFocus
-        :onKeyDown="onKeyDown"
-        :onFocus="onFocus"
-      >
-        <flow-page name="/flow" :data="contentData" />
-        <my-menu v-if="showMenu" :data="menuData" name="/menu" />
-      </jsv-focus-block>
-    </div>
-  </div>
-</template>

package/samples/FlowMultiWidget/components/Block.vue

@@ -1,107 +0,0 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2021-09-27 13:49:54
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2021-10-15 11:02:22
- * @Description: file content
--->
-<script>
-import {
-  HORIZONTAL,
-  SimpleWidget,
-  SWidgetDispatcher,
-} from "jsview/utils/JsViewEngineWidget";
-import Item from "./Item.vue";
-
-export default {
-  components: {
-    SimpleWidget,
-    Item,
-  },
-  props: {
-    data: Object,
-    query: Object,
-    onEdge: Function,
-    onAction: Object,
-    name: String,
-  },
-  setup() {
-    let measures = () => {
-      return {
-        width: 105,
-        height: 162,
-        focusable: true,
-        hasSub: false,
-      };
-    };
-    let dispatcher = new SWidgetDispatcher();
-    return {
-      direction: HORIZONTAL,
-      measures,
-      dispatcher,
-    };
-  },
-  methods: {
-    onFocus(enterRect) {
-      if (enterRect) {
-        const foucsInfo = {
-          type: SWidgetDispatcher.Type.setFocusRect,
-          data: enterRect,
-        };
-        this.dispatcher.dispatch(foucsInfo);
-      }
-      this.$refs.focusNode.findBlockByName(this.name).requestFocus();
-    },
-    onBlur() {
-    },
-    onClick() {
-    },
-  },
-  created() {
-    this.onAction.register("onFocus", this.onFocus);
-    this.onAction.register("onBlur", this.onBlur);
-    this.onAction.register("onClick", this.onClick);
-  },
-};
-</script>
-
-<template>
-  <div class="text">
-    {{ data.title }}
-  </div>
-  <div :style="{ top: 50 }">
-    <jsv-focus-block ref="focusNode">
-      <simple-widget
-        :name="name"
-        :width="data.blocks.w"
-        :height="data.blocks.h"
-        :direction="direction"
-        :padding="{ left: 10, top: 10 }"
-        :data="data.data"
-        :measures="measures"
-        :onEdge="onEdge"
-        :dispatcher="dispatcher"
-      >
-        <template #renderItem="{ data, query, onEdge, onAction }">
-          <item
-            :data="data"
-            :query="query"
-            :onEdge="onEdge"
-            :onAction="onAction"
-          />
-        </template>
-      </simple-widget>
-    </jsv-focus-block>
-  </div>
-</template>
-
-
-<style scoped>
-.text {
-  width: 105px;
-  height: 50px;
-  color: #ffffff;
-  font-size: 25px;
-  line-height: 50px;
-}
-</style>

package/samples/FlowMultiWidget/components/FlowPage.vue

@@ -1,60 +0,0 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2021-09-27 13:50:40
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2021-09-28 14:38:05
- * @Description: file content
--->
-<script>
-import {
-  VERTICAL,
-  SimpleWidget,
-} from "jsview/utils/JsViewEngineWidget";
-import Block from "./Block.vue";
-
-export default {
-  components: {
-    Block,
-    SimpleWidget,
-  },
-  props: {
-    data: Object,
-    name: String,
-  },
-  setup() {
-    let measures = () => {
-      return {
-        width: 800,
-        height: 200,
-        focusable: true,
-        hasSub: false,
-      };
-    };
-    return {
-      direction: VERTICAL,
-      measures,
-    };
-  },
-};
-</script>
-
-<template>
-  <simple-widget
-    :name="name"
-    :width="800"
-    :height="600"
-    :direction="direction"
-    :data="data"
-    :measures="measures"
-  >
-    <template #renderItem="{ data, query, onEdge, onAction }">
-      <block
-        :name="name + '/block_' + query.id"
-        :data="data"
-        :query="query"
-        :onEdge="onEdge"
-        :onAction="onAction"
-      />
-    </template>
-  </simple-widget>
-</template>

package/samples/FlowMultiWidget/components/Item.vue

@@ -1,103 +0,0 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2021-09-27 13:49:54
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2021-10-15 10:53:13
- * @Description: file content
--->
-<script>
-import borderImg from "../assets/nine_patch_focus.png";
-
-export default {
-  props: {
-    data: Object,
-    query: Object,
-    onEdge: Function,
-    onAction: Object,
-  },
-  computed: {
-    imgClass() {
-      return this.focused ? "focus" : "blur";
-    },
-  },
-  setup(props) {
-    let borderStyle = {
-      borderImage: `url(${borderImg}) 40 fill`,
-      borderImageOutset: "28px 28px 28px 28px",
-      borderImageWidth: "40px",
-      width: 89,
-      height: 121,
-    };
-    let imageStyle = {
-      backgroundImage: props.data.content.url,
-      width: 89,
-      height: 121,
-      borderRadius: "8px 8px 8px 8px",
-    };
-    return {
-      borderImg,
-      borderStyle,
-      imageStyle,
-    };
-  },
-  data() {
-    return {
-      focused: false,
-    };
-  },
-  methods: {
-    onFocus() {
-      this.focused = true;
-    },
-    onBlur() {
-      this.focused = false;
-    },
-    onClick() {},
-  },
-  created() {
-    this.onAction.register("onFocus", this.onFocus);
-    this.onAction.register("onBlur", this.onBlur);
-    this.onAction.register("onClick", this.onClick);
-  },
-};
-</script>
-
-<template>
-  <div :class="imgClass">
-    <div :style="imageStyle" />
-    <div v-if="focused" :style="borderStyle" />
-  </div>
-  <div class="text">
-    {{ this.data.content.title }}
-  </div>
-</template>
-
-<style scoped>
-.focus {
-  width: 89px;
-  height: 121px;
-  transform: scale3d(1.05, 1.05, 1);
-  border-radius: 8px 8px 8px 8px;
-  transition: transform 0.25s linear;
-}
-
-.blur {
-  width: 89px;
-  height: 121px;
-  transform: scale3d(1, 1, 1);
-  border-radius: 8px 8px 8px 8px;
-  transition: transform 0.25s linear;
-}
-
-.text {
-  top: 121px;
-  width: 89px;
-  height: 25px;
-  color: #ffffff;
-  font-size: 12px;
-  line-height: 25px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-</style>