@shijiu/jsview-vue 1.9.727 → 1.9.747

package/samples/GridDemo/ButtonBlock.vue

@@ -1,112 +0,0 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2022-05-10 15:21:24
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-07-08 11:51:26
- * @Description: file content
--->
-<script setup>
-import { ref, shallowRef } from "vue";
-const props = defineProps({
-  userData: Object,
-  name: String,
-});
-
-let focusIndex = ref(0);
-let focused = ref(false);
-let divNumber = new Array(25);
-let focusBlock = shallowRef(null);
-
-const _onFocus = () => {
-  console.log("button onfocus", props.userData);
-  focused.value = true;
-};
-const _onBlur = () => {
-  focused.value = false;
-  focusIndex.value = 0;
-};
-const _onKeyDown = (ev) => {
-  console.log("button onkeydown");
-  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.userData);
-    return true;
-  }
-  return false;
-};
-const getFocusBlock = () => {
-  return focusBlock.value;
-};
-const _MapColor = (color_num) => {
-  return color_num < 10 || color_num >= 100
-    ? "0" + (color_num % 10)
-    : "" + (color_num % 100);
-};
-
-defineExpose({
-  getFocusBlock,
-});
-</script>
-
-<template>
-  <jsv-focus-block
-    ref="focusBlock"
-    :name="name"
-    :onAction="{
-      onFocus: _onFocus,
-      onBlur: _onBlur,
-      onKeyDown: _onKeyDown,
-    }"
-  >
-    <div
-      v-for="(item, index) in divNumber"
-      :key="index + '_l'"
-      :style="{
-        left: 2 * index,
-        width: 2,
-        height: 50,
-        backgroundColor: '#77' + _MapColor(index) + _MapColor(index),
-      }"
-    ></div>
-    <div
-      :style="{
-        width: 50,
-        height: 50,
-        fontSize: 20,
-        color: '#FFFFFF',
-      }"
-    >
-      {{ userData.name }}
-    </div>
-
-    <div
-      v-for="(item, index) in divNumber"
-      :key="index + '_r'"
-      :style="{
-        left: 2 * index + 50,
-        width: 2,
-        height: 50,
-        backgroundColor:
-          '#' +
-          _MapColor(userData.baseColor) +
-          _MapColor(index) +
-          _MapColor(index),
-      }"
-    ></div>
-
-    <div
-      :style="{
-        visibility: this.focused ? 'visible' : 'hidden',
-        left: 50 * focusIndex,
-        width: 10,
-        height: 10,
-        backgroundColor: '#FF0000',
-      }"
-    ></div>
-  </jsv-focus-block>
-</template>

package/samples/GridDemo/FocusItem.vue

@@ -1,37 +0,0 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2022-05-10 15:21:24
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-07-08 11:50:58
- * @Description: file content
--->
-<script setup>
-import ButtonBlock from "./ButtonBlock.vue";
-import { ref, shallowRef } from "vue";
-
-const props = defineProps({
-  userData: Object,
-  widgetData: Object,
-  onAction: Object,
-});
-const focused = ref(false);
-const divNumber = new Array(50);
-const button = shallowRef(null);
-const onFocus = () => {
-  button.value
-    .getFocusBlock()
-    .findBlockByName(props.widgetData.gridIndex + "_item")
-    .requestFocus();
-};
-const onBlur = () => {};
-props.onAction.register("onFocus", onFocus);
-props.onAction.register("onBlur", onBlur);
-</script>
-
-<template>
-  <button-block
-    ref="button"
-    :name="widgetData.gridIndex + '_item'"
-    :userData="userData"
-  ></button-block>
-</template>

package/samples/GridDemo/Item.vue

@@ -1,93 +0,0 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2022-05-10 15:21:24
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-07-08 11:48:32
- * @Description: file content
--->
-<script setup>
-import { ref, shallowRef, onUpdated, onMounted } from "vue";
-
-const props = defineProps({
-  userData: Object,
-  widgetData: Object,
-  onAction: Object,
-});
-const randomColor = () => {
-  let randomColor = Math.round(Math.random() * 2 ** 24).toString(16);
-  return (
-    "#" + new Array(6 - randomColor.length).fill("0").join("") + randomColor
-  );
-};
-const focused = ref(false);
-const divNumber = new Array(50);
-const blurAction = false;
-
-const onFocus = () => {
-  console.log("item onfocus", props.userData);
-  focused.value = true;
-};
-const onBlur = () => {
-  console.log(
-    "item onblur",
-    props.userData,
-    props.widgetData.getCurrentFocusId(),
-    props.widgetData.dataIndex
-  );
-  focused.value = false;
-};
-const onClick = () => {
-  console.log("item onclick ", props.userData);
-};
-
-props.onAction.register("onFocus", onFocus);
-props.onAction.register("onBlur", onBlur);
-props.onAction.register("onClick", onClick);
-
-onUpdated(() => {
-  console.log("item updated", props.userData, props.widgetData);
-});
-onMounted(() => {
-  console.log("item mounted", props.userData, props.widgetData);
-});
-</script>
-
-<template>
-  <div
-    v-for="(item, index) in divNumber"
-    :key="index"
-    :style="{
-      left: 2 * index,
-      width: 2,
-      height: 50,
-      backgroundColor: '#007788',
-    }"
-  ></div>
-  <div
-    :style="{
-      width: 100,
-      height: 50,
-      fontSize: '30px',
-      color: '#FFFFFF',
-    }"
-  >
-    {{ userData.content }}
-  </div>
-  <div
-    :style="{
-      visibility: focused ? 'visible' : 'hidden',
-      width: 20,
-      height: 20,
-      backgroundColor: '#FF0000',
-    }"
-  ></div>
-  <div
-    :style="{
-      visibility: !focused && widgetData.selected ? 'visible' : 'hidden',
-      left: 50,
-      width: 20,
-      height: 20,
-      backgroundColor: '#00FF00',
-    }"
-  ></div>
-</template>

package/samples/HashHistory/App.vue

@@ -1,115 +0,0 @@
-<script>
-import { router, routeList } from "./router.js";
-export default {
-  Router: router,
-};
-</script>
-
-<script setup>
-import { jJsvRuntimeBridge } from "jsview";
-import { router, routeList } from "./router.js";
-import { useRouter, useRoute } from "vue-router";
-import { onMounted, ref, shallowRef } from "vue";
-
-const props = defineProps({
-  routePath: String,
-});
-
-const displayUrl = ref("");
-let topRef = shallowRef(null);
-let routePage = shallowRef(null);
-let currentRouter;
-if (props.routePath) {
-  const currentRoute = useRoute();
-  currentRouter = useRouter();
-
-  let redirectPath; // 自动跳转路径
-  for (const route of routeList) {
-    if (route.path === "/") {
-      // 不需要添加home
-      redirectPath = route.redirect;
-      continue;
-    }
-
-    const subRoute = { ...route, path: route.path.substring(1) }; // 去掉字符'/'
-    currentRouter.addRoute(currentRoute.name, subRoute);
-  }
-
-  currentRouter.replace(props.routePath + redirectPath); // 自动跳转到redirectPath
-} else {
-  currentRouter = router;
-}
-currentRouter.afterEach(() => {
-  displayUrl.value = window.location.href;
-});
-
-const onRequestFocus = (branchName) => {
-  topRef.value.findBlockByname(branchName)?.requestFocus();
-};
-
-const watchRouterChanged = (route) => {
-  route.afterEach(() => {
-    displayUrl.value = window.location.href;
-  });
-};
-
-const onKeyDown = (event) => {
-  return routePage.value.onKeyDown(event);
-};
-
-onMounted(() => {
-  jJsvRuntimeBridge.notifyPageLoaded();
-});
-</script>
-
-<template>
-  <div class="root">
-    <div class="address">当前URL: {{ displayUrl }}</div>
-    <div class="split"></div>
-    <jsv-focus-block ref="topRef">
-      <!-- 这种router-view的写法可以获取到component的ref，vue标准写法 -->
-      <router-view v-slot="{ Component }">
-        <component
-          :is="Component"
-          ref="routePage"
-          class="router"
-          @requestFocus="onRequestFocus"
-        />
-      </router-view>
-    </jsv-focus-block>
-  </div>
-</template>
-
-<style scoped>
-.root {
-  left: 0;
-  top: 0;
-  width: 1280;
-  height: 1080;
-  background-color: rgb(222, 211, 140);
-}
-
-.address {
-  left: 40;
-  top: 40;
-  width: 1200;
-  height: 200;
-  font-size: 20;
-}
-
-.split {
-  left: 40;
-  top: 150;
-  width: 1200;
-  height: 3;
-  background-color: #00f000;
-}
-
-.router {
-  left: 0;
-  top: 150;
-  width: 1920;
-  height: 930;
-  overflow: hidden;
-}
-</style>

package/samples/HashHistory/components/HorizontalButtonList.vue

@@ -1,91 +0,0 @@
-<script setup>
-import Item from "./Item.vue";
-
-const props = defineProps({
-  style: Object,
-  buttonConfig: Object,
-  onButtonClick: Function,
-  onBack: Function,
-});
-const maxWidth = 1280;
-const listPadding = 10;
-const buttonWidth = 400;
-const buttonHeight = 80;
-const buttonGap = 50;
-let focusedItemIndex = 0;
-
-let listLeft = 0;
-const listWidth = (buttonWidth + buttonGap) * props.buttonConfig.length;
-
-// 根据maxWidth，计算buttons的左边位置
-const widthCenter = listWidth - buttonGap; // 减去最后一个元素的gap
-if (widthCenter < maxWidth) {
-  listLeft = Math.floor((maxWidth - widthCenter) / 2);
-}
-
-const listSize = {
-  left: listLeft,
-  width: listWidth,
-  height: buttonHeight,
-};
-
-const onKeyDown = (ev) => {
-  if (ev.keyCode === 13) {
-    // Enter
-    props.onButtonClick?.(focusedItemIndex);
-    return true;
-  } else if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-    // 8:Backspace, 27:Escape, 10000:盒子返回键
-    props.onBack?.();
-    return true;
-  }
-
-  let changeFocusTo = -1;
-  switch (ev.keyCode) {
-    case 37: // Left
-      changeFocusTo =
-        (focusedItemIndex - 1 + props.buttonConfig.length) %
-        props.buttonConfig.length;
-      break;
-    case 39: // Right
-      changeFocusTo = (focusedItemIndex + 1) % props.buttonConfig.length;
-      break;
-    default:
-      break;
-  }
-  if (changeFocusTo >= 0) {
-    ev.ownerNode.findBlockByName(changeFocusTo.toString()).requestFocus();
-    focusedItemIndex = changeFocusTo;
-    return true;
-  }
-
-  return false;
-};
-</script>
-
-<template>
-  <div :style="style">
-    <jsv-focus-block
-      :style="{
-        left: listSize.left,
-        width: listSize.width + listPadding * 2,
-        height: listSize.height + listPadding * 2,
-      }"
-      :onKeyDown="onKeyDown"
-    >
-      <Item
-        v-for="(item, index) in buttonConfig"
-        :key="index"
-        :style="{
-          left: (buttonWidth + 10) * index,
-          width: buttonWidth,
-          height: buttonHeight,
-        }"
-        :name="index.toString()"
-        :autoFocus="index === 0"
-      >
-        {{ item.name }}
-      </Item>
-    </jsv-focus-block>
-  </div>
-</template>

package/samples/HashHistory/components/Item.vue

@@ -1,60 +0,0 @@
-<script setup>
-import { ref, shallowRef } from "vue";
-const props = defineProps({
-  style: Object,
-  name: String,
-  autoFocus: Boolean,
-});
-
-const hasFocused = ref(false);
-const onFocus = () => {
-  hasFocused.value = true;
-};
-
-const onBlur = () => {
-  hasFocused.value = false;
-};
-
-const focusStyle = {
-  width: props.style.width + 10,
-  height: props.style.height + 10,
-};
-
-const itemStyle = {
-  width: props.style.width,
-  height: props.style.height,
-  backgroundColor: "#0FF000",
-  lineHeight: props.style.height,
-  fontSize: `${Math.floor(props.style.height * 0.55)}px`,
-};
-</script>
-
-<template>
-  <jsv-focus-block
-    :name="name"
-    :autoFocus="autoFocus ? '' : undefined"
-    :onFocus="onFocus"
-    :onBlur="onBlur"
-  >
-    <div :style="style">
-      <div class="focus" :style="focusStyle" v-if="hasFocused"></div>
-      <div class="item" :style="itemStyle">
-        <slot></slot>
-      </div>
-    </div>
-  </jsv-focus-block>
-</template>
-
-<style scoped>
-.focus {
-  top: -5;
-  left: -5;
-  background-color: #0000ff;
-}
-.item {
-  text-align: center;
-  font-size: 30;
-  color: #000000;
-  white-space: nowrap;
-}
-</style>

package/samples/HashHistory/router.js

@@ -1,41 +0,0 @@
-import { createRouter } from "vue-router";
-import { jsvCreateHashHistory } from "jsview";
-
-const routeList = [
-  // 功能实例
-  {
-    name: "Home",
-    path: "/",
-    redirect: "/__MainJsvApp/MainPage",
-  },
-  {
-    name: "MainPage",
-    path: "/__MainJsvApp/MainPage",
-    component: () => import("./views/MainPage.vue"),
-  },
-  {
-    name: "SubPageFirst",
-    path: "/__MainJsvApp/SubPageFirst",
-    component: () => import("./views/SubPage.vue"),
-    props: {
-      name: "First",
-      jumpTo: "Second",
-    },
-  },
-  {
-    name: "SubPageSecond",
-    path: "/__MainJsvApp/SubPageSecond",
-    component: () => import("./views/SubPage.vue"),
-    props: {
-      name: "Second",
-      jumpTo: "First",
-    },
-  },
-];
-
-const router = createRouter({
-  history: jsvCreateHashHistory(),
-  routes: routeList,
-});
-
-export { router, routeList };

package/samples/HashHistory/views/MainPage.vue

@@ -1,57 +0,0 @@
-<script setup>
-import { useRouter } from "vue-router";
-import HorizontalButtonList from "../components/HorizontalButtonList.vue";
-
-const branchName = "./MainPage.ButtonList";
-const router = useRouter();
-
-const buttonListConfig = [
-  {
-    name: "启动子界面-First",
-    route: {
-      path: "SubPageFirst",
-      query: { from: "main" },
-    },
-  },
-  {
-    name: "启动子界面-Second",
-    route: {
-      path: "SubPageSecond",
-      query: { from: "main" },
-    },
-  },
-];
-
-const onButtonClick = (idx) => {
-  const config = buttonListConfig[idx];
-  console.log("Jump page to: " + config.name);
-  router.push(config.route);
-};
-
-const onBack = () => {
-  router.go(-1);
-};
-</script>
-
-<template>
-  <div>
-    <div class="title">这是主界面</div>
-    <HorizontalButtonList
-      :style="{ top: 330 }"
-      :buttonConfig="buttonListConfig"
-      :onButtonClick="onButtonClick"
-      :onBack="onBack"
-    />
-  </div>
-</template>
-
-<style scoped>
-.title {
-  top: 100;
-  width: 1280;
-  height: 100;
-  line-height: 100px;
-  text-align: center;
-  font-size: 55;
-}
-</style>

package/samples/HashHistory/views/SubPage.vue

@@ -1,66 +0,0 @@
-<script setup>
-import HorizontalButtonList from "../components/HorizontalButtonList.vue";
-import { useRouter } from "vue-router";
-import { computed } from "vue";
-const props = defineProps({
-  name: String,
-  jumpTo: String,
-});
-
-console.log("cchtest subpage", props.name, props.jumpTo);
-const router = useRouter();
-const buttonListConfig = computed(() => {
-  return [
-    {
-      name: "跳转子界面-" + props.jumpTo,
-      route: {
-        path: "SubPage" + props.jumpTo,
-        query: { from: "sub" + props.name },
-      },
-    },
-  ];
-});
-
-const onButtonClick = (idx) => {
-  const config = buttonListConfig.value[idx];
-  console.log("Jump page to: " + config.name, props);
-  router.push(config.route);
-};
-
-const onBack = () => {
-  router.go(-1);
-};
-</script>
-
-<template>
-  <div>
-    <div class="title">这是子界面{{ name }}</div>
-    <HorizontalButtonList
-      :style="{ top: 230 }"
-      :buttonConfig="buttonListConfig"
-      :onButtonClick="onButtonClick"
-      :onBack="onBack"
-    />
-    <div class="tip">按返回键返回前一页</div>
-  </div>
-</template>
-
-<style scoped>
-.title {
-  top: 100;
-  width: 1280;
-  height: 100;
-  line-height: 100px;
-  text-align: center;
-  font-size: 55;
-}
-
-.tip {
-  top: 330;
-  width: 1280;
-  height: 100;
-  line-height: 100px;
-  text-align: center;
-  font-size: 30;
-}
-</style>