@shijiu/jsview-vue 0.9.359-alpha.0 → 0.9.422

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

@@ -1,9 +1,11 @@
 <template>
-    <div>
-        <div :class="jsvclass" v-bind="containerDataV">
-            Scoped CSS穿透, 此处的属性是Container设进来的.
-        </div>
+<div>
+  <div>
+    <div :class="jsvclass" jsv-inherit-class="2">
+        Scoped CSS穿透, 此处的属性是Container设进来的.
     </div>
+  </div>
+</div>
 </template>
 
 <script>
@@ -11,15 +13,6 @@ export default {
   props: {
     jsvclass: String,
   },
-
-  data() {
-    return { containerDataV: undefined }
-  },
-
-  mounted () {
-    this.containerDataV = Object.keys(this.$el).filter(p => p.startsWith('data-v-')) // 过滤'data-v-xxx属性'
-                                               .reduce((acc,curr)=> (acc[curr]='',acc),{}); // 数组转Object
-  },
 }
 </script>
 

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

@@ -1,12 +1,12 @@
 <template>
     <div class="block">
-        CSS class中的变量
+        顶级元素的CSS class中包含变量 (不推荐)
     </div>
 
     <div :style="{left: 70, width: 65, height: 65,
                   color: state.foreColor,
                   backgroundColor: state.backColor}">
-        CSS style中的变量
+        子级元素CSS class中包含变量
     </div>
 </template>
 
@@ -14,11 +14,6 @@
 import { reactive } from "vue";
 
 export default {
-    // computed: {
-    //     iconImgPath() {
-    //         return iconImgPath
-    //     }
-    // },
     data() {
         return {
             timerId: -1,
@@ -53,6 +48,7 @@ export default {
 .block {
   width: 65;
   height: 65;
+  /* word-wrap: break-word; */
   color: v-bind(state.foreColor);
   background-color: v-bind(state.backColor);
 }

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

@@ -3,10 +3,13 @@
         <ContentBlock :class=contentClass :style="{ top: itemSides.height*0}" :=contentBlockProps :index=1 title="Radius(实现圆角)">
             <DivRadius/>
         </ContentBlock>
-        <ContentBlock :class=contentClass :style="{ top: itemSides.height*1}" :=contentBlockProps :index=2 title="CSS Var">
+        <ContentBlock :class=contentClass :style="{ top: itemSides.height*1}" :=contentBlockProps :index=1 title="Transform">
+            <DivTransform/>
+        </ContentBlock>
+        <ContentBlock :class=contentClass :style="{ top: itemSides.height*2}" :=contentBlockProps :index=2 title="CSS Var">
             <DivCssVar/>
         </ContentBlock>
-        <ContentBlock :class=contentClass :style="{ top: itemSides.height*2}" :=contentBlockProps :index=3 title="CSS Scoped">
+        <ContentBlock :class=contentClass :style="{ top: itemSides.height*3}" :=contentBlockProps :index=3 title="CSS Scoped">
             <DivCssScoped jsvclass="block"/>
         </ContentBlock>
     </div>
@@ -17,6 +20,7 @@ import ContentBlock from '../ContentBlock';
 import DivCssScoped from './DivCssScoped';
 import DivCssVar from './DivCssVar';
 import DivRadius from './DivRadius';
+import DivTransform from './DivTransform';
 
 export default {
     props: {
@@ -28,6 +32,7 @@ export default {
         DivCssScoped,
         DivCssVar,
         DivRadius,
+        DivTransform,
     },
     computed: {
         contentBlockProps() {

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

@@ -1,10 +1,10 @@
 <template>
 <div id='layout-root'>
     <div class="content-font" :style="{ width: 70, height: 50, backgroundColor: 'rgba(0, 255, 0, 1)' }">坐标未设</div>
-    <div class="content-font" :style="{ top: 0, left: 75, backgroundColor: 'rgba(0, 255, 0, 1)' }">宽高未设</div>
-    <div class="content-font" :style="{ top: 55, left: 0, width: 70, height: 50, backgroundColor: 'rgba(0, 200, 0, 1)', visibility: 'hidden' }">不可视</div>
+    <!-- <div class="content-font" :style="{ top: 0, left: 75, backgroundColor: 'rgba(0, 255, 0, 1)' }">宽高未设</div> -->
+    <div class="content-font" :style="{ top: 55, left: 0, width: 70, height: 50, backgroundColor: 'rgba(0, 200, 0, 1)', visibility: 'hidden' }">(X)不可视</div>
     <div class="content-font" :style="{ top: 55, left: 75, width: 70, height: 50, backgroundColor: 'rgba(0, 200, 0, 1)', visibility: 'visible' }">可视属性</div>
-</div>;
+</div>
 </template>
 
 <style>

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

@@ -0,0 +1,27 @@
+<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';
+
+const blockSize = {
+    width: 65,
+    height: 65,
+};
+
+const gap = 5;
+</script>
+
+<style>
+@import "../FontStyle.css";
+</style>

package/samples/Basic/components/img/ImageGroup.vue

@@ -0,0 +1,31 @@
+<template>
+    <div id='item-root'>
+        <ContentBlock :class=contentClass :style="{top:itemSides.height*0}" :=contentBlockProps :index=0 title="图片显示">
+             <ImgLayout/>
+        </ContentBlock>
+    </div>
+</template>
+
+<script>
+import ContentBlock from '../ContentBlock';
+import ImgLayout from './ImgLayout';
+
+export default {
+    props: {
+        contentClass: String,
+        itemSides: Object 
+    },
+    components: {
+        ContentBlock,
+        ImgLayout,
+    },
+    computed: {
+        contentBlockProps() {
+            return {
+                colIndex: 0,
+                itemSides: this.itemSides
+            }
+        }
+    }
+}
+</script>

package/samples/Basic/components/img/ImgLayout.vue

@@ -0,0 +1,41 @@
+<template>
+<div id='layout-root'>
+    <div style="{top: 0}">
+        <div class="content-font" :style="{width: 50, height: titleHeight}">原图</div>
+        <div :style="{top: titleHeight,
+            width: imageSize.width+4, height: imageSize.height+4,
+            backgroundColor: 'rgba(0, 255, 0, 1)' }">
+            <img :style="{ left: 2, top: 2,
+                width: imageSize.width, height: imageSize.height}"
+                :src="testImgPath"/>
+        </div>
+    </div>
+</div>
+</template>
+
+<script>
+import testImgPath from '../../assets/test.jpg';
+
+export default {
+    computed: {
+        testImgPath() {
+            return testImgPath;
+        },
+        titleHeight() {
+            return 16;
+        },
+        imageSize() {
+            return {
+                width: 80,
+                height: 64,
+            }
+        },
+    }
+}
+
+</script>
+
+
+<style>
+@import "../FontStyle.css";
+</style>

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

@@ -0,0 +1,53 @@
+<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';
+
+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动画',
+            ];
+        }
+    }
+}
+</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>
+</div>
+</template>
+
+<style>
+</style>

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

@@ -0,0 +1,35 @@
+<script>
+import TitleBar from './TitleBar';
+import ImageGroup from '../img/ImageGroup';
+
+export default {
+    props: {
+      panelClass: String,
+      itemSides: Object,
+    },
+    components: {
+      TitleBar,
+      ImageGroup
+    },
+    computed: {
+        titleData() {
+            return [
+              '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>
+</div>
+</template>
+
+<style>
+</style>

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

@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <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>
+
+<style scoped>
+.item-style {
+  text-align: center;
+}
+
+</style>

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

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

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

@@ -0,0 +1,31 @@
+<template>
+    <div id='item-root'>
+        <ContentBlock :class=contentClass :style="{ top: itemSides.height*0}" :=contentBlockProps :index=0 title="文字对齐">
+             <TextEmoji/>
+        </ContentBlock>
+    </div>
+</template>
+
+<script>
+import ContentBlock from '../ContentBlock';
+import TextEmoji from './TextEmoji';
+
+export default {
+    props: {
+        contentClass: String,
+        itemSides: Object 
+    },
+    components: {
+        ContentBlock,
+        TextEmoji,
+    },
+    computed: {
+        contentBlockProps() {
+            return {
+                colIndex: 0,
+                itemSides: this.itemSides
+            }
+        }
+    }
+}
+</script>

package/utils/JsViewEngineWidget/JsvFocusBlock.vue

@@ -34,6 +34,7 @@ export default {
     onKeyDown: Function,
     onFocus: Function,
     onBlur: Function,
+    onCustomerEvent: Function,
   },
 
   setup(props) {
@@ -100,6 +101,10 @@ export default {
       this.$el.FocusNodeRef.requestFocus(passToChild);
     },
 
+    bubbleCustomerEvent(ev) {
+      this.$el.FocusNodeRef.bubbleCustomerEvent(ev);
+    },
+
     debugPrintFocusChain() {
       this.$el.FocusNodeRef.printFocusNodeList();
     },
@@ -147,6 +152,11 @@ export default {
         focusNode.setOnBlur(this.$_onBlur);
       }
 
+      this.actionCallback.onCustomerEvent =
+        this.$props.onCustomerEvent || this.$props.onAction?.onCustomerEvent;
+      if (this.actionCallback.onCustomerEvent) {
+        focusNode.setOnCustomerEvent(this.$_onCustomerEvent);
+      }
       // 建立父子关系链
       let self = this.$el;
       let parent = self.parentElement;
@@ -189,6 +199,9 @@ export default {
     $_onBlur() {
       this.actionCallback?.onBlur(this) || false;
     },
+    $_onCustomerEvent(ev) {
+      return this.actionCallback?.onCustomerEvent(ev) || false;
+    },
   },
 };
 </script>

package/utils/JsViewEngineWidget/MetroWidget/ContentView.vue

@@ -0,0 +1,63 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2021-09-22 13:47:23
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-03-02 10:15:03
+ * @Description: file content
+-->
+<script>
+import ItemView from "./ItemView.vue";
+
+export default {
+  props: {
+    tokenForRefresh: Number,
+    dataUpdateToken: Number,
+    onItemEdge: Function,
+    loadAll: Boolean,
+    enableTouch: Boolean,
+    onLoad: Function,
+    widgetHandler: Object,
+    enableItemRenderBreak: Boolean,
+    placeHolderSetting: Object,
+  },
+  setup() {
+    return {
+      innerData: [],
+    };
+  },
+  methods: {
+    updateData(data) {
+      this.innerData = data;
+    },
+  },
+  components: {
+    ItemView,
+  },
+  mounted() {
+    this.onLoad();
+  },
+  updated() {
+    this.onLoad();
+  },
+};
+</script>
+
+<template>
+  <item-view
+    v-for="item in innerData"
+    :key="dataUpdateToken + '_' + item.index"
+    :index="item.index"
+    :data="item.data"
+    :loadAll="loadAll"
+    :enableTouch="enableTouch"
+    :onEdge="onItemEdge"
+    :controlObj="item.controller"
+    :widgetHandler="widgetHandler"
+    :enableItemRenderBreak="enableItemRenderBreak"
+    :placeHolderSetting="placeHolderSetting"
+  >
+    <template v-slot:renderItem="slotProps">
+      <slot name="renderItem" v-bind="slotProps"></slot>
+    </template>
+  </item-view>
+</template>

package/utils/JsViewEngineWidget/MetroWidget/Dispatcher.js

@@ -0,0 +1,19 @@
+/*
+ * @Author: ChenChanghua
+ * @Date: 2021-09-22 16:50:09
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-01-26 10:17:47
+ * @Description: file content
+ */
+import { BaseDispatcher } from "../WidgetCommon";
+
+class Dispatcher extends BaseDispatcher {}
+Dispatcher.Type = {
+  setFocusId: Symbol("setFocusId"),
+  updateItem: Symbol("updateItem"),
+  slideToItem: Symbol("slideTo"),
+  setEnterFocusId: Symbol("setEnterFocusId"),
+  setEnterFocusRect: Symbol("setEnterFocusRect"),
+};
+export { Dispatcher as SWidgetDispatcher };
+export default Dispatcher;

package/utils/JsViewEngineWidget/MetroWidget/DivWrapper.vue

@@ -0,0 +1,51 @@
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2022-01-14 18:18:00
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2022-03-24 16:57:36
+ * @Description: file content
+-->
+<script>
+export default {
+  props: [
+    "data",
+    "onEdge",
+    "onAction",
+    "queryObj",
+    "widgetHandler",
+    "index",
+    "onFocus",
+    "onmounted",
+  ],
+  mounted() {
+    // this.widgetHandler.updateMounted(this.index, true);
+    this.onmounted?.();
+    const curFocus = this.widgetHandler.getCurrentFocusId();
+    if (this.widgetHandler.isFocus() && curFocus.index === this.index) {
+      //unmount 后导致的onFocus 在 mount 前，onFocus 为生效的问题
+      this.onFocus(this.widgetHandler.getPreEdgeRect());
+    }
+  },
+  beforeUnmount() {
+    // this.widgetHandler.updateMounted(this.index, false);
+  },
+};
+</script>
+
+<template>
+  <div
+    ref="element"
+    :style="{
+      width: data.width,
+      height: data.height,
+    }"
+  >
+    <slot
+      name="renderItem"
+      :data="data.data"
+      :onEdge="onEdge"
+      :onAction="onAction"
+      :query="queryObj"
+    ></slot>
+  </div>
+</template>