@shijiu/jsview-vue-samples 1.9.887 → 1.9.915

package/ColorSpace/App.vue

@@ -1,8 +1,8 @@
 <script setup>
-import jpegDemo from "./jpegDemo.jpeg";
-import pngDemo from "./pngDemo.png";
-import pngNoAlphaDemo from "./pngNoAlphaDemo.png";
-import bmpDemo from "./bmpDemo.bmp";
+import jpegDemo from "../assets/jpegDemo.jpeg";
+import pngDemo from "../assets/pngDemo.png";
+import pngNoAlphaDemo from "../assets/pngNoAlphaDemo.png";
+import bmpDemo from "../assets/bmpDemo.bmp";
 import { useRouter } from "vue-router";
 
 const router = useRouter();
@@ -39,7 +39,7 @@ const onKeyDown = (ev) => {
           <img class="graphSize top0" :src="bmpDemo" />
           <img
             class="graphSize top250"
-            jsvImgColorSpace="RGB_565"
+            data-jsv-img-color-space="RGB_565"
             :src="bmpDemo"
           />
           <div class="underFont">
@@ -51,7 +51,7 @@ const onKeyDown = (ev) => {
           <img class="graphSize top0" :src="jpegDemo" />
           <img
             class="graphSize top250"
-            jsvImgColorSpace="RGB_565"
+            data-jsv-img-color-space="RGB_565"
             :src="jpegDemo"
           />
           <div class="underFont">
@@ -63,7 +63,7 @@ const onKeyDown = (ev) => {
           <img class="graphSize top0" :src="pngDemo" />
           <img
             class="graphSize top250"
-            jsvImgColorSpace="RGB_565"
+            data-jsv-img-color-space="RGB_565"
             :src="pngDemo"
           />
           <div class="underFont">
@@ -75,7 +75,7 @@ const onKeyDown = (ev) => {
           <img class="graphSize top0" :src="pngNoAlphaDemo" />
           <img
             class="graphSize top250"
-            jsvImgColorSpace="RGB_565"
+            data-jsv-img-color-space="RGB_565"
             :src="pngNoAlphaDemo"
           />
           <div class="underFont">
@@ -101,7 +101,7 @@ const onKeyDown = (ev) => {
   width: 200;
   height: 200;
   color: #ffffff;
-  font-size: 30px;
+  font-size: 30;
 }
 .top0 {
   top: 0;
@@ -113,7 +113,7 @@ const onKeyDown = (ev) => {
   left: 0;
   width: 200;
   height: 200;
-  border-radius: 15px 15px 15px 15px;
+  border-radius: 15 15 15 15;
 }
 .underFont {
   left: 0;
@@ -121,6 +121,6 @@ const onKeyDown = (ev) => {
   width: 200;
   height: 200;
   color: #ffffff;
-  font-size: 20px;
+  font-size: 20;
 }
 </style>

package/CssPreprocessor/App.vue

@@ -0,0 +1,70 @@
+<script>
+import ScssApp from './Scss/App.vue';
+import LessApp from './Less/App.vue';
+import StylusApp from './Stylus/App.vue';
+
+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;
+    }
+  },
+}
+</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}">
+        {{ panelInfo.desc }}
+      </div>
+      <div :style="{top: 660, left:100, width:500}">
+        按左/右键切换Panel，按Back键返回
+      </div>
+  </div>
+</div>
+</template>
+
+<style scoped>
+.root {
+  color: #0000FF;
+}
+</style>

package/CssPreprocessor/Less/App.vue

@@ -0,0 +1,32 @@
+<script>
+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 />
+  </div>
+</div>
+</template>
+
+<style scoped>
+.root {
+  top: 10; left: 10;
+  width: 1250; height: 670;
+  background-color: rgba(200, 200, 200, 1)
+}
+</style>

package/CssPreprocessor/Less/PanelData.js

@@ -0,0 +1,51 @@
+import LessComments from './components/less-group1/LessComments.vue';
+import LessOperations from './components/less-group1/LessOperations.vue';
+import LessVariables from './components/less-group1/LessVariables.vue';
+import LessConditionals from './components/less-group1/LessConditionals.vue';
+import LessIteration from './components/less-group2/LessIteration.vue';
+import LessMethods from './components/less-group2/LessMethods.vue';
+import LessExtends from './components/less-group3/LessExtends.vue';
+import LessNesting from './components/less-group3/LessNesting.vue';
+import LessMixins from './components/less-group4/LessMixins.vue';
+import LessMaps from './components/less-group4/LessMaps.vue';
+import LessKeyframes from './components/less-group4/LessKeyframes.vue';
+import LessImporting from './components/less-group5/LessImporting.vue';
+
+const titleData = [
+  'Less 注释、运算符、变量、条件',
+  'Less 迭代、方法',
+  'Less 继承、嵌套',
+  'Less 混入、映射、关键帧',
+  'Less 导入',
+];
+
+const contentListData = [
+  [
+    { title: "注释- //, /**/", obj: LessComments },
+    { title: "运算符- [ +,-,*,/,... ]", obj: LessOperations },
+    { title: "变量- @var, .a{@var}", obj: LessVariables },
+    { title: "条件- if(expr, true, false)", obj: LessConditionals },
+  ],
+  [
+    { title: "迭代- each(range(), {})", obj: LessIteration },
+    { title: "方法- 不支持", obj: LessMethods, zoom: 3 },
+  ],
+  [
+    { title: "继承- :extend()", obj: LessExtends },
+    { title: "嵌套- .a{.b{}}", obj: LessNesting, zoom: 3 },
+  ],
+  [
+    { title: "混入- .name(var)", obj: LessMixins},
+    { title: "映射- @name:{key:value}", obj: LessMaps},
+    { title: "关键帧- @keyframes", obj: LessKeyframes},
+  ],
+  [
+    { title: "导入- @import", obj: LessImporting, zoom: 2 },
+    { title: undefined, obj: undefined, zoom: 0 },
+  ],
+];
+
+export const panelData = {
+  title: titleData,
+  contentList: contentListData
+}

package/CssPreprocessor/Less/components/less-group1/LessComments.vue

@@ -0,0 +1,34 @@
+<script>
+export default {
+}
+</script>
+
+<template>
+<div>
+  <div class="less-comments">
+    {{'// less 单行注释\n'
+    + '/* less 多行注释 */\n'
+    + '.less-comments {\n'
+    + '  // less 单行注释\n'
+    + '  /* less 多行注释 */\n'
+    + '  color: #00FF00;\n'
+    + '}'}}
+  </div>
+</div>
+</template>
+
+<style scoped lang="less">
+// less 单行注释
+/* less 多行注释 */
+.less-comments {
+  // less 单行注释
+  /* less 多行注释 */
+  color: #00FF00;
+  font-size: 14;
+
+  left: 10;
+  top: 3;
+  width: 230;
+  height: 130;
+}
+</style>

package/CssPreprocessor/Less/components/less-group1/LessConditionals.vue

@@ -0,0 +1,32 @@
+<script>
+export default {
+}
+</script>
+
+<template>
+<div>
+  <div class="less-conditional">
+    {{'@show-green: false;\n'
+    + '.less-conditional {\n'
+    + '  color: if(@show-green,\n'
+    + '            #00FF00,\n'
+    + '            #FF0000);\n'
+    + '}\n'}}
+  </div>
+</div>
+</template>
+
+<style scoped lang="less">
+@show-green: false;
+.less-conditional {
+  color: if(@show-green,
+            #00FF00,
+            #FF0000);
+
+  font-size: 14;
+  left: 10;
+  top: 5;
+  width: 220;
+  height: 140;
+}
+</style>

package/CssPreprocessor/Less/components/less-group1/LessOperations.vue

@@ -0,0 +1,24 @@
+<script>
+export default {
+}
+</script>
+
+<template>
+<div>
+  <div class="less-op">
+    {{'+, -, *, /\n'}}
+  </div>
+</div>
+</template>
+
+<style scoped lang="less">
+.less-op {
+  color: #001100 * 16;
+  font-size: 20 - 6;
+
+  left: 10;
+  top: 3;
+  width: 230;
+  height: 280;
+}
+</style>

package/CssPreprocessor/Less/components/less-group1/LessVariables.vue

@@ -0,0 +1,48 @@
+<script>
+export default {
+}
+</script>
+
+<template>
+<div>
+  <div class="less-var-general">
+    {{'@my-color: #00FF00; // 一般变量\n'
+    + '.less-var-general {\n'
+    + '  color: @my-color;\n'
+    + '}'}}
+  </div>
+  <div class="less-var-enclosing">
+    {{'.less-var-enclosing {\n'
+    + '  @my-color: #0000FF; // 局部变量\n'
+    + '  color: @my-color;\n'
+    + '}'}}
+  </div>
+</div>
+</template>
+
+<style scoped lang="less">
+@my-color: #00FF00; // 一般变量
+.less-var-general {
+  color: @my-color;
+
+  font-size: 14;
+  left: 10;
+  top: 0;
+  width: 220;
+  height: 140;
+}
+
+@my-color: #00FF00;
+.less-var-enclosing {
+  // 只在 .less-enclosing 里有效，局部作用域
+  @my-color: #FF0000; // 局部变量
+  color: @my-color;
+
+  font-size: 14;
+  left: 10;
+  top: 68;
+  width: 220;
+  height: 140;
+}
+
+</style>

package/CssPreprocessor/Less/components/less-group2/LessIteration.vue

@@ -0,0 +1,32 @@
+<script>
+export default {
+}
+</script>
+
+<template>
+<div>
+  <div class="less-bounds less-iteration-2">
+    {{'each(range(1, 14, 13), {\n'
+    + '  .less-iteration-@{index} {\n'
+    + '    font-size: @value;\n'
+    + '  }\n'
+    + '})'}}
+  </div>
+</div>
+</template>
+
+<style scoped lang="less">
+each(range(1, 14, 13), {
+  .less-iteration-@{index} {
+    font-size: @value;
+  }
+})
+
+.less-bounds {
+  color: #00FF00;
+  left: 10;
+  top: 3;
+  width: 230;
+  height: 280;
+}
+</style>

package/CssPreprocessor/Less/components/less-group2/LessMethods.vue

@@ -0,0 +1,27 @@
+<script>
+export default {
+}
+</script>
+
+<template>
+<div>
+  <div class="less-method-general">
+    {{'不支持，使用mixins'}}
+  </div>
+</div>
+</template>
+
+<style scoped lang="less">
+.getsize(@zoom) {
+  font-size: 2 * @zoom
+}
+.less-method-general {
+  .getsize(7);
+
+  color: #000000;
+  left: 10;
+  top: 10;
+  width: 240;
+  height: 140;
+}
+</style>

package/CssPreprocessor/Less/components/less-group3/LessExtends.vue

@@ -0,0 +1,32 @@
+<script>
+export default {
+}
+</script>
+
+<template>
+<div>
+  <div class="less-extend">
+    {{'.less-basic {\n'
+    + '  color: #00FF00;\n'
+    + '}\n'
+    + '.less-extend :extend(.less-basic) {\n'
+    + '  font-size: 14;\n'
+    + '}'}}
+  </div>
+</div>
+</template>
+
+<style scoped lang='less'>
+.less-basic {
+  color: #00FF00;
+}
+
+.less-extend :extend(.less-basic) {
+  font-size: 14;
+  
+  left: 10;
+  top: 3;
+  width: 230;
+  height: 140;
+}
+</style>

package/CssPreprocessor/Less/components/less-group3/LessNesting.vue

@@ -0,0 +1,63 @@
+<script>
+export default {
+}
+</script>
+
+<template>
+<div class="less-root">
+  <div class="less-rule-nesting">
+    {{'.less-root {\n'
+    + '  color: #00FF00;\n'
+    + '  .less-rule-nesting { // 规则嵌套\n'
+    + '    font-size: 14;\n'
+    + '  }\n'
+    + '}'}}
+  </div>
+  <div class="less-prop-nesting">
+    {{'// 属性嵌套\n'
+    + '不支持'}}
+  </div>
+  <div class="less-root-parent-selector">
+    {{'.less-root {\n'
+    + '  color: #00FF00;\n'
+    + '  &-parent-selector { // 父选择器\n'
+    + '    font-size: 14;\n'
+    + '  }\n'
+    + '}'}}
+  </div>
+</div>
+</template>
+
+<style scoped lang='less'>
+.less-root {
+  color: #00FF00;
+
+  .less-rule-nesting { // 规则嵌套
+    font-size: 14;
+
+    left: 10;
+    top: 3;
+    width: 230;
+    height: 140;
+  }
+
+  .less-prop-nesting { // 属性嵌套(不支持)
+    color: #000000;
+    font-size: 14;
+
+    left: 10;
+    top: 120;
+    width: 230;
+    height: 140;
+  }
+
+  &-parent-selector { // 父选择器
+    font-size: 14;
+
+    left: 10;
+    top: 280;
+    width: 230;
+    height: 140;
+  }
+}
+</style>

package/CssPreprocessor/Less/components/less-group4/LessKeyframes.vue

@@ -0,0 +1,40 @@
+<script>
+export default {
+}
+</script>
+
+<template>
+<div>
+  <div class="less-keyframes" :style="{ animation: 'scale-anim 3s infinite linear' }">
+    {{'@keyframes scale-anim {\n'
+    + '  from {\n'
+    + '    transform scale3d(1.0, 1.0, 1)\n'
+    + '  }\n'
+    + '  to {\n'
+    + '    transform scale3d(0.8, 0.8, 1)\n'
+    + '  }\n'
+    + '}'}}
+  </div>
+</div>
+</template>
+
+<style scoped lang="less">
+@keyframes scale-anim {
+  from {
+    transform: scale3d(1.0, 1.0, 1);
+  }
+  to {
+    transform: scale3d(0.8, 0.8, 1);
+  }
+}
+
+.less-keyframes {
+  color: #00FF00;
+  font-size: 14;
+
+  left: 10;
+  top: 0;
+  width: 230;
+  height: 140;
+}
+</style>

package/CssPreprocessor/Less/components/less-group4/LessMaps.vue

@@ -0,0 +1,33 @@
+<script>
+export default {
+}
+</script>
+
+<template>
+<div>
+  <div class="less-map">
+    {{'@font-sizes: {\n'
+    + '  small: 10; medium: 14; large: 18;\n'
+    + '}\n'
+    + '.less-map {\n'
+    + '  font-size: @font-sizes[medium];\n'
+    + '}'}}
+  </div>
+</div>
+</template>
+
+<style scoped lang='less'>
+@font-sizes: {
+  small: 10; medium: 14; large: 18;
+}
+
+.less-map {
+  font-size: @font-sizes[medium];
+
+  color: #00FF00;
+  left: 10;
+  top: 3;
+  width: 230;
+  height: 140;
+}
+</style>

package/CssPreprocessor/Less/components/less-group4/LessMixins.vue

@@ -0,0 +1,33 @@
+<script>
+export default {
+}
+</script>
+
+<template>
+<div>
+  <div class="less-mixin">
+    {{'.font(@size) {\n'
+    + '  font-size: @size;\n'
+    + '}\n'
+    + '.less-mixin {\n'
+    + '  .font(14);\n'
+    + '}'}}
+  </div>
+</div>
+</template>
+
+<style scoped lang='less'>
+.font(@size) {
+  font-size: @size;
+}
+
+.less-mixin {
+  .font(14);
+
+  color: #00FF00;
+  left: 10;
+  top: 0;
+  width: 230;
+  height: 140;
+}
+</style>

package/CssPreprocessor/Less/components/less-group5/LessImporting.vue

@@ -0,0 +1,34 @@
+<script>
+export default {
+}
+</script>
+
+<template>
+<div>
+  <div class="less-bounds less-imported">
+    {{'LessImportFile.vue\n'
+    + '\n'
+    + '<style scoped lang=\'less\'>\n'
+    + '@import \'./TextSettings\';\n'
+    + '</style>\n'
+    + '\n'
+    + '=================\n'
+    + 'TextSettings.less\n'
+    + '\n'
+    + '.less-imported {\n'
+    + '  color: #00FF00;\n'
+    + '  font-size: 14;\n'
+    + '}'}}
+  </div>
+</div>
+</template>
+
+<style scoped lang='less'>
+@import './TextSettings';
+.less-bounds {
+  left: 10;
+  top: 0;
+  width: 230;
+  height: 280;
+}
+</style>

package/CssPreprocessor/Less/components/less-group5/TextSettings.less

@@ -0,0 +1,4 @@
+.less-imported {
+  color: #00FF00;
+  font-size: 14;
+}