@shijiu/jsview-vue-samples 2.0.1073 → 2.0.1106

package/Basic/components/div/DivBackground.vue

@@ -4,48 +4,36 @@ import iconImgPath from "../../assets/icon.png";
 
 <template>
   <div id="layout-root">
-    <div
-      class="content-font"
-      :style="{
-        width: 180,
-        height: 40,
-        backgroundColor: 'rgba(255, 255, 0, 1)',
-      }"
-    >
+    <div class="content-font" :style="{
+      width: 180,
+      height: 40,
+      backgroundColor: 'rgba(255, 255, 0, 1)',
+    }">
       style.backgroundColor
     </div>
-    <div
-      class="content-font"
-      :style="{
+    <div class="content-font" :style="{
         top: 50,
         width: 180,
         height: 40,
         backgroundImage: `url(${iconImgPath})`,
-      }"
-    >
+      }">
       style.backgroundImage(url)
     </div>
-    <div
-      class="content-font"
-      :style="{
+    <div class="content-font" :style="{
         top: 100,
         width: 90,
         height: 40,
-        backgroundImage: 'linear-gradient(to left bottom, rgba(255, 0, 0, 1.0), rgba(0,255,0,1.0), rgba(0,0,255,1.0))',
-      }"
-    >
+        backgroundImage: 'linear-gradient(to left bottom, rgba(255, 0, 0, 1), rgba(0,255,0,1), rgba(0,0,255,1))',
+      }">
       gradient
     </div>
-    <div
-      class="content-font"
-      :style="{
+    <div class="content-font" :style="{
         top: 100,
         left: 92,
         width: 90,
         height: 40,
-        backgroundImage: 'linear-gradient(rgba(255, 0, 0, 1.0), rgba(0,255,0,1.0))',
-      }"
-    >
+        backgroundImage: 'linear-gradient(rgba(255, 0, 0, 1), rgba(0,255,0,1))',
+      }">
       gradient
     </div>
   </div>

package/Basic/components/img/ImageGroup.vue

@@ -1,31 +1,25 @@
 <template>
     <div id='item-root'>
-        <ContentBlock :class=contentClass :style="{top:itemSides.height*0}" :=contentBlockProps :index=0 title="img标签ObjectFit">
-             <ImgLayout/>
+        <ContentBlock :class=props.contentClass :style="{ top: itemSides.height * 0 }" :=contentBlockProps :index=0
+            title="img标签ObjectFit">
+            <ImgLayout />
         </ContentBlock>
     </div>
 </template>
 
-<script>
+<script setup>
 import ContentBlock from '../ContentBlock.vue';
 import ImgLayout from './ImgLayout.vue';
+import { computed } from "vue"
 
-export default {
-    props: {
-        contentClass: String,
-        itemSides: Object 
-    },
-    components: {
-        ContentBlock,
-        ImgLayout,
-    },
-    computed: {
-        contentBlockProps() {
-            return {
-                colIndex: 0,
-                itemSides:{...this.itemSides, height: this.itemSides.height * 2}
-            }
-        }
+const props = defineProps({
+    contentClass: String,
+    itemSides: Object
+})
+const contentBlockProps = computed(() => {
+    return {
+        colIndex: 0,
+        itemSides: { ...props.itemSides, height: props.itemSides.height * 2 }
     }
-}
+})
 </script>

package/Basic/components/img/ImgLayout.vue

@@ -1,80 +1,69 @@
 <template>
-<div id='layout-root'>
-    <div style="{top: 0}">
-        <div id="0列0行" :style="{left: coloumWidth * 0, top: tabLineHeight * 0}">
-            <div class="content-font titleStyle"> fill(缩放变形)</div>
-            <div class="frameStyle">
-                <img class="imageStyle" :style="{ objectFit: 'fill' }"
-                    :src="testImgPath"/>
+    <div id='layout-root'>
+        <div style="{top: 0}">
+            <div id="0列0行" :style="{ left: coloumWidth * 0, top: tabLineHeight * 0 }">
+                <div class="content-font titleStyle"> fill(缩放变形)</div>
+                <div class="frameStyle">
+                    <img class="imageStyle" :style="{ objectFit: 'fill' }" :src="testImgPath" />
+                </div>
             </div>
-        </div>
-        <div id="1列0行" :style="{left: coloumWidth * 1, top: tabLineHeight * 0}">
-            <div class="content-font titleStyle">contain</div>
-            <div class="frameStyle">
-                <img class="imageStyle" :style="{ objectFit: 'contain' }"
-                    :src="testImgPath"/>
+            <div id="1列0行" :style="{ left: coloumWidth * 1, top: tabLineHeight * 0 }">
+                <div class="content-font titleStyle">contain</div>
+                <div class="frameStyle">
+                    <img class="imageStyle" :style="{ objectFit: 'contain' }" :src="testImgPath" />
+                </div>
             </div>
-        </div>
-        <div id="0列1行" :style="{left: coloumWidth * 0, top: tabLineHeight * 1}">
-            <div class="content-font titleStyle">none</div>
-            <div class="frameStyle">
-                <img class="imageStyle" :style="{ objectFit: 'none' }"
-                    :src="testImgPath"/>
+            <div id="0列1行" :style="{ left: coloumWidth * 0, top: tabLineHeight * 1 }">
+                <div class="content-font titleStyle">none</div>
+                <div class="frameStyle">
+                    <img class="imageStyle" :style="{ objectFit: 'none' }" :src="testImgPath" />
+                </div>
             </div>
-        </div>
-        <div id="1列1行" :style="{left: coloumWidth * 1, top: tabLineHeight * 1}">
-            <div class="content-font titleStyle">scale-down</div>
-            <div class="frameStyle">
-                <img class="imageStyle" :style="{ objectFit: 'scale-down' }"
-                    :src="testImgPath"/>
+            <div id="1列1行" :style="{ left: coloumWidth * 1, top: tabLineHeight * 1 }">
+                <div class="content-font titleStyle">scale-down</div>
+                <div class="frameStyle">
+                    <img class="imageStyle" :style="{ objectFit: 'scale-down' }" :src="testImgPath" />
+                </div>
             </div>
-        </div>
-        <div id="0列2行" :style="{left: coloumWidth * 0, top: tabLineHeight * 2}">
-            <div class="content-font titleStyle">cover</div>
-            <div class="frameStyle">
-                <img class="imageStyle" :style="{ objectFit: 'cover' }"
-                    :src="testImgPath"/>
+            <div id="0列2行" :style="{ left: coloumWidth * 0, top: tabLineHeight * 2 }">
+                <div class="content-font titleStyle">cover</div>
+                <div class="frameStyle">
+                    <img class="imageStyle" :style="{ objectFit: 'cover' }" :src="testImgPath" />
+                </div>
             </div>
-        </div>
-        <div id="1列2行" :style="{left: coloumWidth * 1, top: tabLineHeight * 2}">
-            <div class="content-font titleStyle">none(小图)</div>
-            <div class="frameStyle">
-                <img class="imageStyle" :style="{ objectFit: 'none' }"
-                    :src="tinyImgPath"/>
+            <div id="1列2行" :style="{ left: coloumWidth * 1, top: tabLineHeight * 2 }">
+                <div class="content-font titleStyle">none(小图)</div>
+                <div class="frameStyle">
+                    <img class="imageStyle" :style="{ objectFit: 'none' }" :src="tinyImgPath" />
+                </div>
             </div>
-        </div>
-        <div id="0列3行" :style="{left: coloumWidth * 0, top: tabLineHeight * 3}">
-            <div class="content-font titleStyle">scale-down(小图)</div>
-            <div class="frameStyle">
-                <img class="imageStyle" :style="{ objectFit: 'scale-down' }"
-                    :src="tinyImgPath"/>
+            <div id="0列3行" :style="{ left: coloumWidth * 0, top: tabLineHeight * 3 }">
+                <div class="content-font titleStyle">scale-down(小图)</div>
+                <div class="frameStyle">
+                    <img class="imageStyle" :style="{ objectFit: 'scale-down' }" :src="tinyImgPath" />
+                </div>
             </div>
         </div>
     </div>
-</div>
 </template>
 
-<script>
-import testImgPath from '../../assets/test.jpg';
-import tinyImgPath from '../../assets/icon.png';
-
-export default {
-    computed: {
-        testImgPath() {
-            return testImgPath;
-        },
-        tinyImgPath() {
-            return tinyImgPath;
-        },
-        coloumWidth() {
-            return 120;
-        },
-        tabLineHeight() {
-            return 76; // imageSize.height + 26
-        }
-    }
-}
+<script setup>
+import testImgPath1 from '../../assets/test.jpg';
+import tinyImgPath1 from '../../assets/icon.png';
+import { computed } from "vue"
 
+const testImgPath = computed(() => {
+    return testImgPath1;
+})
+const tinyImgPath = computed(() => {
+    return tinyImgPath1;
+})
+const coloumWidth = computed(() => {
+    return 120;
+})
+const tabLineHeight = computed(() => {
+    return 76;// imageSize.height + 26
+})
 </script>
 
 
@@ -96,10 +85,12 @@ export default {
 }
 
 .frameStyle {
-    top: 16; /* titleHeight */
-    width: 104; /* imageSize.width+4 */
-    height: 54; /* imageSize.height+4 */
+    top: 16;
+    /* titleHeight */
+    width: 104;
+    /* imageSize.width+4 */
+    height: 54;
+    /* imageSize.height+4 */
     background-color: rgba(0, 255, 0, 1)
 }
-
 </style>

package/BasicFocusControl/components/BaseBlock.vue

@@ -27,23 +27,17 @@ const onBlur = () => {
 </script>
 
 <template>
-  <jsv-focus-block
-    ref="blockRef"
-    :name="name"
-    :onAction="{
-      onKeyDown,
-      onFocus,
-      onBlur,
-    }"
-  >
-    <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="props.name" :onAction="{
+    onKeyDown,
+    onFocus,
+    onBlur,
+  }">
+    <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>

package/BasicFocusControl/components/MainAreaLeftBlock.vue

@@ -1,7 +1,7 @@
 <script setup>
 import BaseBlock from "./BaseBlock.vue";
 
-defineProps({
+const props = defineProps({
   name: String,
   style: {
     type: Object,
@@ -13,5 +13,5 @@ defineProps({
 </script>
 
 <template>
-  <BaseBlock :name="name" :style="style" />
+  <BaseBlock :name="props.name" :style="props.style" />
 </template>

package/BasicFocusControl/components/MainAreaRightBlock.vue

@@ -1,7 +1,7 @@
 <script setup>
 import BaseBlock from "./BaseBlock.vue";
 import { useFocusHub } from "jsview";
-defineProps({
+const props=defineProps({
   name: String,
   style: {
     type: Object,
@@ -23,5 +23,5 @@ const onKeyDown = (ev) => {
 </script>
 
 <template>
-  <BaseBlock :name="name" :style="style" :onKeyDown="onKeyDown" />
+  <BaseBlock :name="props.name" :style="props.style" :onKeyDown="onKeyDown" />
 </template>

package/BasicFocusControl/components/SideBarBlock.vue

@@ -2,7 +2,7 @@
 import BaseBlock from "./BaseBlock.vue";
 import { useFocusHub } from "jsview";
 
-defineProps({
+const props=defineProps({
   name: String,
   style: {
     type: Object,
@@ -23,5 +23,5 @@ const onKeyDown = (ev) => {
 </script>
 
 <template>
-  <BaseBlock :name="name" :style="style" :onKeyDown="onKeyDown" />
+  <BaseBlock :name="props.name" :style="props.style" :onKeyDown="onKeyDown" />
 </template>

package/CssPreprocessor/App.vue

@@ -1,70 +1,59 @@
-<script>
+<script setup>
 import ScssApp from './Scss/App.vue';
 import LessApp from './Less/App.vue';
 import StylusApp from './Stylus/App.vue';
+import { useRouter } from "vue-router";
+import { reactive } from "vue"
+const router = useRouter();
+const panelInfo = reactive({
+  index: 1,
+  total: 3,
+  desc: "1/3",
+})
+const onKeyDown = (ev) => {
+  console.log('onKeyDown');
+  // 8:Backspace, 27:Escape, 10000:盒子返回键
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    console.log("Basic has router: ", !!router)
+    router?.go(-1); // 有router时，是从DemoHomepage进入，回退
+    return true;
+  } else if (ev.keyCode == 37) { // left
+    panelInfo.index = (--panelInfo.index > 1 ? panelInfo.index : 1);
+    panelInfo.desc = (panelInfo.index + '/' + panelInfo.total);
+    return true;
+  } else if (ev.keyCode == 39) { // right
+    panelInfo.index = (++panelInfo.index < panelInfo.total ? panelInfo.index : panelInfo.total);
+    panelInfo.desc = (panelInfo.index + '/' + panelInfo.total);
+    return true;
+  }
 
-export default {
-  components: {
-    ScssApp,
-    LessApp,
-    StylusApp
-  },
-  data() {
-    return {
-      panelInfo: {
-        index: 1,
-        total: 3,
-        desc: "1/3",
-      }
-    };
-  },
-  mounted() {
-  },
-  methods: {
-    onKeyDown(ev) {
-      console.log('onKeyDown');
-      // 8:Backspace, 27:Escape, 10000:盒子返回键
-      if(ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-        console.log("Basic has this.$router: ", !!this.$router)
-        this.$router?.go(-1); // 有router时，是从DemoHomepage进入，回退
-        return true;
-      } else if(ev.keyCode == 37) { // left
-        this.panelInfo.index = (--this.panelInfo.index > 1 ? this.panelInfo.index : 1);
-        this.panelInfo.desc = (this.panelInfo.index + '/' + this.panelInfo.total);
-        return true;
-      } else if(ev.keyCode == 39) { // right
-        this.panelInfo.index = (++this.panelInfo.index < this.panelInfo.total ? this.panelInfo.index : this.panelInfo.total);
-        this.panelInfo.desc = (this.panelInfo.index + '/' + this.panelInfo.total);
-        return true;
-      }
-
-      return false;
-    }
-  },
+  return false;
 }
+const actionDefines = {
+  onKeyDown
+}    
 </script>
 
 <template>
-<div>
-  <!-- 有router时，将按键交给router去处理，此处没有其他用处 -->
-  <jsv-focus-block autoFocus :onKeyDown="onKeyDown"/>
-
-  <div clcss="root">
-      <ScssApp v-if="panelInfo.index == 1"/>
-      <LessApp v-else-if="panelInfo.index == 2"/>
-      <StylusApp v-else-if="panelInfo.index == 3"/>
-      <div :style="{top: 660, left:30, width:50}">
+  <div>
+    <!-- 有router时，将按键交给router去处理，此处没有其他用处 -->
+    <jsv-focus-block autoFocus :onAction="actionDefines" />
+    <div class="root">
+      <ScssApp v-if="panelInfo.index == 1" />
+      <LessApp v-else-if="panelInfo.index == 2" />
+      <StylusApp v-else-if="panelInfo.index == 3" />
+      <div :style="{ top: 660, left: 30, width: 50 }">
         {{ panelInfo.desc }}
       </div>
-      <div :style="{top: 660, left:100, width:500}">
+      <div :style="{ top: 660, left: 100, width: 500 }">
         按左/右键切换Panel，按Back键返回
       </div>
+    </div>
   </div>
-</div>
 </template>
 
 <style scoped>
 .root {
-  color: #0000FF;
+  color: #FF0000;
 }
 </style>

package/CssPreprocessor/Less/App.vue

@@ -1,32 +1,24 @@
-<script>
+<script setup>
 import { panelData } from './PanelData';
 import Panel from '../utils/Panel.vue';
 
-export default {
-  components: {
-    Panel
-  },
-  setup() {
-    return {
-      panelData,
-    };
-  },
-}
 </script>
 
 <template>
 <div>
   <div class="root">
       <Panel :style="{top:10, left:10, width:1230, height:640}"
-        :panelData=panelData :sideline=true />
+        :panelData="panelData" :sideline="true" />
   </div>
 </div>
 </template>
 
 <style scoped>
 .root {
-  top: 10; left: 10;
-  width: 1250; height: 670;
+  top: 10; 
+  left: 10;
+  width: 1250; 
+  height: 670;
   background-color: #d6e1ce
 }
 </style>

package/CssPreprocessor/Scss/App.vue

@@ -1,32 +1,24 @@
-<script>
+<script setup>
 import { panelData } from './PanelData';
 import Panel from '../utils/Panel.vue';
 
-export default {
-  components: {
-    Panel
-  },
-  setup() {
-    return {
-      panelData,
-    };
-  },
-}
 </script>
 
 <template>
 <div>
   <div class="root">
       <Panel :style="{top:10, left:10, width:1230, height:640}"
-        :panelData=panelData :sideline=true />
+        :panelData="panelData" :sideline="true" />
   </div>
 </div>
 </template>
 
 <style scoped>
 .root {
-  top: 10; left: 10;
-  width: 1250; height: 670;
+  top: 10; 
+  left: 10;
+  width: 1250;
+  height: 670;
   background-color: #d6e1ce
 }
 </style>

package/CssPreprocessor/Scss/components/scss-group1/ScssOperations.vue

@@ -21,7 +21,6 @@ export default {
 .scss-op {
   color: #126085;   /* 不支持乘法样例 如：color: #001100 * 16 */
   font-size: 20 - 6; /* 此处为运算符'-'样例 */
-
   left: 10;
   top: 3;
   width: 230;

package/CssPreprocessor/Stylus/App.vue

@@ -1,32 +1,24 @@
-<script>
+<script setup>
 import { panelData } from './PanelData';
 import Panel from '../utils/Panel.vue';
 
-export default {
-  components: {
-    Panel
-  },
-  setup() {
-    return {
-      panelData,
-    };
-  },
-}
 </script>
 
 <template>
 <div>
   <div class="root">
       <Panel :style="{top:10, left:10, width:1230, height:640}"
-        :panelData=panelData :sideline=true />
+        :panelData="panelData" :sideline="true" />
   </div>
 </div>
 </template>
 
 <style scoped>
 .root {
-  top: 10; left: 10;
-  width: 1250; height: 670;
+  top: 10; 
+  left: 10;
+  width: 1250; 
+  height: 670;
   background-color: #d6e1ce
 }
 </style>

package/CssPreprocessor/utils/ContentBlock.vue

@@ -1,6 +1,6 @@
-<script>
-
-export default {
+<script setup>
+import { computed } from "vue"
+/* export default {
   props: {
     index: Number,
     style: Object,
@@ -22,21 +22,39 @@ export default {
     }
   }
 
+} */
+const props = defineProps({
+  index: Number,
+  style: Object,
+  title: String,
+})
+
+const blockOpacity = computed(() => {
+  return 0.4 * ((props.index % 3) + 1) / 3;
+})
+
+const titleStyle = {
+  lineHeight: 18,
+  width: props.style.width, height: 18,
+  backgroundColor: 'rgba(142,175,153,1)',
+  textAlign: 'center'
 }
 
 </script>
 
 <template>
-<div :style=style>
-  <div class="container-font" :style=titleStyle>
-    {{title}}
-  </div>
-  <div class="content-font" :style="{ top: titleStyle.lineHeight,
-                 width: style.width, height: style.height - 18,
-                 backgroundColor: 'rgba(0,0,0,'+blockOpacity+')' }">
-    <slot/>
+  <div :style=props.style>
+    <div class="container-font" :style=titleStyle>
+      {{ title }}
+    </div>
+    <div class="content-font" :style="{
+      top: titleStyle.lineHeight,
+      width: props.style.width, height: props.style.height - 18,
+      backgroundColor: 'rgba(0,0,0,' + blockOpacity + ')'
+    }">
+      <slot />
+    </div>
   </div>
-</div>
 </template>
 
 <style>