@shijiu/jsview-vue 0.9.502 → 0.9.631

package/samples/Basic/components/text/TextGroup1.vue

@@ -1,41 +1,49 @@
+<script setup>
+import ContentBlock from "../ContentBlock";
+import TextAlign from "./TextAlign";
+import TextFontStyle from "./TextFontStyle";
+import TextOverflow from "./TextOverflow";
+
+const props = defineProps({
+  contentClass: String,
+  itemSides: Object,
+});
+
+const contentBlockProps = {
+  colIndex: 0,
+  itemSides: props.itemSides,
+};
+</script>
+
 <template>
-    <div id='item-root'>
-        <ContentBlock :class=contentClass :style="{ top: itemSides.height*0}" :=contentBlockProps :index=0 title="文字对齐">
-             <TextAlign/>
-        </ContentBlock>
-        <ContentBlock :class=contentClass :style="{ top: itemSides.height*1}" :=contentBlockProps :index=1 title="字体和字号">
-            <TextFontStyle/>
-        </ContentBlock>
-        <ContentBlock :class=contentClass :style="{ top: itemSides.height*2}" :="{...contentBlockProps, itemSides: {...itemSides, height:290}}" :index=2 title="文字折行">
-            <TextOverflow/>
-        </ContentBlock>
-    </div>
+  <div id="item-root">
+    <ContentBlock
+      :class="contentClass"
+      :style="{ top: itemSides.height * 0 }"
+      :="contentBlockProps"
+      :index="0"
+      title="文字对齐"
+    >
+      <TextAlign />
+    </ContentBlock>
+    <ContentBlock
+      :class="contentClass"
+      :style="{ top: itemSides.height * 1 }"
+      :="contentBlockProps"
+      :index="1"
+      title="字体和字号"
+    >
+      <TextFontStyle />
+    </ContentBlock>
+    <ContentBlock
+      :class="contentClass"
+      :style="{ top: itemSides.height * 2 }"
+      :="{ ...contentBlockProps, itemSides: { ...itemSides, height: 290 } }"
+      :index="2"
+      title="文字折行"
+    >
+      <TextOverflow />
+    </ContentBlock>
+  </div>
 </template>
 
-<script>
-import ContentBlock from '../ContentBlock';
-import TextAlign from './TextAlign';
-import TextFontStyle from './TextFontStyle';
-import TextOverflow from './TextOverflow';
-
-export default {
-    props: {
-        contentClass: String,
-        itemSides: Object 
-    },
-    components: {
-        ContentBlock,
-        TextAlign,
-        TextFontStyle,
-        TextOverflow
-    },
-    computed: {
-        contentBlockProps() {
-            return {
-                colIndex: 0,
-                itemSides: this.itemSides
-            }
-        }
-    }
-}
-</script>

package/samples/Basic/components/text/TextGroup2.vue

@@ -1,31 +1,28 @@
+<script setup>
+import ContentBlock from "../ContentBlock";
+import TextEmoji from "./TextEmoji";
+
+const props = defineProps({
+  contentClass: String,
+  itemSides: Object,
+});
+
+const contentBlockProps = {
+  colIndex: 0,
+  itemSides: props.itemSides,
+};
+</script>
 <template>
-    <div id='item-root'>
-        <ContentBlock :class=contentClass :style="{ top: itemSides.height*0}" :=contentBlockProps :index=0 title="文字对齐">
-             <TextEmoji/>
-        </ContentBlock>
-    </div>
+  <div id="item-root">
+    <ContentBlock
+      :class="contentClass"
+      :style="{ top: itemSides.height * 0 }"
+      :="contentBlockProps"
+      :index="0"
+      title="文字对齐"
+    >
+      <TextEmoji />
+    </ContentBlock>
+  </div>
 </template>
 
-<script>
-import ContentBlock from '../ContentBlock';
-import TextEmoji from './TextEmoji';
-
-export default {
-    props: {
-        contentClass: String,
-        itemSides: Object 
-    },
-    components: {
-        ContentBlock,
-        TextEmoji,
-    },
-    computed: {
-        contentBlockProps() {
-            return {
-                colIndex: 0,
-                itemSides: this.itemSides
-            }
-        }
-    }
-}
-</script>

package/samples/Basic/components/text/TextOverflow.vue

@@ -1,86 +1,105 @@
+<script setup>
+const gap = 5;
+const blockSize = {
+  width: 180,
+  height: 35,
+};
+const baseStyle = {
+  width: blockSize.width,
+  height: blockSize.height,
+  backgroundColor: "rgba(255, 255, 0, 0.5)",
+  color: "rgba(255, 0, 0, 1)",
+};
+const multiLine =
+  "多行文字（末尾省略)：" +
+  '\n第一行：我末尾有个"\\n"' +
+  "\n第二行：一二三四五六七八九十,一二三四五六七八九十,一二三四五六七八九十" +
+  "\n第三行：一二三四五六七八九十,一二三四五六七八九十,一二三四五六七八九十";
+</script>
+
 <template>
-<div id='layout-root'>
-    <div class="content-font" :style="{ ...baseStyle,
+  <div id="layout-root">
+    <div
+      class="content-font"
+      :style="{
+        ...baseStyle,
         whiteSpace: 'nowrap',
         textOverflow: 'clip',
-        overflow: 'hidden'}">
-        1.长文字截断，后面的文字你可能看不到
+        overflow: 'hidden',
+      }"
+    >
+      1.长文字截断，后面的文字你可能看不到
     </div>
 
-    <div class="content-font" :style="{ ...baseStyle,
-        top: blockSize.height+gap,
+    <div
+      class="content-font"
+      :style="{
+        ...baseStyle,
+        top: blockSize.height + gap,
         whiteSpace: 'nowrap',
         textOverflow: 'ellipsis',
-        overflow: 'hidden'}">
-        2.长文字省略，后面的文字你可能看不到
+        overflow: 'hidden',
+      }"
+    >
+      2.长文字省略，后面的文字你可能看不到
     </div>
 
-    <div class="content-font" :style="{ ...baseStyle,
-        top: (blockSize.height+gap)*2,
+    <div
+      class="content-font"
+      :style="{
+        ...baseStyle,
+        top: (blockSize.height + gap) * 2,
         whiteSpace: 'pre-wrap',
         textOverflow: 'clip',
-        overflow: 'hidden'}">
-        3.长文字折行+截断，后面的文字你可能看不到，与PC效果有区别，一二三四五六七八九十
+        overflow: 'hidden',
+      }"
+    >
+      3.长文字折行+截断，后面的文字你可能看不到，与PC效果有区别，一二三四五六七八九十
     </div>
 
-    <div class="content-font" :style="{ ...baseStyle,
-        top: (blockSize.height+gap)*3,
+    <div
+      class="content-font"
+      :style="{
+        ...baseStyle,
+        top: (blockSize.height + gap) * 3,
         whiteSpace: 'pre-wrap',
         textOverflow: 'ellipsis',
-        overflow: 'hidden'}">
-        4.长文字折行+省略，后面的文字你可能看不到，与PC效果有区别，一二三四五六七八九十
+        overflow: 'hidden',
+      }"
+    >
+      4.长文字折行+省略，后面的文字你可能看不到，与PC效果有区别，一二三四五六七八九十
     </div>
 
-    <div class="content-font" :style="{ ...baseStyle,
-        top: (blockSize.height+gap)*4, height: 65,
+    <div
+      class="content-font"
+      :style="{
+        ...baseStyle,
+        top: (blockSize.height + gap) * 4,
+        height: 65,
         whiteSpace: 'pre-wrap',
-        textOverflow: 'ellipsis',
-        overflow: 'hidden'}">
-        5.{{multiLine}}
+        textOverflow: 'clip',
+        overflow: 'hidden',
+      }"
+    >
+      5.{{ multiLine }}
     </div>
 
-    <div class="content-font" :style="{ ...baseStyle,
-        top: (blockSize.height+gap)*4+67, height: 65,
+    <div
+      class="content-font"
+      :style="{
+        ...baseStyle,
+        top: (blockSize.height + gap) * 4 + 67,
+        height: 65,
         whiteSpace: 'pre-wrap',
-        textOverflow: 'clip',
-        overflow: 'hidden'}">
-        6.{{multiLine}}
+        textOverflow: 'ellipsis',
+        overflow: 'hidden',
+      }"
+    >
+      6.{{ multiLine }}
     </div>
-
-</div>
+  </div>
 </template>
 
-<script>
-export default {
-    computed: {
-        gap() {
-            return 5;
-        },
-        blockSize() {
-            return {
-                width: 180,
-                height: 35,
-            }
-        },
-        baseStyle() {
-            return {
-                width: this.blockSize.width, height: this.blockSize.height,
-                backgroundColor: 'rgba(255, 255, 0, 0.5)',
-                color: 'rgba(255, 0, 0, 1)',
-            }
-        },
-        // 多行的处理，在PC端依靠CSS属性 white-space: pre-line，在JsView平台不需要特别属性
-        multiLine() {
-            return "多行文字（末尾省略)："
-                 + "\n第一行：我末尾有个\"\\n\""
-                 + "\n第二行：一二三四五六七八九十,一二三四五六七八九十,一二三四五六七八九十"
-                 + "\n第三行：一二三四五六七八九十,一二三四五六七八九十,一二三四五六七八九十";
-        }
-    }
-}
-
-</script>
-
 <style>
 @import "../FontStyle.css";
 </style>

package/samples/BasicFocusControl/App.vue

@@ -56,53 +56,32 @@
  *
 -->
 
-<script lang="ts">
-import { Options, Vue } from "vue-class-component";
-import MainArea from "./components/MainArea.vue"
-import SideBar from "./components/SideBar.vue"
+<script setup>
+import { useRouter } from "vue-router";
+import MainArea from "./components/MainArea.vue";
+import SideBar from "./components/SideBar.vue";
 
-@Options({
-  components: {
-    MainArea,
-    SideBar
+const router = useRouter();
+const onKeyDown = (ev) => {
+  // 有router时，是从DemoHomepage进入，回退，和本demo功能无关
+  // 8:Backspace, 27:Escape, 10000:盒子返回键
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    router.go(-1);
+    return true;
   }
-})
-export default
-class App extends Vue {
-  constructor(props: object) {
-    super(props);
-  }
-
-  onDidRef(ref: any) {
-    // 如果使用这种全局切换焦点的方式，请换一个唯一的函数名，防止二次集成时出现函数覆盖。
-    (this.$root as any).changeFocusInDemoSpace = (relativeName: String) => {
-      console.log('Change focus to: ' + relativeName)
-      ref.findBlockByName(relativeName).requestFocus()
-    } 
-  }
-
-  onKeyDown(ev: any) {
-    // 有router时，是从DemoHomepage进入，回退，和本demo功能无关
-    // 8:Backspace, 27:Escape, 10000:盒子返回键
-    if(ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-      console.log("Basic has this.$router: ", !!(this as any).$router);
-      (this as any).$router?.go(-1);
-      return true
-    }
-    return false;
-  }
-}
+  return false;
+};
 </script>
 
 <template>
-<!-- 这里的jsv-focus-block只是为了获取到一个base focus节点，并不是必须的 -->
-<jsv-focus-block :ref="onDidRef" :onKeyDown="onKeyDown">
-  <div class="title">可上下左右切换焦点</div>
-  <div class="body">
-      <MainArea :style="{left: 0}"/>
-      <SideBar :style="{left: 300}"/>
-  </div>
-</jsv-focus-block>
+  <!-- 这里的jsv-focus-block只是为了获取到一个base focus节点，并不是必须的 -->
+  <jsv-focus-block :onKeyDown="onKeyDown">
+    <div class="title">可上下左右切换焦点</div>
+    <div class="body">
+      <MainArea :style="{ left: 0 }" />
+      <SideBar :style="{ left: 300 }" />
+    </div>
+  </jsv-focus-block>
 </template>
 
 <style scoped>
@@ -115,7 +94,7 @@ class App extends Vue {
   top: 50;
   width: 400;
   height: 50;
-  background-color: rgba(27,38,151,0.8);
+  background-color: rgba(27, 38, 151, 0.8);
 }
 
 .body {

package/samples/BasicFocusControl/components/BaseBlock.vue

@@ -1,51 +1,50 @@
-<script lang="ts">
-import { Options, Vue } from "vue-class-component";
-
-@Options({
-  props: {
-    name: String,
-    style: { type:Object, default: {}},
-    onKeyDown: Function
+<script setup>
+import { ref, onMounted } from "vue";
+const props = defineProps({
+  name: String,
+  style: {
+    type: Object,
+    default() {
+      return {};
+    },
   },
-})
-export default
-class BaseBlock extends Vue {
-  constructor(props: object) {
-    super(props);
-  }
-
-  mounted() {
-    this.fullName = this.blockRef.getName();
-  }
-
-  private getActionCallback() {
-    const onAction = {
-      onKeyDown: this.onKeyDown,
-      onFocus: () => {
-        this.hasFocused = true;
-      },
-      onBlur: () => {
-        this.hasFocused = false;
-      }
-    }
+  onKeyDown: Function,
+});
 
-    return onAction;
-  }
+const fullName = ref("");
+const blockRef = ref(null);
+const hasFocused = ref(false);
 
-  private onKeyDown?: Function = undefined;
-  private hasFocused: Boolean = false;
-  private fullName: String = "";
-  private readonly blockRef: any = null;
-}
+onMounted(() => {
+  fullName.value = blockRef.value.getName();
+});
+const onFocus = () => {
+  hasFocused.value = true;
+};
+const onBlur = () => {
+  hasFocused.value = false;
+};
 </script>
 
 <template>
-<jsv-focus-block ref="blockRef" :name="name" :onAction="getActionCallback()">
-  <div :style="{...$props.style,
-                width: 100, height: 100,
-                backgroundColor: (hasFocused ? 'rgba(255,0,0,1)' : 'rgba(0,255,0,1)')}"
+  <jsv-focus-block
+    ref="blockRef"
+    :name="name"
+    :onAction="{
+      onKeyDown,
+      onFocus,
+      onBlur,
+    }"
   >
-    {{ fullName }}
-  </div>
-</jsv-focus-block>
+    <div
+      :style="{
+        ...$props.style,
+        width: 100,
+        height: 100,
+        backgroundColor: hasFocused ? 'rgba(255,0,0,1)' : 'rgba(0,255,0,1)',
+      }"
+    >
+      {{ fullName }}
+    </div>
+  </jsv-focus-block>
 </template>

package/samples/BasicFocusControl/components/MainArea.vue

@@ -1,81 +1,66 @@
-<script lang="ts">
-import { JsvFocusEvent } from "jsview/utils/JsViewEngineWidget";
-import { Options, Vue } from "vue-class-component";
-import MainAreaLeftBlock from "./MainAreaLeftBlock.vue"
-import MainAreaRightBlock from "./MainAreaRightBlock.vue"
+<script setup>
+import MainAreaLeftBlock from "./MainAreaLeftBlock.vue";
+import MainAreaRightBlock from "./MainAreaRightBlock.vue";
+import { useFocusHub } from "jsview";
 
-@Options({
-  components: {
-    MainAreaLeftBlock,
-    MainAreaRightBlock
+const focusHub = useFocusHub();
+window.focusHub = focusHub
+let focusRow = 0;
+let focusColumn = 0;
+const onKeyDown = (ev) => {
+  // 子节点未处理的按键事件会流向此节点
+  let keyUsed = true;
+  switch (ev.keyCode) {
+    case 38: // Up
+      focusRow = 0;
+      break;
+    case 40: // Down
+      focusRow = 1;
+      break;
+    case 37: // Left
+      focusColumn = 0;
+      break;
+    case 39: // Right
+      focusColumn = 1;
+      break;
+    default:
+      keyUsed = false;
   }
-})
-export default
-class MainArea extends Vue {
-  constructor(props: object) {
-    super(props);
-  }
-
-  private getActionCallback() {
-    const onAction = {
-      onKeyDown: (ev: JsvFocusEvent) => {
-        // 子节点未处理的按键事件会流向此节点
-        let keyUsed = true;
-        switch (ev.keyCode) {
-          case 38: // Up
-            this.focusRow = 0;
-            break;
-          case 40: // Down
-            this.focusRow = 1;
-            break;
-          case 37: // Left
-            this.focusColumn= 0;
-            break;
-          case 39: // Right
-            this.focusColumn= 1;
-            break;
-          default:
-            keyUsed = false;
-        }
-
-        if (keyUsed) {
-          // 焦点与之前相同时也可以重复调用，焦点管理系统内容有是否变更的判断处理
-          const name = `main.R${this.focusRow}C${this.focusColumn}`;
-          (this.$root as any).changeFocusInDemoSpace(name);
-        }
 
-        return keyUsed;
-      },
-
-      onFocus: () => {
-        // this.focusRow = 0;
-        // this.focusColumn = 0;
-        const name = `main.R${this.focusRow}C${this.focusColumn}`;
-        (this.$root as any).changeFocusInDemoSpace(name);
-      }
-    };
-    return onAction;
+  if (keyUsed) {
+    // 焦点与之前相同时也可以重复调用，焦点管理系统内容有是否变更的判断处理
+    const name = `main.R${focusRow}C${focusColumn}`;
+    focusHub.setFocus(name);
   }
 
-  private focusRow: number = 0;
-  private focusColumn: number = 0;
-}
+  return keyUsed;
+};
+
+const onFocus = () => {
+  const name = `main.R${focusRow}C${focusColumn}`;
+  focusHub.setFocus(name);
+};
 </script>
 
 <template>
-<!--jsv-focus-block是不可描画节点，所以如果想接收style等属性，不要放在顶级-->
-<div>
-  <!-- 这里的jsv-focus-block只是一个namesapce的样例，并不是必须的，
+  <!--jsv-focus-block是不可描画节点，所以如果想接收style等属性，不要放在顶级-->
+  <div>
+    <!-- 这里的jsv-focus-block只是一个namesapce的样例，并不是必须的，
        如果你App中的焦点在一个命名空间下，这里可以用name，参考SideBar。 -->
-  <jsv-focus-block namespace="main"
-      autoFocus :onAction="getActionCallback()"
-  >
-    <MainAreaLeftBlock name="R0C0" :style="{ left: 0, top: 0 }"/>
-    <MainAreaLeftBlock name="R1C0" :style="{ left: 0, top: 120 }"/>
-    <MainAreaRightBlock name="R0C1" :style="{ left: 120, top: 0 }"/>
-    <MainAreaRightBlock name="R1C1" :style="{ left: 120, top: 120 }"/>
-  </jsv-focus-block>
-</div>
+    <jsv-focus-block
+      namespace="main"
+      autoFocus
+      :onAction="{
+        onKeyDown,
+        onFocus,
+      }"
+    >
+      <MainAreaLeftBlock name="R0C0" :style="{ left: 0, top: 0 }" />
+      <MainAreaLeftBlock name="R1C0" :style="{ left: 0, top: 120 }" />
+      <MainAreaRightBlock name="R0C1" :style="{ left: 120, top: 0 }" />
+      <MainAreaRightBlock name="R1C1" :style="{ left: 120, top: 120 }" />
+    </jsv-focus-block>
+  </div>
 </template>
 
 <style scoped>
@@ -88,7 +73,7 @@ class MainArea extends Vue {
   top: 50;
   width: 400;
   height: 50;
-  background-color: rgba(27,38,151,0.8);
+  background-color: rgba(27, 38, 151, 0.8);
 }
 
 .body {

package/samples/BasicFocusControl/components/MainAreaLeftBlock.vue

@@ -1,21 +1,17 @@
-<script lang="ts">
-import { Options, Vue } from "vue-class-component";
-import BaseBlock from "./BaseBlock.vue"
+<script setup>
+import BaseBlock from "./BaseBlock.vue";
 
-@Options({
-  props: {
-    name: String,
-    style: { type:Object, default: {}}
+defineProps({
+  name: String,
+  style: {
+    type: Object,
+    default() {
+      return {};
+    },
   },
-  components: {
-    BaseBlock
-  }
-})
-export default
-class MainAreaLeftBlock extends Vue {
-}
+});
 </script>
 
 <template>
-<BaseBlock :name="$props.name" :style="$props.style"/>
+  <BaseBlock :name="name" :style="style" />
 </template>