@shijiu/jsview-vue 1.9.727 → 1.9.747

package/samples/Input/InputPanel.vue

@@ -1,131 +0,0 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2022-01-25 10:33:07
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-09-02 13:44:41
- * @Description: file content
--->
-<script>
-import FullKeyboard from "./FullKeyboard.vue";
-import { EdgeDirection, JsvInput, useFocusHub } from "jsview";
-import { ref, shallowRef } from "vue";
-
-const blurColor = "#AAAAAA";
-const focusColor = "#FFFF00";
-
-export default {
-  components: {
-    FullKeyboard,
-    JsvInput,
-  },
-  props: {
-    name: String,
-    type: Number,
-    textAlign: String,
-    placeHolder: String,
-    onEdge: Function,
-  },
-  setup() {
-    return {
-      showCursor: ref(false),
-      focusHub: useFocusHub(),
-      cursorColor: ref(blurColor),
-    };
-  },
-  methods: {
-    _onFocus() {
-      this.showCursor = true;
-      this.cursorColor = blurColor;
-      this.focusHub.setFocus(`${this.name}/keyboard`);
-    },
-    _onBlur() {
-      console.log("testtest onblur");
-      this.showCursor = false;
-      this.cursorColor = blurColor;
-    },
-    _keyboardOnClick(item) {
-      const char = item.content;
-      if (char === "删除") {
-        this.$refs.input?.delete();
-      } else if (char === "清空") {
-        this.$refs.input?.clear();
-      } else {
-        this.$refs.input?.add(char);
-      }
-    },
-    _keyboardOnEdge(edgeInfo) {
-      if (edgeInfo.direction === EdgeDirection.top) {
-        this.focusHub.setFocus(`${this.name}/etext`);
-        this.cursorColor = focusColor;
-      } else {
-        this.onEdge?.(edgeInfo);
-      }
-    },
-    _onTextChange(str) {
-      console.log(this.name + " text change:", str);
-    },
-    _onTextOverflow() {
-      console.log(this.name + " text overflow.");
-    },
-    _inputOnEdge(edgeInfo) {
-      if (edgeInfo.direction === EdgeDirection.bottom) {
-        this.focusHub.setFocus(`${this.name}/keyboard`);
-        this.cursorColor = blurColor;
-      } else {
-        this.onEdge?.(edgeInfo);
-      }
-      return true;
-    },
-  },
-};
-</script>
-
-<template>
-  <jsv-focus-block
-    :name="name"
-    ref="focusNode"
-    :onAction="{
-      onFocus: _onFocus,
-      onBlur: _onBlur,
-    }"
-  >
-    <div
-      :style="{
-        left: 50,
-        top: 50,
-        width: 150,
-        height: 40,
-        backgroundColor: '#33334f',
-      }"
-    />
-    <jsv-input
-      :name="`${this.name}/etext`"
-      ref="input"
-      :type="type"
-      :left="50"
-      :top="50"
-      :height="40"
-      :width="150"
-      :placeholder="placeHolder"
-      :cursorShow="showCursor"
-      :fontStyle="{
-        fontSize: 28,
-        color: '#ffff00',
-        textAlign: textAlign,
-      }"
-      :onEdge="_inputOnEdge"
-      :cursorWidth="2"
-      :onTextChange="_onTextChange"
-      :onTextOverflow="_onTextOverflow"
-      :cursorColor="cursorColor"
-    />
-
-    <div :style="{ top: 100 }">
-      <full-keyboard
-        :name="`${this.name}/keyboard`"
-        :onClick="_keyboardOnClick"
-        :onEdge="_keyboardOnEdge"
-      />
-    </div>
-  </jsv-focus-block>
-</template>

package/samples/Input/KeyboardItem.vue

@@ -1,58 +0,0 @@
-<script>
-export default {
-  props: {
-    data: Object,
-    query: Object,
-    onEdge: Function,
-    onAction: Object,
-    onClick: Function,
-  },
-  data() {
-    return {
-      focused: false,
-    };
-  },
-  computed: {
-    style() {
-      return {
-        width: this.data.width,
-        height: this.data.height,
-        fontSize: 20,
-        textAlign: "center",
-        lineHeight: this.data.height,
-        color: "#FFFFFF",
-      };
-    },
-  },
-  methods: {
-    _onFocus() {
-      this.focused = true;
-    },
-    _onBlur() {
-      this.focused = false;
-    },
-    _onClick() {
-      this.onClick(this.data);
-    },
-  },
-  created() {
-    this.onAction.register("onFocus", this._onFocus);
-    this.onAction.register("onBlur", this._onBlur);
-    this.onAction.register("onClick", this._onClick);
-  },
-};
-</script>
-
-<template>
-  <div
-    v-if="focused"
-    :style="{
-      width: data.width,
-      height: data.height,
-      backgroundColor: '#00FF00',
-    }"
-  />
-  <div ref="element" :style="style">
-    {{ data.content }}
-  </div>
-</template>

package/samples/LongImage/App.vue

@@ -1,80 +0,0 @@
-<!--
- *
- * 【界面概述】
- * 带下拉条的长图片展示样例
- *
- * 【控件介绍】
- * SimpleWidget：见simpleMetrowidget
- *
- * 【技巧说明】
- * Q: 如何让图片的高度自适应？
- * A: 使用img元素，并且style中高度不设置即可
- *    通过element.clientHeight获取渲染后的自动高度，以决定滚动轴的总高度
- *
- * Q: 如何知道图片加载完成？
- * A: 为img标签追加OnLoad回调函数来接收图片加载完成的消息
- *
- -->
-
-<script setup>
-import LongImageScroll from "./LongImageScroll.vue";
-import Button from "./Button.vue";
-import longImageSource from "./assets/1280x7200.jpg";
-import { useRouter } from "vue-router";
-
-const router = useRouter();
-
-const onKeyDown = (ev) => {
-  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-    router.go(-1); // 有router时，是从DemoHomepage进入，回退
-  }
-  return true;
-};
-</script>
-
-
-<template>
-  <jsv-focus-block
-    autoFocus
-    :onAction="{
-      onKeyDown: onKeyDown,
-    }"
-  >
-    <div
-      :style="{
-        textAlign: 'center',
-        fontSize: '30px',
-        lineHeight: '50px',
-        color: '#ffffff',
-        left: 100,
-        top: 20,
-        width: 1000,
-        height: 50,
-        backgroundColor: 'rgba(27,38,151,0.8)',
-      }"
-    >
-      可加载长或宽超过2048px的图片
-    </div>
-    <div :style="{ left: 100, top: 100 }">
-      <LongImageScroll
-        :style="{ width: 1000, height: 500, backgroundColor: '#EEEEEE' }"
-        :imageSrc="longImageSource"
-        :scrollBlockStyle="{
-          width: 10,
-          height: 30,
-          backgroundColor: '#555555',
-        }"
-        :scrollStyle="{
-          left: 1005,
-          width: 10,
-          height: 500,
-          backgroundColor: '#DDDDDD',
-        }"
-        :step="60"
-      />
-      <div :style="{ left: 400, top: 550 }">
-        <Button></Button>
-      </div>
-    </div>
-  </jsv-focus-block>
-</template>

package/samples/LongImage/Button.vue

@@ -1,58 +0,0 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2022-07-08 15:18:02
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-07-08 17:47:25
- * @Description: file content
--->
-<script setup>
-import { ref, shallowRef } from "vue";
-import { HORIZONTAL, MetroWidget, EdgeDirection, useFocusHub } from "jsview";
-import ButtonItem from "./ButtonItem.vue";
-
-const focusHub = useFocusHub();
-const data = [
-  {
-    width: 100,
-    height: 50,
-    marginRight: 100,
-    content: "同意",
-  },
-  {
-    width: 100,
-    height: 50,
-    content: "取消",
-  },
-];
-
-const measures = (item) => {
-  return item;
-};
-
-const onEdge = (edgeInfo) => {
-  if (edgeInfo.direction == EdgeDirection.top) {
-    focusHub.setFocus("longImageScroll");
-  }
-};
-</script>
-
-<template>
-  <metro-widget
-    name="button"
-    :width="500"
-    :height="50"
-    :data="data"
-    :direction="HORIZONTAL"
-    :measures="measures"
-    :onEdge="onEdge"
-  >
-    <template #renderItem="{ data, query, onEdge, onAction }">
-      <button-item
-        :data="data"
-        :query="query"
-        :onEdge="onEdge"
-        :onAction="onAction"
-      />
-    </template>
-  </metro-widget>
-</template>

package/samples/LongImage/ButtonItem.vue

@@ -1,44 +0,0 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2022-07-08 15:05:00
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-07-08 17:46:39
- * @Description: file content
--->
-<script setup>
-import { ref, shallowRef } from "vue";
-
-const props = defineProps({
-  data: Object,
-  query: Object,
-  onEdge: Function,
-  onAction: Object,
-});
-const focused = ref(false);
-const onFocus = () => {
-  focused.value = true;
-};
-
-const onBlur = () => {
-  focused.value = false;
-};
-
-const onClick = () => {};
-
-props.onAction.register("onFocus", onFocus);
-props.onAction.register("onBlur", onBlur);
-props.onAction.register("onClick", onClick);
-</script>
-
-<template>
-  <div
-    :style="{
-      width: props.data.width,
-      height: props.data.height,
-      fontSize: 30,
-      backgroundColor: focused ? '#DD8800' : '#BBBBAA',
-    }"
-  >
-    {{ data.content }}
-  </div>
-</template>

package/samples/LongImage/LongImageScroll.vue

@@ -1,92 +0,0 @@
-<script setup>
-import Scroll from "./Scroll.vue";
-import { ref, shallowRef, onMounted } from "vue";
-import { useFocusHub } from "jsview";
-
-const props = defineProps({
-  step: Number,
-  style: Object,
-  scrollStyle: Object,
-  scrollBlockStyle: Object,
-  imageSrc: String,
-});
-
-const focusHub = useFocusHub();
-const element = shallowRef(null);
-const scrollY = ref(0);
-const textY = ref(0);
-const onAction = {
-  onKeyDown: (ev) => {
-    const valid =
-      element.value &&
-      element.value.clientHeight &&
-      element.value.clientHeight > props.style.height;
-    // let keyUsed = true;
-    if (valid) {
-      let text_y;
-      switch (ev.keyCode) {
-        case 38:
-          if (textY.value !== 0) {
-            text_y =
-              textY.value + props.step >= 0 ? 0 : textY.value + props.step;
-            (textY.value = text_y),
-              (scrollY.value =
-                (-text_y / (element.value.clientHeight - props.style.height)) *
-                (props.scrollStyle.height - props.scrollBlockStyle.height));
-          }
-          break;
-        case 40:
-          if (textY.value !== props.style.height - element.value.clientHeight) {
-            text_y =
-              textY.value - props.step <=
-              props.style.height - element.value.clientHeight
-                ? props.style.height - element.value.clientHeight
-                : textY.value - props.step;
-            (textY.value = text_y),
-              (scrollY.value =
-                (-text_y / (element.value.clientHeight - props.style.height)) *
-                (props.scrollStyle.height - props.scrollBlockStyle.height));
-          } else {
-            focusHub.setFocus("button");
-          }
-          break;
-      }
-    }
-  },
-  onFocus: () => {
-    console.log("LongImageScroll getFocus");
-  },
-  onBlur: () => {
-    console.log("LongImageScroll loseFocus");
-  },
-};
-
-const onLoad = () => {
-  // 图片加载完成的回调
-  console.log("Image loaded!");
-};
-
-onMounted(() => {
-  focusHub.setFocus("longImageScroll");
-});
-</script>
-
-
-<template>
-  <jsv-focus-block name="longImageScroll" :onAction="onAction">
-    <div :style="{ overflow: 'hidden', ...style }">
-      <img
-        alt=""
-        ref="element"
-        :src="imageSrc"
-        :style="{ top: textY, width: style.width }"
-        :onLoad="onLoad"
-      />
-    </div>
-    <Scroll
-      :top="scrollY"
-      :scrollStyle="scrollStyle"
-      :scrollBlockStyle="scrollBlockStyle"
-    />
-  </jsv-focus-block>
-</template>

package/samples/LongImage/Scroll.vue

@@ -1,14 +0,0 @@
-<script setup>
-defineProps({
-  scrollStyle: Object,
-  top: Number,
-  scrollBlockStyle: Object,
-});
-</script>
-<template>
-  <div :style="{ ...scrollStyle }">
-    <div :style="{ top: top }">
-      <div :style="{ ...scrollBlockStyle }"></div>
-    </div>
-  </div>
-</template>

package/samples/LongText/App.vue

@@ -1,96 +0,0 @@
-<!--
- * 【界面概述】
- * 协议书的示例
- *
- * 【控件介绍】
- * SimpleWidget：见simpleMetrowidget
- *
- * 【技巧说明】
- * Q: 如何长文字div的高度自适应？
- * A: 描画长文字的div的高度不设置即可
- *    并通过element.clientHeight获取渲染后的自动高度，以决定滚动轴的总高度
- *
- * Q: 长段文字如何换行？
- * A: 若文字内容中需要折行，则需要把要显示内容放入字符串中，并加入'\n'来达到换行效果，例如：
- *          <div>{"第一行
- *          第二行"}</div>
- *          =======需要改成=======
- *          <div>{"第一行\n\
- *          第二行"}</div>
- *
- * Q: 文字首行缩进如何做？
- * A: 目前系统只支持通过空格进行首行缩进，行首加入期望的空格数量即可达到缩进，因为盒子字体库和PC不尽相同，
- *    所以务必在盒子上实际测试缩进效果。
- -->
-
-<script setup>
-import LongTextScroll from "./LongTextScroll.vue";
-import Button from "./Button.vue";
-import { jJsvRuntimeBridge } from "jsview";
-import { onMounted, ref, shallowRef } from "vue";
-import { useRouter } from "vue-router";
-
-const router = useRouter();
-
-const onKeyDown = (ev) => {
-  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-    router.go(-1); // 有router时，是从DemoHomepage进入，回退
-  }
-  return true;
-};
-
-onMounted(() => {
-  jJsvRuntimeBridge.notifyPageLoaded();
-});
-</script>
-
-<template>
-  <jsv-focus-block
-    autoFocus
-    :onAction="{
-      onKeyDown: onKeyDown,
-    }"
-  >
-    <div>
-      <div
-        :style="{
-          textAlign: 'center',
-          fontSize: '30px',
-          lineHeight: '50px',
-          color: '#ffffff',
-          left: 140,
-          top: 20,
-          width: 1000,
-          height: 50,
-          backgroundColor: 'rgba(27,38,151,0.8)',
-        }"
-      >
-        可展示篇幅超过一屏的文字
-      </div>
-      <div :style="{ left: 140, top: 100 }">
-        <LongTextScroll
-          :style="{ width: 1000, height: 500, backgroundColor: '#EEEEEE' }"
-          :textStyle="{ color: '#000000', fontSize: 20 }"
-          :scrollBlockStyle="{
-            width: 10,
-            height: 30,
-            backgroundColor: '#555555',
-          }"
-          :scrollStyle="{
-            left: 1005,
-            width: 10,
-            height: 500,
-            backgroundColor: '#DDDDDD',
-          }"
-          :step="20"
-        >
-        </LongTextScroll>
-        <div :style="{ left: 400, top: 550 }">
-          <Button />
-        </div>
-      </div>
-    </div>
-  </jsv-focus-block>
-</template>
-
-

package/samples/LongText/Button.vue

@@ -1,51 +0,0 @@
-<script setup>
-import { ref, shallowRef } from "vue";
-import { HORIZONTAL, MetroWidget, EdgeDirection, useFocusHub } from "jsview";
-import ButtonItem from "./ButtonItem.vue";
-
-const focusHub = useFocusHub();
-const data = [
-  {
-    width: 100,
-    height: 50,
-    marginRight: 100,
-    content: "同意",
-  },
-  {
-    width: 100,
-    height: 50,
-    content: "取消",
-  },
-];
-
-const measures = (item) => {
-  return item;
-};
-
-const onEdge = (edgeInfo) => {
-  if (edgeInfo.direction == EdgeDirection.top) {
-    focusHub.setFocus("longTextScroll");
-  }
-};
-</script>
-
-<template>
-  <metro-widget
-    name="button"
-    :width="500"
-    :height="50"
-    :data="data"
-    :direction="HORIZONTAL"
-    :measures="measures"
-    :onEdge="onEdge"
-  >
-    <template #renderItem="{ data, query, onEdge, onAction }">
-      <button-item
-        :data="data"
-        :query="query"
-        :onEdge="onEdge"
-        :onAction="onAction"
-      />
-    </template>
-  </metro-widget>
-</template>

package/samples/LongText/ButtonItem.vue

@@ -1,44 +0,0 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2022-07-08 15:05:00
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-07-08 17:45:44
- * @Description: file content
--->
-<script setup>
-import { ref, shallowRef } from "vue";
-
-const props = defineProps({
-  data: Object,
-  query: Object,
-  onEdge: Function,
-  onAction: Object,
-});
-const focused = ref(false);
-const onFocus = () => {
-  focused.value = true;
-};
-
-const onBlur = () => {
-  focused.value = false;
-};
-
-const onClick = () => {};
-
-props.onAction.register("onFocus", onFocus);
-props.onAction.register("onBlur", onBlur);
-props.onAction.register("onClick", onClick);
-</script>
-
-<template>
-  <div
-    :style="{
-      width: props.data.width,
-      height: props.data.height,
-      fontSize: 30,
-      backgroundColor: focused ? '#DD8800' : '#BBBBAA',
-    }"
-  >
-    {{ data.content }}
-  </div>
-</template>