@shijiu/jsview-vue 0.9.502 → 0.9.590

package/samples/HashHistory/components/Item.vue

@@ -1,69 +1,55 @@
-<script lang="ts">
-import { Options, Vue } from "vue-class-component";
-
-@Options({
-  props: {
-    style: Object,
-    name: String,
-    autoFocus: Boolean
-  },
-})
-
-class Item extends Vue {
-  constructor(props: object) {
-    super(props);
-  }
-
-  onFocus() {
-    this.hasFocused = true;
-  }
-
-  onBlur() {
-    this.hasFocused = false;
-  }
-
-  getFocusStyle() {
-    return {
-      width: this.style.width + 10,
-      height: this.style.height + 10,
-    }
-  }
-
-  getItemStyle() {
-    return {
-      width: this.style.width,
-      height: this.style.height,
-      backgroundColor: '#0FF000',
-      lineHeight: this.style.height,
-      fontSize: `${Math.floor(this.style.height * 0.55)}px`,
-    }
-  }
-
-  private hasFocused: boolean = false;
-  private style!: any;
-}
-
-export default Item;
+<script setup>
+import { ref } 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="getFocusStyle()" v-if="hasFocused" />
-    <div class="item" :style="getItemStyle()">
-      <slot/>
+  <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>
-  </div>
-</jsv-focus-block>
+  </jsv-focus-block>
 </template>
 
 <style scoped>
 .focus {
   top: -5;
   left: -5;
-  background-color: #0000FF;
+  background-color: #0000ff;
 }
 .item {
   text-align: center;

package/samples/HashHistory/router.js

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

package/samples/HashHistory/views/MainPage.vue

@@ -1,59 +1,48 @@
-<script lang="ts">
-import { Options } from "vue-class-component";
+<script setup>
+import { useRouter } from "vue-router";
 import HorizontalButtonList from "../components/HorizontalButtonList.vue";
-import BasePage from "./BasePage.vue"
 
-@Options({
-  components: {
-    HorizontalButtonList
-  }
-})
-export default class MainPage extends BasePage {
-  constructor(props: any) {
-    super(props);
+const branchName = "./MainPage.ButtonList";
+const router = useRouter();
 
-    this.branchName = "./MainPage.ButtonList"
-  }
+const buttonListConfig = [
+  {
+    name: "启动子界面-First",
+    route: {
+      path: "SubPageFirst",
+      query: { from: "main" },
+    },
+  },
+  {
+    name: "启动子界面-Second",
+    route: {
+      path: "SubPageSecond",
+      query: { from: "main" },
+    },
+  },
+];
 
-  private getButtonListConfig() {
-    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);
+};
 
-    return buttonListConfig;
-  }
-
-  private onButtonClick(idx: number) {
-    const buttonListConfig = this.getButtonListConfig();
-    const config = buttonListConfig[idx];
-    console.log("Jump page to: " + config.name)
-    this.$router.push(config.route);
-  }
-}
+const onBack = () => {
+  router.go(-1);
+};
 </script>
 
 <template>
-<div>
-  <div class="title">
-      这是主界面
-  </div>
-  <HorizontalButtonList
-      :style="{top: 330}"
-      :buttonConfig="getButtonListConfig()"
+  <div>
+    <div class="title">这是主界面</div>
+    <HorizontalButtonList
+      :style="{ top: 330 }"
+      :buttonConfig="buttonListConfig"
       :onButtonClick="onButtonClick"
       :onBack="onBack"
-  />
-</div>
+    />
+  </div>
 </template>
 
 <style scoped>

package/samples/HashHistory/views/SubPage.vue

@@ -1,61 +1,48 @@
-<script lang="ts">
-import { Options } from "vue-class-component";
+<script setup>
 import HorizontalButtonList from "../components/HorizontalButtonList.vue";
-import BasePage from "./BasePage.vue"
+import { useRouter } from "vue-router";
+import { computed } from "vue";
+const props = defineProps({
+  name: String,
+  jumpTo: String,
+});
 
-@Options({
-  components: {
-    HorizontalButtonList
-  }
-})
-export default class SubPage extends BasePage {
-  constructor(props: any, name: string, jumpTo: string) {
-    super(props);
-
-    this.name = name;
-    this.jumpTo = jumpTo;
-    this.branchName = "./ButtonList/SubPage" + this.name;
-  }
-
-  private getButtonListConfig() {
-    const buttonListConfig = [{
-      name: "跳转子界面-" + this.jumpTo,
+console.log("cchtest subpage", props.name, props.jumpTo);
+const router = useRouter();
+const buttonListConfig = computed(() => {
+  return [
+    {
+      name: "跳转子界面-" + props.jumpTo,
       route: {
-        path: "SubPage" + this.jumpTo,
-        query: { from: 'sub' + this.name },
-      }
-    }];
-
-    return buttonListConfig;
-  }
+        path: "SubPage" + props.jumpTo,
+        query: { from: "sub" + props.name },
+      },
+    },
+  ];
+});
 
-  private onButtonClick(idx: number) {
-    const buttonListConfig = this.getButtonListConfig();
-    const config = buttonListConfig[idx];
-    console.log("Jump page to: " + config.name)
-    this.$router.push(config.route);
-  }
+const onButtonClick = (idx) => {
+  const config = buttonListConfig.value[idx];
+  console.log("Jump page to: " + config.name, props);
+  router.push(config.route);
+};
 
-  private readonly name: string;
-  private readonly jumpTo: string;
-}
+const onBack = () => {
+  router.go(-1);
+};
 </script>
 
 <template>
-<div>
-  <div class="title">
-    这是子界面{{name}}
-  </div>
-  <HorizontalButtonList
-      :style="{top: 230}"
-      :buttonConfig="getButtonListConfig()"
+  <div>
+    <div class="title">这是子界面{{ name }}</div>
+    <HorizontalButtonList
+      :style="{ top: 230 }"
+      :buttonConfig="buttonListConfig"
       :onButtonClick="onButtonClick"
       :onBack="onBack"
-  />
-  <div class="tip">
-    按返回键返回前一页
+    />
+    <div class="tip">按返回键返回前一页</div>
   </div>
-</div>
 </template>
 
 <style scoped>

package/samples/Input/App.vue

@@ -2,13 +2,12 @@
  * @Author: ChenChanghua
  * @Date: 2022-01-20 16:09:31
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-01-25 16:26:24
+ * @LastEditTime: 2022-07-08 13:37:44
  * @Description: file content
 -->
 <script>
-import { InputType } from "jsview/utils/JsViewVueWidget/JsvInput";
+import { InputType, EdgeDirection } from "jsview";
 import InputPanel from "./InputPanel.vue";
-import { EdgeDirection } from "jsview/utils/JsViewEngineWidget";
 
 export default {
   components: {

package/samples/Input/FullKeyboard.vue

@@ -2,15 +2,11 @@
  * @Author: ChenChanghua
  * @Date: 2022-01-25 10:27:17
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-01-26 09:37:39
+ * @LastEditTime: 2022-07-08 13:37:59
  * @Description: file content
 -->
 <script>
-import {
-  VERTICAL,
-  SimpleWidget,
-  // EdgeDirection,
-} from "jsview/utils/JsViewEngineWidget";
+import { VERTICAL, SimpleWidget } from "jsview";
 import KeyboardItem from "./KeyboardItem.vue";
 
 function _initData() {

package/samples/Input/InputPanel.vue

@@ -2,13 +2,12 @@
  * @Author: ChenChanghua
  * @Date: 2022-01-25 10:33:07
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-01-26 16:20:46
+ * @LastEditTime: 2022-07-08 13:38:14
  * @Description: file content
 -->
 <script>
 import FullKeyboard from "./FullKeyboard.vue";
-import JsvInput from "jsview/utils/JsViewVueWidget/JsvInput/JsvInput.vue";
-import { EdgeDirection } from "jsview/utils/JsViewEngineWidget";
+import { EdgeDirection, JsvInput } from "jsview";
 import { ref } from "vue";
 export default {
   components: {

package/samples/Input/KeyboardItem.vue

@@ -33,7 +33,7 @@ export default {
     },
     _onClick() {
       this.onClick(this.data);
-    }
+    },
   },
   created() {
     this.onAction.register("onFocus", this._onFocus);

package/samples/LongImage/App.vue

@@ -16,36 +16,20 @@
  *
  -->
 
-<script lang="ts">
-import { Options, Vue } from "vue-class-component";
+<script setup>
 import LongImageScroll from "./LongImageScroll.vue";
 import Button from "./Button.vue";
-import LongImageSource from "./assets/1280x7200.jpg";
+import longImageSource from "./assets/1280x7200.jpg";
+import { useRouter } from "vue-router";
 
-interface KeyEvent {
-  keyCode: Number;
-}
+const router = useRouter();
 
-@Options({
-  components: {
-    LongImageScroll,
-    Button,
-  },
-})
-class App extends Vue {
-  constructor(props: any) {
-    super(props);
+const onKeyDown = (ev) => {
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    router.go(-1); // 有router时，是从DemoHomepage进入，回退
   }
-  private LongImageSource: String = LongImageSource;
-
-  onKeyDown(ev: KeyEvent): Boolean {
-    if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-      this.$router?.go(-1); // 有router时，是从DemoHomepage进入，回退
-    }
-    return true;
-  }
-}
-export default App;
+  return true;
+};
 </script>
 
 
@@ -74,7 +58,7 @@ export default App;
     <div :style="{ left: 100, top: 100 }">
       <LongImageScroll
         :style="{ width: 1000, height: 500, backgroundColor: '#EEEEEE' }"
-        :imageSrc="LongImageSource"
+        :imageSrc="longImageSource"
         :scrollBlockStyle="{
           width: 10,
           height: 30,
@@ -89,7 +73,7 @@ export default App;
         :step="60"
       />
       <div :style="{ left: 400, top: 550 }">
-        <Button />
+        <Button></Button>
       </div>
     </div>
   </jsv-focus-block>