@shijiu/jsview-vue 0.9.502 → 0.9.590

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>

package/samples/FlowMultiWidget/components/MenuItem.vue

@@ -1,72 +0,0 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2021-09-28 16:02:50
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2021-09-28 16:22:24
- * @Description: file content
--->
-<!--
- * @Author: ChenChanghua
- * @Date: 2021-09-27 13:49:54
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2021-09-28 15:42:49
- * @Description: file content
--->
-<script>
-export default {
-  props: {
-    data: Object,
-    query: Object,
-    onEdge: Function,
-    onAction: Object,
-  },
-  computed: {
-    bgStyle() {
-      return {
-        width: 280,
-        height: 40,
-        backgroundColor: this.isFocus ? "#06a7ff" : "#575d8d",
-      };
-    },
-  },
-  data() {
-    return {
-      isFocus: false,
-    };
-  },
-  methods: {
-    onFocus() {
-      this.isFocus = true;
-    },
-    onBlur() {
-      this.isFocus = false;
-    },
-    onClick() {},
-  },
-  created() {
-    this.onAction.register("onFocus", this.onFocus);
-    this.onAction.register("onBlur", this.onBlur);
-    this.onAction.register("onClick", this.onClick);
-  },
-};
-</script>
-
-<template>
-  <div :style="bgStyle">
-    <div class="text">
-      {{ data.title }}
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.text {
-  width: 280px;
-  height: 40px;
-  color: #ececec;
-  font-size: 12px;
-  line-height: 40px;
-  white-space: nowrap;
-  text-align: left;
-}
-</style>

package/samples/FlowMultiWidget/components/MyMenu.vue

@@ -1,90 +0,0 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2021-09-27 13:49:54
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2021-10-25 09:56:36
- * @Description: file content
--->
-<script>
-import {
-  VERTICAL,
-  SimpleWidget,
-} from "jsview/utils/JsViewEngineWidget";
-import MenuItem from "./MenuItem.vue";
-
-export default {
-  components: {
-    SimpleWidget,
-    MenuItem,
-  },
-  props: {
-    data: Array,
-    name: String,
-  },
-  setup() {
-    let measures = () => {
-      return {
-        width: 280,
-        height: 50,
-        focusable: true,
-        hasSub: false,
-      };
-    };
-    return {
-      direction: VERTICAL,
-      measures,
-    };
-  },
-  mounted() {
-    this.$refs.focusNode.findBlockByName(this.name).requestFocus();
-  },
-};
-</script>
-
-<template>
-  <div
-    :style="{
-      left: (1280 - 300) / 2,
-      top: (720 - 255) / 2,
-      width: 300,
-      height: 255,
-      backgroundColor: '#000000',
-    }"
-  >
-    <div class="title">菜单</div>
-    <div :style="{ left: 10, top: 45 }">
-      <jsv-focus-block ref="focusNode">
-        <simple-widget
-          :name="name"
-          :width="280"
-          :height="200"
-          :direction="direction"
-          :data="data"
-          :measures="measures"
-        >
-          <template #renderItem="{ data, query, onEdge, onAction }">
-            <menu-item
-              :data="data"
-              :query="query"
-              :onEdge="onEdge"
-              :onAction="onAction"
-            />
-          </template>
-        </simple-widget>
-      </jsv-focus-block>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.title {
-  top: 10px;
-  left: 40px;
-  width: 200px;
-  height: 25px;
-  color: #ffffff;
-  font-size: 22px;
-  white-space: nowrap;
-  text-align: center;
-}
-</style>