@shijiu/jsview-vue-samples 2.0.1021 → 2.0.1045-next-vue.0

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

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

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

@@ -25,7 +25,7 @@ for num in 1..4
 .stylus-iteration {
   font-size: $size;
 
-  color: #00FF00;
+  color: #126085;
   left: 10;
   top: 3;
   width: 230;

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

@@ -41,7 +41,7 @@ getsize(zoom) { // 一般调用
 .stylus-method-general {
   font-size: getsize(7);
 
-  color: #00FF00;
+  color: #126085
   left: 10;
   top: 10;
   width: 240;
@@ -55,7 +55,7 @@ getsize(zoom) { // 具名参数
 .stylus-method-named {
   font-size: getsize(zoom: 7);
 
-  color: #00FF00;
+  color: #126085;
   left: 10;
   top: 140;
   width: 240;
@@ -69,7 +69,7 @@ getsize(args...) { // 不定参数
 .stylus-method-varargs {
   font-size: getsize(7);
 
-  color: #00FF00;
+  color: #126085;
   left: 10;
   top: 270;
   width: 240;

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

@@ -7,7 +7,7 @@ export default {
 <div>
   <div class="stylus-extend">
     {{'.stylus-basic {\n'
-    + '  color: #00FF00;\n'
+    + '  color: #126085;\n'
     + '}\n'
     + '.stylus-extend {\n'
     + '  @extend .stylus-basic;\n'
@@ -19,7 +19,7 @@ export default {
 
 <style scoped lang='stylus'>
 .stylus-basic {
-  color: #00FF00;
+  color: #126085;
 }
 
 .stylus-extend {

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

@@ -7,7 +7,7 @@ export default {
 <div class="stylus-root">
   <div class="stylus-rule-nesting">
     {{'.stylus-root {\n'
-    + '  color: #00FF00;\n'
+    + '  color: #126085;\n'
     + '  .stylus-rule-nesting { // 规则嵌套\n'
     + '    font-size: 14;\n'
     + '  }\n'
@@ -19,7 +19,7 @@ export default {
   </div>
   <div class="stylus-root-parent-selector">
     {{'.stylus-root {\n'
-    + '  color: #00FF00;\n'
+    + '  color: #126085;\n'
     + '  &-parent-selector { // 父选择器\n'
     + '    font-size: 14;\n'
     + '  }\n'
@@ -30,7 +30,7 @@ export default {
 
 <style scoped lang='stylus'>
 .stylus-root {
-  color: #00FF00;
+  color: #126085;
 
   .stylus-rule-nesting { // 规则嵌套
     font-size: 14;
@@ -42,8 +42,8 @@ export default {
   }
 
   .stylus-prop-nesting { // 属性嵌套(不支持)
-    color: #000000;
-    font-size: 14;
+    color: #5a4ba4;
+    font-size: 14; // 不支持 font:{size:14} 写法
 
     left: 10;
     top: 120;

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

@@ -29,7 +29,7 @@ export default {
 }
 
 .stylus-keyframes {
-  color: #00FF00;
+  color: #126085;
   font-size: 14;
 
   left: 10;

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

@@ -24,7 +24,7 @@ font-sizes = {
 .stylus-map {
   font-size: font-sizes[medium];
 
-  color: #00FF00;
+  color: #126085;
   left: 10;
   top: 3;
   width: 230;

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

@@ -24,7 +24,7 @@ font(size) {
 .stylus-mixin {
   font(14);
 
-  color: #00FF00;
+  color: #126085;
   left: 10;
   top: 0;
   width: 230;

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

@@ -16,9 +16,13 @@ export default {
     + 'TextSettings.styl\n'
     + '\n'
     + '.stylus-imported {\n'
-    + '  color: #00FF00;\n'
-    + '  font-size: 14;\n'
-    + '}'}}
+    + '  color: #126085;\n'
+    + '  font-size: 14;\n'}}
+        <div class="stylus-nesting">
+      {{'   .stylus-nesting {\n'
+      + '     color: #5149a1;\n'
+      + '    }' }}
+    </div>
   </div>
 </div>
 </template>

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

@@ -1,4 +1,11 @@
 .stylus-imported {
-  color: #00FF00;
+  color: #126085;
   font-size: 14;
+    .stylus-nesting{
+    color:#5149a1;
+    left: 0;
+    top: 230;
+    width: 230;
+    height: 280;
+   }
 }

package/CssPreprocessor/utils/ContentBlock.vue

@@ -16,7 +16,8 @@ export default {
       titleStyle: { 
         lineHeight: 18,
         width: this.style.width, height: 18,
-        backgroundColor: 'rgba(0,0,255,0.7)',
+        backgroundColor: 'rgba(142,175,153,1)',
+        textAlign:'center'
       }
     }
   }
@@ -32,7 +33,7 @@ export default {
   </div>
   <div class="content-font" :style="{ top: titleStyle.lineHeight,
                  width: style.width, height: style.height - 18,
-                 backgroundColor: 'rgba(0,0,255,'+blockOpacity+')' }">
+                 backgroundColor: 'rgba(0,0,0,'+blockOpacity+')' }">
     <slot/>
   </div>
 </div>

package/CssPreprocessor/utils/FontStyle.css

@@ -1,6 +1,6 @@
 
 .title-font {
-  color: #0000FF;
+  color:#877c4a;
   font-family: 黑体;
   font-size: 16;
   text-align: center;

package/CssPreprocessor/utils/Panel.vue

@@ -17,7 +17,7 @@ export default {
       return this.style.width / this.panelData.title.length;
     },
     separatorColor() {
-      return 'rgba(0,0,255,0.7)'
+      return 'rgba(142,175,153,1)'
     }
   },
 }

package/FocusMoveStyle/App.vue

@@ -1,7 +1,7 @@
 <script setup>
-import { MetroWidget, HORIZONTAL, JsvNinePatch, useFocusHub } from "jsview";
+import { MetroWidget, HORIZONTAL, JsvNinePatch, useFocusHub, getTextWidth } from "jsview";
 import Item from "./Item.vue";
-import borderImageUrl from "./assets/focus.png";
+import redCircle from "./assets/redCircle.png"
 import { reactive, provide, onMounted } from "vue";
 const focusHub = useFocusHub();
 const randomColor = () => {
@@ -55,14 +55,18 @@ const focusFrameController = {
 };
 provide("focusFrameController", focusFrameController);
 
+const contentData = ['推荐', '电视剧', '电影', '云影院', '综艺', '儿童', '动漫', '游戏', '纪录片', '体育', '知识', '导航']
+const SizeObj = {
+  fontSize: 40
+}
 const provideData = () => {
   const data = [];
-  for (let i = 0; i < 20; ++i) {
+  for (let i = 0; i < 12; ++i) {
     data.push({
-      width: 100 + Math.round(Math.random() * 4) * 20,
-      height: 50,
+      width: getTextWidth(contentData[i], SizeObj) + 60,
+      height: 65,
       color: randomColor(),
-      content: i,
+      content: contentData[i],
     });
   }
   return data;
@@ -84,52 +88,39 @@ onMounted(() => {
 
 <template>
   <div :style="{ width: 1280, height: 720, backgroundColor: '#007788' }">
-    <div
-      :style="{
-        textAlign: 'center',
-        fontSize: 30,
-        lineHeight: 50,
-        color: '#ffffff',
-        left: 140,
-        top: 20,
-        width: 1000,
-        height: 50,
-        backgroundColor: 'rgba(27,38,151,0.8)',
-      }"
-    >
+    <div :style="{
+      textAlign: 'center',
+      fontSize: 30,
+      lineHeight: 50,
+      color: '#ffffff',
+      left: 140,
+      top: 20,
+      width: 1000,
+      height: 50,
+      backgroundColor: 'rgba(27,38,151,0.8)',
+    }">
       爬行样式的焦点示例
     </div>
-    <metro-widget
-      name="myWidget"
-      :top="100"
-      :left="40"
-      :width="1200"
-      :height="110"
-      :direction="HORIZONTAL"
-      :provideData="provideData"
-      :measures="measures"
-      :padding="{ left: 20, right: 20, top: 20, height: 20 }"
-    >
+    <metro-widget name="myWidget" :top="100" :left="40" :width="1200" :height="110" :direction="HORIZONTAL"
+      :provideData="provideData" :measures="measures" :padding="{ left: 20, right: 20, top: 20, height: 20 }">
       <template #renderItem="{ data, onAction, query }">
         <item :data="data" :onAction="onAction" :query="query" />
       </template>
       <template #background>
-        <jsv-nine-patch
-          :style="{
-            width: focusSize.width,
-            height: focusSize.height,
-            top: focusSize.top,
-            left: focusSize.left,
-          }"
-          :onTransitionEnd="focusSize.onTransitionEnd"
-          :imageUrl="borderImageUrl"
-          :imageWidth="55"
-          :centerWidth="1"
-          :borderOutset="13"
-          :imageDspWidth="30"
-          :animTime="0.2"
-          :waitForInit="true"
-        ></jsv-nine-patch>
+        <jsv-nine-patch :style="{
+          width: focusSize.width,
+          height: focusSize.height,
+          top: focusSize.top,
+          left: focusSize.left,
+        }" 
+        :onTransitionEnd="focusSize.onTransitionEnd" 
+        :imageUrl="redCircle" 
+        :imageWidth="35" 
+        :centerWidth="0"
+        :borderOutset="0" 
+        :imageDspWidth="focusSize.height/17*2" 
+        :animTime="0.2" 
+        :waitForInit="true"></jsv-nine-patch>
       </template>
     </metro-widget>
   </div>

package/FocusMoveStyle/Item.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, inject, nextTick } from "vue";
+import { ref, inject } from "vue";
 
 const focusFrameController = inject("focusFrameController");
 
@@ -25,6 +25,7 @@ const onFocus = () => {
   if (focusFrameController) {
     const rect = props.query.templatePosition(props.query.index);
     focusFrameController.onFocusChange(rect);
+    focused.value=true
   }
 };
 
@@ -46,12 +47,13 @@ props.onAction.register("onClick", onClicked);
     <div
       ref="divRef"
       :style="{
-        fontSize: 30,
+        fontSize: 40,
         width: data.width,
         height: data.height,
         color: '#FFFFFF',
-        backgroundColor: data.color,
-        borderRadius: 5,
+        textAlign: 'center',
+        lineHeight: data.height,
+        transform:focused?'scale3d(1.1,1.1,1)':'scale3d(1,1,1)'
       }"
     >
       {{ data.content }}
@@ -59,16 +61,4 @@ props.onAction.register("onClick", onClicked);
   </div>
 </template>
 
-<style scoped>
-.focus {
-  transform: scale3d(1.2, 1.2, 1);
-  transition: transform 0.25s linear;
-  font-size: 30;
-}
-
-.blur {
-  transform: scale3d(1, 1, 1);
-  transition: transform 0.25s linear;
-  font-size: 30;
-}
-</style>
+<style scoped></style>

package/MetroWidgetDemos/SkeletonDiagram/App.vue

@@ -0,0 +1,78 @@
+<script setup>
+import {
+  MetroWidget,
+  VERTICAL,
+  useFocusHub,
+  JsvPosterImage,
+  JsvPosterDiv,
+} from "jsview";
+import Item from "./Item.vue";
+import { ref, onMounted } from "vue";
+import { useRouter } from "vue-router";
+import data from "./data.js";
+
+const router = useRouter();
+const focusHub = useFocusHub();
+
+const measures = (item) => {
+  return {
+    width: item.width,
+    height: item.height,
+    marginRight: 10,
+    marginTop: 10,
+  };
+};
+
+const onKeyDown = (ev) => {
+  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
+    router.go(-1);
+  }
+  return true;
+};
+
+const provideData = () => {
+  return data;
+};
+
+onMounted(() => {
+  focusHub.setFocus("myFocusWidget");
+});
+</script>
+
+<template>
+  <jsv-focus-block
+    ref="focusNode"
+    :style="{
+      width: 1920,
+      height: 1080,
+      backgroundColor: '#007788',
+    }"
+    :onKeyDown="onKeyDown"
+  >
+    <metro-widget
+      name="myFocusWidget"
+      :top="50"
+      :left="50"
+      :width="1000"
+      :height="550"
+      :direction="VERTICAL"
+      :provideData="provideData"
+      :measures="measures"
+      :padding="{ left: 50, right: 50, top: 50, height: 50 }"
+      :enableItemRenderBreak="true"
+      :placeHolderSetting="{
+        backgroundColor: 'rgba(78,105,127, 0.8)',
+        gap: 10,
+      }"
+    >
+      <template #renderItem="{ data, query, onEdge, onAction }">
+        <item
+          :data="data"
+          :query="query"
+          :onEdge="onEdge"
+          :onAction="onAction"
+        />
+      </template>
+    </metro-widget>
+  </jsv-focus-block>
+</template>

package/MetroWidgetDemos/SkeletonDiagram/Item.vue

@@ -0,0 +1,111 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2023-02-06 10:19:42
+ * @Description: file content
+-->
+<script setup>
+import { ref } from "vue";
+import { JsvPosterImage, JsvPosterDiv } from "jsview";
+
+const props = defineProps({
+  data: Object,
+  query: Object,
+  onEdge: Function,
+  onAction: Object,
+});
+
+let focused = ref(false);
+
+const onFocus = () => {
+  focused.value = true;
+};
+
+const onBlur = () => {
+  focused.value = false;
+};
+
+const onClicked = () => {
+  console.log(`item ${props.query.id} clicked`);
+};
+
+props.onAction.register("onFocus", onFocus);
+props.onAction.register("onBlur", onBlur);
+props.onAction.register("onClick", onClicked);
+</script>
+
+<template>
+  <div
+    :style="{
+      width: data.width,
+      height: data.height,
+      transition: 'transform 0.25s linear',
+      transform: focused ? 'scale3d(1.1, 1.1, 1)' : '',
+    }"
+  >
+    <div
+      v-if="focused"
+      :style="{
+        left: -10,
+        top: -10,
+        width: props.data.width + 20,
+        height: props.data.height + 20,
+        backgroundColor: '#770088',
+      }"
+    >
+    </div>
+    <div v-if="query.index % 2 == 0">
+      <jsv-poster-image
+        :style="{
+          width: data.width,
+          height: data.height,
+        }"
+        :src="data.url"
+      >
+        <div
+          :style="{
+            width: data.width,
+            height: data.height,
+            backgroundColor: '#ff0000',
+          }"
+        />
+      </jsv-poster-image>
+      <div
+        :style="{
+          width: 40,
+          height: 30,
+          backgroundColor: '#007788',
+          fontSize: 20,
+        }"
+      >
+        {{ "img" }}
+      </div>
+    </div>
+    <div v-else>
+      <jsv-poster-div
+        :style="{
+          width: data.width,
+          height: data.height,
+          backgroundImage: `url(${data.url})`,
+        }"
+      >
+        <div
+          :style="{
+            width: data.width,
+            height: data.height,
+            backgroundColor: '#ff0000',
+          }"
+        />
+      </jsv-poster-div>
+      <div
+        :style="{
+          width: 40,
+          height: 30,
+          backgroundColor: '#007788',
+          fontSize: 20,
+        }"
+      >
+        {{ "div" }}
+      </div>
+    </div>
+  </div>
+</template>