@shijiu/jsview-vue-samples 2.0.1073 → 2.0.1106

package/CssPreprocessor/utils/ContentList.vue

@@ -1,7 +1,7 @@
-<script>
+<script setup>
 import ContentBlock from './ContentBlock.vue';
-
-export default {
+import { computed } from "vue"
+/* export default {
   props: {
     style: Object,
     startIndex: Number,
@@ -15,20 +15,29 @@ export default {
       return this.style.height / 4;
     },
   }
-}
+} */
+
+const props = defineProps({
+  style: Object,
+  startIndex: Number,
+  contentData: Array,
+})
+
+const rowHeight=computed(()=>{
+  return props.style.height / 4;
+})
 </script>
 
 <template>
-<div :style=style>
-  <div v-for="(_, idx) in contentData.length" :key=idx>
-    <ContentBlock v-if="contentData[idx].zoom != 0"
-      :style="{top: rowHeight*idx, width: style.width, height: rowHeight * (contentData[idx].zoom ?? 1)}"
-      :index=startIndex+idx :title=contentData[idx].title >
-      <component  :is=contentData[idx].obj />
-    </ContentBlock>
+  <div :style=props.style>
+    <div v-for="(_, idx) in props.contentData.length" :key=idx>
+      <ContentBlock v-if="props.contentData[idx].zoom != 0"
+        :style="{ top: rowHeight * idx, width: props.style.width, height: rowHeight * (props.contentData[idx].zoom ?? 1) }"
+        :index=props.startIndex + idx :title=props.contentData[idx].title>
+        <component :is=props.contentData[idx].obj />
+      </ContentBlock>
+    </div>
   </div>
-</div>
 </template>
 
-<style>
-</style>
+<style></style>

package/CssPreprocessor/utils/Panel.vue

@@ -1,8 +1,8 @@
-<script>
+<script setup>
 import ContentList from './ContentList.vue';
 import TitleBar from './TitleBar.vue';
-
-export default {
+import { computed } from "vue"
+/* export default {
   props: {
     style: Object,
     panelData: Object,
@@ -20,30 +20,41 @@ export default {
       return 'rgba(142,175,153,1)'
     }
   },
-}
+} */
+
+const props = defineProps({
+  style: Object,
+  panelData: Object,
+  sideline: Boolean
+})
+const columnWidth=computed(()=>{
+  return props.style.width / props.panelData.title.length;
+})
+const separatorColor=computed(()=>{
+  return 'rgba(142,175,153,1)'
+})
 </script>
 
 <template>
-<div :style=style>
-  <!-- 分隔线 -->
-  <div v-if=sideline >
-    <div :style="{width:style.width, height:1, backgroundColor:separatorColor}" />
-    <div :style="{top:style.height, width:style.width, height:1, backgroundColor:separatorColor}" />
-    <div :style="{left: 0, width:1, height: style.height, backgroundColor:separatorColor}" />
-    <template v-for="(_, idx) in panelData.title" :key="idx" >
-      <div :style="{left: columnWidth*(idx+1), width:1, height: style.height, backgroundColor:separatorColor}" />
-    </template>
-  </div>
+  <div :style=props.style>
+    <!-- 分隔线 -->
+    <div v-if=props.sideline>
+      <div :style="{ width: props.style.width, height: 1, backgroundColor: separatorColor }" />
+      <div :style="{ top: props.style.height, width: props.style.width, height: 1, backgroundColor: separatorColor }" />
+      <div :style="{ left: 0, width: 1, height: props.style.height, backgroundColor: separatorColor }" />
+      <template v-for="(_, idx) in props.panelData.title" :key="idx">
+        <div
+          :style="{ left: columnWidth * (idx + 1), width: 1, height: props.style.height, backgroundColor: separatorColor }" />
+      </template>
+    </div>
 
-  <TitleBar :style="{width: columnWidth}" :titleData=panelData.title />
-  <div :style="{top:20}" >
-    <ContentList v-for="(_, idx) in panelData.contentList.length" :key=idx
-      :style="{left: columnWidth*idx, width: columnWidth, height: style.height-20}" :startIndex=idx
-      :contentData=panelData.contentList[idx]
-    />
+    <TitleBar :style="{ width: columnWidth }" :titleData=props.panelData.title />
+    <div :style="{ top: 20 }">
+      <ContentList v-for="(_, idx) in props.panelData.contentList.length" :key=idx
+        :style="{ left: columnWidth * idx, width: columnWidth, height: props.style.height - 20 }" :startIndex=idx
+        :contentData=props.panelData.contentList[idx] />
+    </div>
   </div>
-</div>
 </template>
 
-<style scoped>
-</style>
+<style scoped></style>

package/CssPreprocessor/utils/TitleBar.vue

@@ -1,16 +1,14 @@
-<script>
-export default {
-  props: {
-    style: Object,
-    titleData: Array
-  }
-}
+<script setup>
+const props = defineProps({
+  style: Object,
+  titleData: Array
+})
 </script>
 
 <template>
   <div>
-    <template v-for="(title, index) in titleData" :key="index" >
-      <div class='title-font title-range' :style="{left: style.width * index}">
+    <template v-for="(title, index) in props.titleData" :key="index">
+      <div class='title-font title-range' :style="{ left: props.style.width * index }">
         {{ title }}
       </div>
     </template>

package/DemoHomepage/components/BodyFrame.vue

@@ -1,93 +1,69 @@
-<script>
-import { watch } from "vue";
+<script setup>
+import { watch, shallowRef } from "vue";
 import { MetroWidget, VERTICAL } from "jsview";
 import Item from "./Item.vue";
+import { useRouter } from "vue-router";
+const router = useRouter();
+let mw = shallowRef(null)
+const props = defineProps({
+  data: Array,
+  name: String,
+  onEdge: Function,
+  tabId: Number,
+})
 
-export default {
-  components: {
-    Item,
-    MetroWidget,
-  },
-  props: {
-    data: Array,
-    name: String,
-    onEdge: Function,
-    tabId: Number,
-  },
-  setup() {
-    return {
-      direction: VERTICAL,
-      width: 1280,
-      height: 600,
-      initFocusId: 0,
-    };
-  },
-  methods: {
-    measures(item) {
-      return {
-        width: item.width,
-        height: item.height,
-        focusable: item.focusable,
-      };
-    },
-    itemClick(index, data) {
-      if (!data.path) {
-        console.error("Route path is not defined.");
-        return;
-      }
-      this.$router.push(data.path);
-      localStorage.curFocusId = index;
-      localStorage.curTab = this.tabId;
-    },
-    _provideData() {
-      return this.data;
-    },
-  },
-  beforeCreate() {
-    if (typeof localStorage.curFocusId !== "undefined") {
-      this.initFocusId = parseInt(localStorage.curFocusId);
-    }
-    localStorage.curFocusId = 0;
-    watch(
-      () => {
-        return this.data;
-      },
-      () => {
-        this.$refs.mw?.refreshData(true);
-      }
-    );
+const direction = VERTICAL;
+const width = 1280;
+const height = 600;
+let initFocusId = shallowRef(0);
+
+const measures = (item) => {
+  return {
+    width: item.width,
+    height: item.height,
+    focusable: item.focusable,
+  };
+}
+
+const itemClick = (index, data) => {
+  if (!data.path) {
+    console.error("Route path is not defined.");
+    return;
+  }
+  router.push(data.path);
+  localStorage.curFocusId = index;
+  localStorage.curTab = props.tabId;
+}
+
+const _provideData = () => {
+  return props.data;
+}
+
+if (typeof localStorage.curFocusId !== "undefined") {
+  initFocusId.value = parseInt(localStorage.curFocusId);
+}
+localStorage.curFocusId = 0;
+watch(
+  () => {
+    return props.data;
   },
-};
+  () => {
+    mw.value?.refreshData(true);
+  }
+);
 </script>
 
 <template>
-  <metro-widget
-    ref="mw"
-    :name="name"
-    :width="width"
-    :height="height"
-    :direction="direction"
-    :provideData="_provideData"
-    :enableTouch="true"
-    :measures="measures"
-    :padding="{ left: 10, top: 10, right: 10, bottom: 10 }"
-    :onEdge="onEdge"
-    :initFocusId="initFocusId"
-  >
+  <metro-widget ref="mw" :name="props.name" :width="width" :height="height" :direction="direction" :provideData="_provideData"
+    :enableTouch="true" :measures="measures" :padding="{ left: 10, top: 10, right: 10, bottom: 10 }"
+    :onEdge="props.onEdge" :initFocusId="initFocusId">
     <template #renderItem="{ data, query, onEdge, onAction }">
-      <Item
-        :style="{
+      <Item :style="{
           width: data.width,
           height: data.height,
           backgroundColor: data.backgroundColor,
           color: '#000000',
-        }"
-        :data="data"
-        :query="query"
-        :onEdge="onEdge"
-        :onAction="onAction"
-        :itemClick="itemClick"
-      >
+        }" :data="data" :query="query" :onEdge="onEdge" :onAction="onAction" :itemClick="itemClick">
         {{ data.name }}
       </Item>
     </template>

package/DemoHomepage/components/Dialog.vue

@@ -1,50 +1,43 @@
-<script>
-export default {
-  props: {
-    name: String,
-    onAction: Function,
-  },
-  data() {
-    return {
-      focusId: 0,
-    };
-  },
-  methods: {
-    onKeyDown(ev) {
-      switch (ev.keyCode) {
-        case 37:
-          if (this.focusId == 1) {
-            this.focusId = 0;
-          }
-          break;
-        case 39:
-          if (this.focusId == 0) {
-            this.focusId = 1;
-          }
-          break;
-        case 10000:
-        case 27:
-          this.onAction("back");
-          break;
-        case 13:
-          this.onAction(this.focusId == 0 ? "ok" : "cancel");
-          break;
-        default:
+<script setup>
+import { shallowRef } from "vue"
+const props = defineProps({
+  name: String,
+  onAction: Function,
+})
+
+let focusId = shallowRef(0)
+
+const onKeyDown = (ev) => {
+  switch (ev.keyCode) {
+    case 37:
+      if (focusId.value == 1) {
+        focusId.value = 0;
       }
-      return true;
-    },
-  },
-};
+      break;
+    case 39:
+      if (focusId.value == 0) {
+        focusId.value = 1;
+      }
+      break;
+    case 10000:
+    case 27:
+      props.onAction("back");
+      break;
+    case 13:
+      props.onAction(focusId.value == 0 ? "ok" : "cancel");
+      break;
+    default:
+  }
+  return true;
+}
+const actionDefines = {
+  onKeyDown
+}
+
 </script>
 
 <template>
-  <jsv-focus-block
-    autoFocus
-    :name="name"
-    :onAction="{
-      onKeyDown: onKeyDown,
-    }"
-  >
+  <jsv-focus-block autoFocus :name="props.name" :onAction="actionDefines">
     <div :style="{ top: 200, left: 465 }">
       <div class="background"></div>
       <div class="message">是否退出</div>
@@ -76,6 +69,7 @@ export default {
   text-align: center;
   font-size: 30;
 }
+
 .background {
   left: 0;
   top: 0;
@@ -83,6 +77,7 @@ export default {
   height: 200;
   background-color: rgba(0, 0, 0, 0.7);
 }
+
 .message {
   top: 20;
   width: 350;

package/DemoHomepage/components/Item.vue

@@ -1,58 +1,54 @@
-<script>
-export default {
-  props: {
-    style: Object,
-    itemClick: Function,
-    itemFocus: Function,
-    data: Object,
-    query: Object,
-    onEdge: Function,
-    onAction: Object,
-  },
-  data() {
-    return {
-      focused: false,
-      anim: "flip 1s",
-    };
-  },
-  computed: {
-    foucsStyle() {
-      return {
-        width: this.style.width,
-        height: this.style.height,
-      };
-    },
-    itemStyle() {
-      return {
-        width: this.style.width - 10,
-        height: this.style.height - 10,
-        backgroundColor: this.style.backgroundColor,
-        color: this.style.color,
-      };
-    },
-  },
-  methods: {
-    onFocus() {
-      this.focused = true;
-      if (this.itemFocus) {
-        this.itemFocus(this.data);
-      }
-    },
-    onBlur() {
-      this.focused = false;
-    },
-    onClick() {
-      if (this.itemClick) {
-        this?.itemClick(this.query.id, this.data);
-      }
-    },
-  },
-  created() {
-    this.onAction.register("onFocus", this.onFocus);
-    this.onAction.register("onBlur", this.onBlur);
-    this.onAction.register("onClick", this.onClick);
-  },
-};
+<script setup>
+import { shallowRef, computed } from "vue"
+const props = defineProps({
+  style: Object,
+  itemClick: Function,
+  itemFocus: Function,
+  data: Object,
+  query: Object,
+  onAction: Object,
+})
+
+let focused = shallowRef(false)
+
+const foucsStyle = computed(() => {
+  return {
+    width: props.style.width,
+    height: props.style.height,
+  };
+})
+
+const itemStyle = computed(() => {
+  return {
+    width: props.style.width - 10,
+    height: props.style.height - 10,
+    backgroundColor: props.style.backgroundColor,
+    color: props.style.color,
+  };
+
+})
+
+const onFocus = () => {
+  focused.value = true;
+  if (props.itemFocus) {
+    props.itemFocus(props.data);
+  }
+}
+
+const onBlur = () => {
+  focused.value = false;
+}
+
+const onClick = () => {
+  if (props.itemClick) {
+    props?.itemClick(props.query.id, props.data);
+  }
+}
+
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+props.onAction.register("onClick", onClick);
+
 </script>
 
 <template>
@@ -70,6 +66,7 @@ export default {
   left: -5;
   background-color: #0000ff;
 }
+
 .item {
   text-align: center;
   font-size: 30;

package/DemoHomepage/components/TabFrame.vue

@@ -1,4 +1,4 @@
-<script>
+<script setup>
 import { MetroWidget, VERTICAL } from "jsview";
 import Item from "./Item.vue";
 
@@ -10,88 +10,59 @@ const measures = (item) => {
   };
 };
 
-export default {
-  components: {
-    MetroWidget,
-    Item,
+const props = defineProps({
+  name: String,
+  itemFocus: Function,
+  onEdge: Function,
+  initId: Number,
+})
+
+const width = 1280;
+const height = 100;
+const data = [
+  {
+    width: 200,
+    height: 50,
+    name: "功能实例",
+    focusable: true,
+    id: 0,
   },
-  props: {
-    name: String,
-    itemFocus: Function,
-    onEdge: Function,
-    initId: Number,
+  {
+    width: 200,
+    height: 50,
+    name: "MetroWidget",
+    focusable: true,
+    id: 1,
   },
-  setup() {
-    const width = 1280;
-    const height = 100;
-    const data = [
-      {
-        width: 200,
-        height: 50,
-        name: "功能实例",
-        focusable: true,
-        id: 0,
-      },
-      {
-        width: 200,
-        height: 50,
-        name: "MetroWidget",
-        focusable: true,
-        id: 1,
-      },
-      {
-        width: 200,
-        height: 50,
-        name: "首页/运营",
-        focusable: true,
-        id: 2,
-      },
-      {
-        width: 200,
-        height: 50,
-        name: "游戏实例",
-        focusable: true,
-        id: 3,
-      }
-    ];
-    const direction = VERTICAL;
-    return {
-      width,
-      height,
-      data,
-      direction,
-      measures,
-    };
+  {
+    width: 200,
+    height: 50,
+    name: "首页/运营",
+    focusable: true,
+    id: 2,
   },
-};
+  {
+    width: 200,
+    height: 50,
+    name: "游戏实例",
+    focusable: true,
+    id: 3,
+  }
+];
+const direction = VERTICAL;
+
 </script>
 
 <template>
-  <metro-widget
-    :name="name"
-    :width="width"
-    :height="height"
-    :direction="direction"
-    :data="data"
-    :measures="measures"
-    :padding="{ left: 10, top: 10, right: 10, bottom: 10 }"
-    :onEdge="onEdge"
-    :initFocusId="initId"
-  >
+  <metro-widget :name="props.name" :width="width" :height="height" :direction="direction" :data="data"
+    :measures="measures" :padding="{ left: 10, top: 10, right: 10, bottom: 10 }" :onEdge="props.onEdge" :initFocusId="props.initId">
     <template #renderItem="{ data, query, onEdge, onAction }">
-      <Item
-        :style="{
+      <Item :style="{
           width: data.width,
           height: data.height,
           backgroundColor: '#00AA00',
           color: '#FFFFFF',
-        }"
-        :data="data"
-        :query="query"
-        :onEdge="onEdge"
-        :onAction="onAction"
-        :itemFocus="itemFocus"
-      >
+        }" :data="data" :query="query" :onEdge="onEdge" :onAction="onAction" :itemFocus="props.itemFocus">
         {{ data.name }}
       </Item>
     </template>

package/DemoHomepage/router.js

@@ -188,7 +188,7 @@ let routeList  = [
     component: () => import('jsview-vue-samples/FocusMoveStyle/App.vue'),
   },
   {
-    name: 'Mockjs',
+    name: 'Mockjs测试',
     path: '/feature/MockjsDemo',
     component: () => import('jsview-vue-samples/MockjsDemo/App.vue'),
   },