@shijiu/jsview-vue 0.9.502 → 0.9.631

package/samples/Basic/components/div/DivRadius.vue

@@ -1,56 +1,65 @@
+<script setup>
+import iconImgPath from "../../assets/icon.png";
+const blockSize = {
+  width: 65,
+  height: 65,
+};
+const gap = 5;
+</script>
+
 <template>
-<div id='layout-root'>
-    <div class="content-font" :style="{
-        width: blockSize.width, height: blockSize.height,
+  <div id="layout-root">
+    <div
+      class="content-font"
+      :style="{
+        width: blockSize.width,
+        height: blockSize.height,
         backgroundColor: 'rgba(255, 255, 0, 1)',
-        borderRadius: '10px' }">
-        各角相同
+        borderRadius: '10px',
+      }"
+    >
+      各角相同
     </div>
-    <div class="content-font" :style="{
-        left: blockSize.width+gap,
-        width: blockSize.width, height: blockSize.height,
+    <div
+      class="content-font"
+      :style="{
+        left: blockSize.width + gap,
+        width: blockSize.width,
+        height: blockSize.height,
         backgroundColor: 'rgba(255, 255, 0, 1)',
-        borderRadius: '0 10px 20px 30px'}">
-        各角不同
+        borderRadius: '0 10px 20px 30px',
+      }"
+    >
+      各角不同
     </div>
-    <div class="content-font" :style="{
-        top: blockSize.height+gap,
-        width: blockSize.width, height: blockSize.height,
+    <div
+      class="content-font"
+      :style="{
+        top: blockSize.height + gap,
+        width: blockSize.width,
+        height: blockSize.height,
         backgroundImage: `url(${iconImgPath})`,
-        borderRadius: '10px'}">
-        各角相同
+        borderRadius: '10px',
+      }"
+    >
+      各角相同
     </div>
-    <div class="content-font" :style="{ 
-        left: blockSize.width+gap, top: blockSize.height+gap,
-        width: blockSize.width, height: blockSize.height,
+    <div
+      class="content-font"
+      :style="{
+        left: blockSize.width + gap,
+        top: blockSize.height + gap,
+        width: blockSize.width,
+        height: blockSize.height,
         backgroundImage: `url(${iconImgPath})`,
-        borderRadius: '0 10px 20px 30px'}">
-        各角不同
+        borderRadius: '0 10px 20px 30px',
+      }"
+    >
+      各角不同
     </div>
-</div>
+  </div>
 </template>
 
-<script>
-import iconImgPath from '../../assets/icon.png';
-
-export default {
-    computed: {
-        iconImgPath() {
-            return iconImgPath
-        },
-        blockSize() {
-            return {
-                width: 65,
-                height: 65,
-            }
-        },
-        gap() {
-            return 5;
-        }
-    }
-}
-</script>
-
 <style>
 @import "../FontStyle.css";
 </style>

package/samples/Basic/components/div/DivTransform.vue

@@ -1,27 +1,32 @@
-<template>
-<div id='layout-root'>
-    <div class="content-font" :style="{
-        left: 10, top: 10,
-        width: blockSize.width, height: blockSize.height,
-        backgroundColor: 'rgba(255, 255, 0, 1)',
-        transform: 'rotate3d(0, 0, 1, 30deg)' }">
-        rotate3d
-    </div>
-</div>
-</template>
-
 <script setup>
-/* eslint-disable no-unused-vars */
-import iconImgPath from '../../assets/icon.png';
+import iconImgPath from "../../assets/icon.png";
 
 const blockSize = {
-    width: 65,
-    height: 65,
+  width: 65,
+  height: 65,
 };
 
 const gap = 5;
 </script>
 
+<template>
+  <div id="layout-root">
+    <div
+      class="content-font"
+      :style="{
+        left: 10,
+        top: 10,
+        width: blockSize.width,
+        height: blockSize.height,
+        backgroundColor: 'rgba(255, 255, 0, 1)',
+        transform: 'rotate3d(0, 0, 1, 30deg)',
+      }"
+    >
+      rotate3d
+    </div>
+  </div>
+</template>
+
 <style>
 @import "../FontStyle.css";
 </style>

package/samples/Basic/components/panel/Panel1.vue

@@ -1,52 +1,54 @@
-<script>
-import TitleBar from './TitleBar';
-import DivGroup1 from '../div/DivGroup1';
-import DivGroup2 from '../div/DivGroup2';
-import TextGroup1 from '../text/TextGroup1';
-import TextGroup2 from '../text/TextGroup2';
-import AnimGroup from '../anim/AnimGroup';
+<script setup>
+import TitleBar from "./TitleBar";
+import DivGroup1 from "../div/DivGroup1";
+import DivGroup2 from "../div/DivGroup2";
+import TextGroup1 from "../text/TextGroup1";
+import TextGroup2 from "../text/TextGroup2";
+import AnimGroup from "../anim/AnimGroup";
 
-export default {
-    props: {
-      panelClass: String,
-      itemSides: Object,
-    },
-    components: {
-      TitleBar,
-      DivGroup1, DivGroup2,
-      TextGroup1, TextGroup2,
-      AnimGroup
-    },
-    computed: {
-        titleData() {
-            return [
-              'div标签1',
-              'div标签2',
-              'div文本1',
-              'div文本2',
-              'div动画',
-            ];
-        }
-    }
-}
+const props = defineProps({
+  panelClass: String,
+  itemSides: Object,
+});
+
+const titleData = ["div标签1", "div标签2", "div文本1", "div文本2", "div动画"];
 </script>
 
 <template>
-<div :class="panelClass">
-  <TitleBar :class="panelClass" :itemSides=itemSides :titleData=titleData />
-  <div :class="panelClass" :style="{top:20}">
-    <DivGroup1 :style="{left: itemSides.width*0}"
-      :contentClass="panelClass" :itemSides=itemSides />
-    <DivGroup2 :style="{left: itemSides.width*1}"
-      :contentClass="panelClass" :itemSides=itemSides />
-    <TextGroup1 :style="{left: itemSides.width*2}"
-      :contentClass="panelClass" :itemSides=itemSides />
-    <TextGroup2 :style="{left: itemSides.width*3}"
-      :contentClass="panelClass" :itemSides=itemSides />
-    <AnimGroup :style="{left: itemSides.width*4}"
-      :contentClass="panelClass" :itemSides=itemSides />
+  <div :class="panelClass">
+    <TitleBar
+      :class="panelClass"
+      :itemSides="itemSides"
+      :titleData="titleData"
+    />
+    <div :class="panelClass" :style="{ top: 20 }">
+      <DivGroup1
+        :style="{ left: itemSides.width * 0 }"
+        :contentClass="panelClass"
+        :itemSides="itemSides"
+      />
+      <DivGroup2
+        :style="{ left: itemSides.width * 1 }"
+        :contentClass="panelClass"
+        :itemSides="itemSides"
+      />
+      <TextGroup1
+        :style="{ left: itemSides.width * 2 }"
+        :contentClass="panelClass"
+        :itemSides="itemSides"
+      />
+      <TextGroup2
+        :style="{ left: itemSides.width * 3 }"
+        :contentClass="panelClass"
+        :itemSides="itemSides"
+      />
+      <AnimGroup
+        :style="{ left: itemSides.width * 4 }"
+        :contentClass="panelClass"
+        :itemSides="itemSides"
+      />
+    </div>
   </div>
-</div>
 </template>
 
 <style>

package/samples/Basic/components/panel/Panel2.vue

@@ -1,34 +1,30 @@
-<script>
-import TitleBar from './TitleBar';
-import ImageGroup from '../img/ImageGroup';
+<script setup>
+import TitleBar from "./TitleBar";
+import ImageGroup from "../img/ImageGroup";
 
-export default {
-    props: {
-      panelClass: String,
-      itemSides: Object,
-    },
-    components: {
-      TitleBar,
-      ImageGroup
-    },
-    computed: {
-        titleData() {
-            return [
-              'img标签',
-            ];
-        }
-    }
-}
+const props = defineProps({
+  panelClass: String,
+  itemSides: Object,
+});
+
+const titleData = ["img标签"];
 </script>
 
 <template>
-<div :class="panelClass">
-  <TitleBar :class="panelClass" :itemSides=itemSides :titleData=titleData />
-  <div :class="panelClass" :style="{top:20}">
-    <ImageGroup :style="{left: itemSides.width*0}"
-      :contentClass="panelClass" :itemSides=itemSides />
+  <div :class="panelClass">
+    <TitleBar
+      :class="panelClass"
+      :itemSides="itemSides"
+      :titleData="titleData"
+    />
+    <div :class="panelClass" :style="{ top: 20 }">
+      <ImageGroup
+        :style="{ left: itemSides.width * 0 }"
+        :contentClass="panelClass"
+        :itemSides="itemSides"
+      />
+    </div>
   </div>
-</div>
 </template>
 
 <style>

package/samples/Basic/components/panel/TitleBar.vue

@@ -1,22 +1,23 @@
+<script setup>
+const props = defineProps({
+  itemSides: Object,
+  titleData: Array,
+});
+</script>
+
 <template>
   <div>
-    <template v-for="(title, index) in titleData" :key="index" >
-      <div class='title-font item-style' :style="{...itemSides, left: itemSides.width * index}">
+    <template v-for="(title, index) in titleData" :key="index">
+      <div
+        class="title-font item-style"
+        :style="{ ...itemSides, left: itemSides.width * index }"
+      >
         {{ title }}
       </div>
     </template>
   </div>
 </template>
 
-<script>
-export default {
-  props: {
-    itemSides: Object,
-    titleData: Array
-  }
-}
-</script>
-
 <style>
 @import "../FontStyle.css";
 </style>
@@ -25,5 +26,4 @@ export default {
 .item-style {
   text-align: center;
 }
-
 </style>

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

@@ -1,56 +1,66 @@
+<script setup>
+const blockSize = {
+  width: 90,
+  height: 40,
+};
+const blockStyle = {
+  width: blockSize.width,
+  height: blockSize.height,
+  backgroundColor: "rgba(255, 255, 0, 0.5)",
+  color: "rgba(255, 0, 0, 1)",
+};
+</script>
+
 <template>
-<div id='layout-root'>
-    <div class="content-font" :style="{ ...blockStyle,
-        width: blockSize.width*1.5}">
-        左上(默认)
+  <div id="layout-root">
+    <div
+      class="content-font"
+      :style="{ ...blockStyle, width: blockSize.width * 1.5 }"
+    >
+      左上(默认)
     </div>
-    <div class="content-font" :style="{ ...blockStyle,
-        top: blockSize.height+5,
-        textAlign: 'center' }">
-        中上
+    <div
+      class="content-font"
+      :style="{ ...blockStyle, top: blockSize.height + 5, textAlign: 'center' }"
+    >
+      中上
     </div>
-    <div class="content-font" :style="{ ...blockStyle,
-        left: blockSize.width+5, top: blockSize.height+5,
-        textAlign: 'right' }">
-        右上
+    <div
+      class="content-font"
+      :style="{
+        ...blockStyle,
+        left: blockSize.width + 5,
+        top: blockSize.height + 5,
+        textAlign: 'right',
+      }"
+    >
+      右上
     </div>
-    <div class="content-font" :style="{ ...blockStyle,
-        top: (blockSize.height+5)*2,
-        lineHeight: blockSize.height}">
-        垂直中
+    <div
+      class="content-font"
+      :style="{
+        ...blockStyle,
+        top: (blockSize.height + 5) * 2,
+        lineHeight: blockSize.height,
+      }"
+    >
+      垂直中
     </div>
-    <div class="content-font" :style="{ ...blockStyle,
-        left: blockSize.width+5, top: (blockSize.height+5)*2,
+    <div
+      class="content-font"
+      :style="{
+        ...blockStyle,
+        left: blockSize.width + 5,
+        top: (blockSize.height + 5) * 2,
         lineHeight: blockSize.height,
-        textAlign: 'center' }">
-        正中
+        textAlign: 'center',
+      }"
+    >
+      正中
     </div>
-</div>
+  </div>
 </template>
 
-<script>
-export default {
-    computed: {
-        blockSize() {
-            return {
-                width: 90,
-                height: 40,
-            }
-        },
-        blockStyle() {
-            return {
-                width: this.blockSize.width,
-                height: this.blockSize.height,
-                backgroundColor: 'rgba(255, 255, 0, 0.5)',
-                color: 'rgba(255, 0, 0, 1)',
-            }
-        }
-    }
-}
-
-/* eslint-disable no-unused-vars */
-</script>
-
 <style>
 @import "../FontStyle.css";
 </style>

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

@@ -1,30 +1,26 @@
 <template>
-<div id='layout-root'>
+  <div id="layout-root">
     <div
-        :style="{
-            width: 300, height: 100,
-            fontSize: 20,
-            JsvTextEmoji: true
-        }"
+      :style="{
+        width: 300,
+        height: 100,
+        fontSize: 20,
+      }"
+      jsv_text_emoji="true"
     >
-        style: 😀笑🇨🇳中国\n👨‍👩‍👧‍👦家庭
+      {{ `style: 😀笑🇨🇳中国\n👨‍👩‍👧‍👦家庭` }}
     </div>
-    <div
-        class="emoji"
-    >
-        class: 😀笑🇨🇳中国\n👨‍👩‍👧‍👦家庭
+    <div class="emoji" jsv_text_emoji="true">
+      {{ `class: 😀笑🇨🇳中国\n👨‍👩‍👧‍👦家庭` }}
     </div>
-</div>
+  </div>
 </template>
 
-<script>
-</script>
-
 <style>
-.emoji{
-    top: 100;
-    width: 300;
-    height: 100;
-    font-size: 20;
+.emoji {
+  top: 100;
+  width: 300;
+  height: 100;
+  font-size: 20;
 }
 </style>

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

@@ -1,65 +1,89 @@
+<script setup>
+const gap = 5;
+const blockStyle = {
+  width: 70,
+  height: 20,
+};
+</script>
+
 <template>
-<div id='layout-root'>
+  <div id="layout-root">
     <div>
-        <div class="content-font" :style="{ ...blockStyle }">[字体]</div>
-        <div class="content-font" :style="{ ...blockStyle, top: 25,
-            fontFamily: '宋体' }">
-            abc宋体
-        </div>
-        <div class="content-font" :style="{ ...blockStyle, top: 25, left: blockStyle.width+gap,
-            fontFamily: '黑体' }">
-            abc黑体
-        </div>
-        <div :style="{ top: 25, left: (blockStyle.width+gap)*2-10,
-            width: blockStyle.width+30, height: 28,
-            fontFamily: '黑体', fontSize: '24px',
-            WebkitTextStroke: '1px rgba(255,255,0,1.0)'}">
-            abc描边
-        </div>
+      <div class="content-font" :style="{ ...blockStyle }">[字体]</div>
+      <div
+        class="content-font"
+        :style="{ ...blockStyle, top: 25, fontFamily: '宋体' }"
+      >
+        abc宋体
+      </div>
+      <div
+        class="content-font"
+        :style="{
+          ...blockStyle,
+          top: 25,
+          left: blockStyle.width + gap,
+          fontFamily: '黑体',
+        }"
+      >
+        abc黑体
+      </div>
+      <div
+        :style="{
+          top: 25,
+          left: (blockStyle.width + gap) * 2 - 10,
+          width: blockStyle.width + 30,
+          height: 28,
+          fontFamily: '黑体',
+          fontSize: '24px',
+          WebkitTextStroke: '1px rgba(255,255,0,1.0)',
+        }"
+      >
+        abc描边
+      </div>
 
-        <div class="content-font" :style="{ ...blockStyle, top: 50,
-            fontWeight: 'bold' }">
-            abc粗体
-        </div>
-        <div class="content-font" :style="{ ...blockStyle, top: 50, left: blockStyle.width+gap,
-            fontStyle: 'italic' }">
-            abc斜体
-        </div>
+      <div
+        class="content-font"
+        :style="{ ...blockStyle, top: 50, fontWeight: 'bold' }"
+      >
+        abc粗体
+      </div>
+      <div
+        class="content-font"
+        :style="{
+          ...blockStyle,
+          top: 50,
+          left: blockStyle.width + gap,
+          fontStyle: 'italic',
+        }"
+      >
+        abc斜体
+      </div>
     </div>
 
     <div :style="{ top: 75 }">
-        <div class="content-font" :style="{ ...blockStyle }">[其他]</div>
-        <div :style="{ top: 25, width: 130, height: 35,
-            fontSize: '30px' }">
-            abc字号
-        </div>
-        <div :style="{ top: 25, left: 110,
-            width: 130, height: 35,
-            color: 'rgba(255, 0, 0, 1)', fontFamily: 'sans-serif',
-            fontSize: '30px', fontStyle: 'italic', fontWeight: 'bold' }">
-            abc综合
-        </div>
+      <div class="content-font" :style="{ ...blockStyle }">[其他]</div>
+      <div :style="{ top: 25, width: 130, height: 35, fontSize: '30px' }">
+        abc字号
+      </div>
+      <div
+        :style="{
+          top: 25,
+          left: 110,
+          width: 130,
+          height: 35,
+          color: 'rgba(255, 0, 0, 1)',
+          fontFamily: 'sans-serif',
+          fontSize: '30px',
+          fontStyle: 'italic',
+          fontWeight: 'bold',
+        }"
+      >
+        abc综合
+      </div>
     </div>
-</div>
+  </div>
 </template>
 
-<script>
-export default {
-    computed: {
-        gap() {
-            return 5;
-        },
-
-        blockStyle() {
-            return {
-                width: 70,
-                height: 20
-            }
-        }
-    }
-}
-</script>
-
 <style>
 @import "../FontStyle.css";
 </style>