@shijiu/jsview-vue-samples 1.9.888 → 1.9.931

package/CssPreprocessor/Stylus/PanelData.js

@@ -0,0 +1,51 @@
+import StylusComments from './components/stylus-group1/StylusComments.vue';
+import StylusOperations from './components/stylus-group1/StylusOperations.vue';
+import StylusVariables from './components/stylus-group1/StylusVariables.vue';
+import StylusConditionals from './components/stylus-group1/StylusConditionals.vue';
+import StylusIteration from './components/stylus-group2/StylusIteration.vue';
+import StylusMethods from './components/stylus-group2/StylusMethods.vue';
+import StylusExtends from './components/stylus-group3/StylusExtends.vue';
+import StylusNesting from './components/stylus-group3/StylusNesting.vue';
+import StylusMixins from './components/stylus-group4/StylusMixins.vue';
+import StylusMaps from './components/stylus-group4/StylusMaps.vue';
+import StylusKeyframes from './components/stylus-group4/StylusKeyframes.vue';
+import StylusImporting from './components/stylus-group5/StylusImporting.vue';
+
+const titleData = [
+  'Stylus 注释、运算符、变量、条件',
+  'Stylus 迭代、方法',
+  'Stylus 继承、嵌套',
+  'Stylus 混入、映射、关键帧',
+  'Stylus 导入',
+];
+
+const contentListData = [
+  [
+    { title: "注释- //, /**/", obj: StylusComments },
+    { title: "运算符- [ +,-,*,/,... ]", obj: StylusOperations },
+    { title: "变量- $var, .a{$var}", obj: StylusVariables },
+    { title: "条件- if, else if, else", obj: StylusConditionals },
+  ],
+  [
+    { title: "迭代- for in", obj: StylusIteration },
+    { title: "方法- name(var)", obj: StylusMethods, zoom: 3 },
+  ],
+  [
+    { title: "继承- @extend", obj: StylusExtends },
+    { title: "嵌套- .a{.b{}}", obj: StylusNesting, zoom: 3 },
+  ],
+  [
+    { title: "混入- name(var)", obj: StylusMixins},
+    { title: "映射- name={key:value}", obj: StylusMaps},
+    { title: "关键帧- @keyframes", obj: StylusKeyframes},
+  ],
+  [
+    { title: "导入- @import", obj: StylusImporting, zoom: 2 },
+    { title: undefined, obj: undefined, zoom: 0 },
+  ],
+];
+
+export const panelData = {
+  title: titleData,
+  contentList: contentListData
+}

package/CssPreprocessor/Stylus/components/stylus-group1/StylusComments.vue

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

package/CssPreprocessor/Stylus/components/stylus-group1/StylusConditionals.vue

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

package/CssPreprocessor/Stylus/components/stylus-group1/StylusOperations.vue

@@ -0,0 +1,30 @@
+<script>
+export default {
+}
+</script>
+
+<template>
+<div>
+  <div class="stylus-op">
+    {{'., [], !, ~, +, -, is defined\n'
+    + '**, *, /, %, +, -, ..., ..\n'
+    + '<=, >=, <, >, in\n'
+    + '==, is, !=, is not, isnt\n'
+    + 'is a, &&, and, ||, or, ?:\n'
+    + '=, :=, ?=, +=, -=, *=, /=, %=\n'
+    + 'not'}}
+  </div>
+</div>
+</template>
+
+<style scoped lang="stylus">
+.stylus-op {
+  color: #001100 * 16;
+  font-size: 20 - 6;
+
+  left: 10;
+  top: 3;
+  width: 230;
+  height: 280;
+}
+</style>

package/CssPreprocessor/Stylus/components/stylus-group1/StylusVariables.vue

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

package/CssPreprocessor/Stylus/components/stylus-group2/StylusIteration.vue

@@ -0,0 +1,34 @@
+<script>
+export default {
+}
+</script>
+
+<template>
+<div>
+  <div class="stylus-iteration">
+    {{'$size = 4\n'
+    + 'for num in 1..4\n'
+    + '  $size += num\n'
+    + '\n'
+    + '.stylus-iteration {\n'
+    + '  font-size: $size;\n'
+    + '}'}}
+  </div>
+</div>
+</template>
+
+<style scoped lang="stylus">
+$size = 4
+for num in 1..4
+  $size += num
+
+.stylus-iteration {
+  font-size: $size;
+
+  color: #00FF00;
+  left: 10;
+  top: 3;
+  width: 230;
+  height: 280;
+}
+</style>

package/CssPreprocessor/Stylus/components/stylus-group2/StylusMethods.vue

@@ -0,0 +1,78 @@
+<script>
+export default {
+}
+</script>
+
+<template>
+<div>
+  <div class="stylus-method-general">
+    {{'getsize(zoom) { //一般调用\n'
+    + '  2 * zoom\n'
+    + '}\n'
+    + '.stylus-method-general {\n'
+    + '  font-size: getsize(7);\n'
+    + '}'}}
+  </div>
+
+  <div class="stylus-method-named">
+    {{'getsize(zoom) { //具名参数\n'
+    + '  2 * zoom\n'
+    + '}\n'
+    + '.stylus-method-named {\n'
+    + '  font-size: getsize(zoom: 7);\n'
+    + '}'}}
+  </div>
+
+  <div class="stylus-method-varargs">
+    {{'getsize(args...) { //不定参数\n'
+    + '  2 * args\n'
+    + '}\n'
+    + '.stylus-method-varargs {\n'
+    + '  font-size: getsize(7);\n'
+    + '}'}}
+  </div>
+</div>
+</template>
+
+<style scoped lang="stylus">
+getsize(zoom) { // 一般调用
+  2 * zoom
+}
+.stylus-method-general {
+  font-size: getsize(7);
+
+  color: #00FF00;
+  left: 10;
+  top: 10;
+  width: 240;
+  height: 140;
+}
+
+getsize(zoom) { // 具名参数
+  2 * zoom
+}
+
+.stylus-method-named {
+  font-size: getsize(zoom: 7);
+
+  color: #00FF00;
+  left: 10;
+  top: 140;
+  width: 240;
+  height: 140;
+}
+
+getsize(args...) { // 不定参数
+  2 * args
+}
+
+.stylus-method-varargs {
+  font-size: getsize(7);
+
+  color: #00FF00;
+  left: 10;
+  top: 270;
+  width: 240;
+  height: 140;
+}
+</style>

package/CssPreprocessor/Stylus/components/stylus-group3/StylusExtends.vue

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

package/CssPreprocessor/Stylus/components/stylus-group3/StylusNesting.vue

@@ -0,0 +1,63 @@
+<script>
+export default {
+}
+</script>
+
+<template>
+<div class="stylus-root">
+  <div class="stylus-rule-nesting">
+    {{'.stylus-root {\n'
+    + '  color: #00FF00;\n'
+    + '  .stylus-rule-nesting { // 规则嵌套\n'
+    + '    font-size: 14;\n'
+    + '  }\n'
+    + '}'}}
+  </div>
+  <div class="stylus-prop-nesting">
+    {{'// 属性嵌套\n'
+    + '不支持'}}
+  </div>
+  <div class="stylus-root-parent-selector">
+    {{'.stylus-root {\n'
+    + '  color: #00FF00;\n'
+    + '  &-parent-selector { // 父选择器\n'
+    + '    font-size: 14;\n'
+    + '  }\n'
+    + '}'}}
+  </div>
+</div>
+</template>
+
+<style scoped lang='stylus'>
+.stylus-root {
+  color: #00FF00;
+
+  .stylus-rule-nesting { // 规则嵌套
+    font-size: 14;
+
+    left: 10;
+    top: 3;
+    width: 230;
+    height: 140;
+  }
+
+  .stylus-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/Stylus/components/stylus-group4/StylusKeyframes.vue

@@ -0,0 +1,40 @@
+<script>
+export default {
+}
+</script>
+
+<template>
+<div>
+  <div class="stylus-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="stylus">
+@keyframes scale-anim {
+  from {
+    transform: scale3d(1.0, 1.0, 1);
+  }
+  to {
+    transform: scale3d(0.8, 0.8, 1);
+  }
+}
+
+.stylus-keyframes {
+  color: #00FF00;
+  font-size: 14;
+
+  left: 10;
+  top: 0;
+  width: 230;
+  height: 140;
+}
+</style>

package/CssPreprocessor/Stylus/components/stylus-group4/StylusMaps.vue

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

package/CssPreprocessor/Stylus/components/stylus-group4/StylusMixins.vue

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

package/CssPreprocessor/Stylus/components/stylus-group5/StylusImporting.vue

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

package/CssPreprocessor/Stylus/components/stylus-group5/TextSettings.styl

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

package/CssPreprocessor/utils/ContentBlock.vue

@@ -0,0 +1,43 @@
+<script>
+
+export default {
+  props: {
+    index: Number,
+    style: Object,
+    title: String,
+  },
+  computed: {
+    blockOpacity() {
+      return 0.4 * ((this.index % 3) + 1) / 3;
+    }
+  },
+  data() {
+    return {
+      titleStyle: { 
+        lineHeight: 18,
+        width: this.style.width, height: 18,
+        backgroundColor: 'rgba(0,0,255,0.7)',
+      }
+    }
+  }
+
+}
+
+</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,255,'+blockOpacity+')' }">
+    <slot/>
+  </div>
+</div>
+</template>
+
+<style scoped>
+@import "./FontStyle.css";
+</style>  

package/CssPreprocessor/utils/ContentList.vue

@@ -0,0 +1,34 @@
+<script>
+import ContentBlock from './ContentBlock.vue';
+
+export default {
+  props: {
+    style: Object,
+    startIndex: Number,
+    contentData: Array,
+  },
+  components: {
+    ContentBlock,
+  },
+  computed: {
+    rowHeight() {
+      return this.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>
+</div>
+</template>
+
+<style>
+</style>

package/CssPreprocessor/utils/FontStyle.css

@@ -0,0 +1,19 @@
+
+.title-font {
+  color: #0000FF;
+  font-family: 黑体;
+  font-size: 16;
+  text-align: center;
+}
+
+.container-font {
+  color: #FFFFFF;
+  font-family: 黑体;
+  font-size: 16;
+}
+
+.content-font {
+  color: #000000;
+  font-family: 黑体;
+  font-size: 10;
+}