@shijiu/jsview-vue 1.9.731 → 1.9.759

package/index.d.ts

@@ -1 +1,4 @@
-export * from "./utils";
+export * from "./utils/JsViewEngineWidget";
+// export * from "./utils/JsViewPlugin";
+export * from "./utils/JsViewVueTools";
+export * from "./utils/JsViewVueWidget";

package/index.js

@@ -1 +1,4 @@
-export * from "./utils";
+export * from "./utils/JsViewEngineWidget";
+// export * from "./utils/JsViewPlugin";
+export * from "./utils/JsViewVueTools";
+export * from "./utils/JsViewVueWidget";

package/package.json

@@ -1,27 +1,16 @@
 {
   "name": "@shijiu/jsview-vue",
-  "sideEffects": [
-    "./index.js"
-  ],
-  "version": "1.9.731",
+  "version": "1.9.759",
+  "license": "MIT",
   "repository": "system/jsview-framework",
+  "author": "mengxk",
+  "homepage": "http://gitlab.qcast.cn/system/jsview-framework",
   "bugs": "http://gitlab.qcast.cn/system/jsview-framework/issues",
   "keywords": [
     "jsview",
-    "vue3",
     "jsview-vue"
   ],
-  "author": "mengxk",
-  "homepage": "http://gitlab.qcast.cn/system/jsview-framework",
-  "license": "MIT",
   "engines": {
-    "node": ">=14.0.0"
-  },
-  "dependencies": {
-    "vue": "3.2.37",
-    "vue-router": "4.1.4"
-  },
-  "devDependencies": {
-    "@vue/compiler-sfc": "3.2.8"
+    "node": ">=16.0.0"
   }
 }

package/samples/AnimPicture/App.vue

@@ -1,207 +0,0 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2021-10-13 14:44:03
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-07-08 10:09:50
- * @Description: file content
--->
-<script setup>
-import { ref, shallowRef } from "vue";
-import { useRouter, useRoute } from "vue-router";
-import { LoopType, JsvApic } from "jsview";
-import catRun from "./assets/animated_webp.webp";
-import girlRun from "./assets/girl_run.gif";
-import quan from "./assets/quan.webp";
-import ball from "./assets/ball_3.webp";
-
-const router = useRouter();
-const route = useRoute();
-let catRunPlay = ref(false);
-let girlRunPlay = ref(false);
-let quanPlay = ref(false);
-let ballPlay = ref(false);
-
-const catRunCallback = {
-  onStart: () => {
-    catRunPlay.value = true;
-  },
-  onEnd: () => {
-    catRunPlay.value = false;
-  },
-};
-const girlRunCallback = {
-  onStart: () => {
-    girlRunPlay.value = true;
-  },
-  onEnd: () => {
-    girlRunPlay.value = false;
-  },
-};
-const quanCallback = {
-  onStart: () => {
-    quanPlay.value = true;
-  },
-  onEnd: () => {
-    quanPlay.value = false;
-  },
-};
-const ballCallback = {
-  onStart: () => {
-    ballPlay.value = true;
-  },
-  onEnd: () => {
-    ballPlay.value = false;
-  },
-};
-let catRunRef = shallowRef(null);
-let girlRunRef = shallowRef(null);
-let quanRef = shallowRef(null);
-let ballRef = shallowRef(null);
-
-const onKeyDown = (ev) => {
-  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-    router.go(-1); // 有router时，是从DemoHomepage进入，回退
-    return true;
-  }
-
-  if (ev.keyCode === 37) {
-    if (catRunRef.value) {
-      if (catRunPlay.value) {
-        catRunRef.value.stop();
-        catRunPlay.value = false;
-      } else {
-        catRunRef.value.play();
-        catRunPlay.value = true;
-      }
-    }
-  } else if (ev.keyCode === 13) {
-    if (girlRunRef.value) {
-      if (girlRunPlay.value) {
-        girlRunRef.value.stop();
-        girlRunPlay.value = false;
-      } else {
-        girlRunRef.value.play();
-        girlRunPlay.value = true;
-      }
-    }
-  } else if (ev.keyCode === 39) {
-    if (quanRef.value) {
-      if (quanPlay.value) {
-        quanRef.value.stop();
-        quanPlay.value = false;
-      } else {
-        quanRef.value.play();
-        quanPlay.value = true;
-      }
-    }
-  } else if (ev.keyCode === 38) {
-    if (ballRef.value) {
-      if (ballPlay.value) {
-        ballRef.value.stop();
-        ballPlay.value = false;
-      } else {
-        ballRef.value.play();
-        ballPlay.value = true;
-      }
-    }
-  }
-  return true;
-};
-</script>
-
-<template>
-  <jsv-focus-block ref="rootNode" autoFocus :onKeyDown="onKeyDown">
-    <div :style="{ width: 1920, height: 1080, backgroundColor: '#334C4C' }">
-      <div :style="{ left: 20, top: 20 }">
-        <jsv-apic
-          ref="catRunRef"
-          :src="`url(${catRun})`"
-          :style="{ width: 250, height: 250 }"
-          :autoPlay="true"
-          :loopType="LoopType.LOOP_DEFAULT"
-          :onStart="catRunCallback.onStart"
-          :onEnd="catRunCallback.onEnd"
-        />
-        <div className="text" :style="{ top: 270, width: 250 }">
-          {{ `WEBP(${catRunPlay ? "运行" : "停止"})\n左键控制` }}
-        </div>
-      </div>
-
-      <div :style="{ left: 280, top: 20 }">
-        <JsvApic
-          ref="girlRunRef"
-          :src="`url(${girlRun})`"
-          :style="{ width: 250, height: 214 }"
-          :autoPlay="true"
-          :loopType="LoopType.LOOP_DEFAULT"
-          :onStart="girlRunCallback.onStart"
-          :onEnd="girlRunCallback.onEnd"
-        />
-        <div className="text" :style="{ top: 219, width: 250 }">
-          {{ `GIF(${girlRunPlay ? "运行" : "停止"})\nOK键控制` }}
-        </div>
-      </div>
-
-      <div :style="{ left: 540, top: 20 }">
-        <JsvApic
-          ref="quanRef"
-          :src="`url(${quan})`"
-          :style="{ width: 250, height: 296 }"
-          :autoPlay="true"
-          :loopType="LoopType.LOOP_DEFAULT"
-          :onStart="quanCallback.onStart"
-          :onEnd="quanCallback.onEnd"
-        />
-        <div className="text" :style="{ top: 301, width: 250 }">
-          {{ `单次播放WEBP(${quanPlay ? "运行" : "停止"})\n右键控制` }}
-        </div>
-      </div>
-
-      <div :style="{ left: 800, top: 20 }">
-        <JsvApic
-          ref="ballRef"
-          :src="`url(${ball})`"
-          :style="{ width: 300, height: 200 }"
-          :autoPlay="true"
-          :loopType="LoopType.LOOP_PART"
-          :loopInfo="[
-            [3, 2, 4],
-            [5, 7, 10],
-          ]"
-          :onStart="ballCallback.onStart"
-          :onEnd="ballCallback.onEnd"
-        />
-        <div class="text" :style="{ top: 205, width: 300, height: 200 }">
-          {{
-            `局部循环WEBP(${
-              ballPlay ? "运行" : "停止"
-            })\n先循环2次后循环4次\n上键控制`
-          }}
-        </div>
-      </div>
-
-      <div
-        :style="{
-          left: 50,
-          top: 590,
-          width: 1180,
-          textAlign: 'center',
-          color: '#000000',
-          fontSize: '30px',
-        }"
-      >
-        {{ `(按键可进行停止/重播操作)` }}
-      </div>
-    </div>
-  </jsv-focus-block>
-</template>
-
-<style scoped>
-.text {
-  font-size: 25px;
-  height: 68px;
-  line-height: 34px;
-  color: #000000;
-  text-align: center;
-}
-</style>

package/samples/Basic/App.vue

@@ -1,134 +0,0 @@
-<!--
- * 【界面概述】
- * div元素style中设置值对应的样例
- *
- * 【控件介绍】
- * 无
- *
- * 【技巧说明】
- * Q: 如何将div布局到指定坐标中？
- * A: 设置div style中的top和left，坐标值是相对于父div的左上角的坐标值
- *
- * Q: 如何在界面上描画图片？
- * A: 参照div/DivBackground，div的style中，
- *    描绘纯色时，通过backgroundColor来设置，例如
- *    <div style={{width:200, height:200, backgroundColor: 'rgba(255, 255, 0, 1)'}}>
- *    描绘图片时，通过backgroundImage来设置，例如
- *    <div style={{width:200, height:200, backgroundColor:`url(${iconImgPath})`}}>
- *    注意，不设置width和height的情况是默认尺寸为0px * 0px，不会展示图片
- *
- * Q: 如何对图片进行剪切，只展示图片的局部内容？
- * A: 参照div/DivClip，使用style中的overflow:"hidden"属性进行裁剪，或者使用style中clipPath属性进行裁剪
- *
- * Q: 如何将展示图片的四个角变成圆角？
- * A: 参照img/ImgRadius，通过设置style中的borderRadius属性完成圆角改变
- *
- * Q: 文字如何描绘？
- * A: 在div标签的内容中可填写需要描绘的文字，文字的字体字号等属性，通过div标签中的style来控制，参照text文件夹中的各个js。
- *    注意：若文字内容中需要折行，则需要把要显示内容放入字符串中，并加入'\n'来达到换行效果，例如：
- *          <div>{"第一行
- *          第二行"}</div>
- *          =======需要改成=======
- *          <div>{"第一行\n\
- *          第二行"}</div>
- *
- * Q: 几个位置使用的文字属性是统一的情况下，如何减少每个div中设置文字style的代码量？
- * A: 将统一的文字属性定义到一个js文件中(例如本Demo中的CommonFontStyle)，使用时，在style中采用array扩展的方式即可：
- *    <div style={{...TitleFont}}>
- *
- * Q: 如何让div产生动画效果？
- * A: 动画需要通过以下两种方式实现，具体见anim文件夹各个js:
- *    方式1：声明keyframe结构，通过div的style中的animation来引用keyFrame，启动动画
- *    方式2：设置div style中的transition属性，然后调整div的left/top/width/height之后，会按照transition规则进行动画。
- *    注意点1：keyFrame可以声明在css文件中，也可以通过document.styleSheet来动态加载，可以参考转盘demo(turntableDemo)
- *    在JsView系统中，css文件中只能声明keyFrame内容，不能声明其他内容
- *    注意点2：transition目前只支持left/top/width/height属性的跟踪，其他属性目前不支持
--->
-
-<script setup>
-import { jJsvRuntimeBridge } from "jsview";
-import { reactive, onMounted } from "vue";
-import { useRouter } from "vue-router";
-import Panel1 from "./components/panel/Panel1.vue";
-import Panel2 from "./components/panel/Panel2.vue";
-
-const router = useRouter();
-const itemSides = {
-  top: 0,
-  left: 0,
-  width: 240,
-  height: 160,
-};
-
-const panelInfo = reactive({
-  index: 1,
-  total: 2,
-  desc: "1/2",
-});
-const onKeyDown = (ev) => {
-  // 8:Backspace, 27:Escape, 10000:盒子返回键
-  if (ev.keyCode == 8 || ev.keyCode == 27 || ev.keyCode == 10000) {
-    router.go(-1); // 有router时，是从DemoHomepage进入，回退
-    return true;
-  } else if (ev.keyCode == 37) {
-    // left
-    panelInfo.index = --panelInfo.index > 1 ? panelInfo.index : 1;
-    panelInfo.desc = panelInfo.index + "/" + panelInfo.total;
-    return true;
-  } else if (ev.keyCode == 39) {
-    // right
-    panelInfo.index =
-      ++panelInfo.index < panelInfo.total ? panelInfo.index : panelInfo.total;
-    panelInfo.desc = panelInfo.index + "/" + panelInfo.total;
-    return true;
-  }
-
-  return false;
-};
-onMounted(() => {
-  jJsvRuntimeBridge.notifyPageLoaded();
-});
-</script>
-
-<template>
-  <div>
-    <!-- 有router时，将按键交给router去处理，此处没有其他用处 -->
-    <jsv-focus-block autoFocus :onKeyDown="onKeyDown" />
-
-    <div class="root">
-      <Panel1
-        v-if="panelInfo.index == 1"
-        :style="{ top: 10, left: 20 }"
-        panelClass="panel-size"
-        :itemSides="itemSides"
-      />
-      <Panel2
-        v-else-if="panelInfo.index == 2"
-        :style="{ top: 10, left: 20 }"
-        panelClass="panel-size"
-        :itemSides="itemSides"
-      />
-      <div :style="{ top: 650, left: 20, width: 500, color: '#0000FF' }">
-        {{ panelInfo.desc }}
-      </div>
-      <div :style="{ top: 650, left: 50, width: 500, color: '#0000FF' }">
-        按左/右键切换Panel，按Back键返回
-      </div>
-    </div>
-  </div>
-</template>
-
-<style>
-.root {
-  top: 10;
-  left: 10;
-  width: 1250;
-  height: 670;
-  background-color: rgba(200, 200, 200, 1);
-}
-
-.panel-size {
-  width: 1210;
-  height: 630;
-}
-</style>

package/samples/Basic/components/ContentBlock.vue

@@ -1,38 +0,0 @@
-<script setup>
-const props = defineProps({
-  title: String,
-  index: Number,
-  itemSides: Object,
-});
-const titleStyle = {
-  lineHeight: 18,
-  width: props.itemSides.width,
-  height: 18,
-  backgroundColor: "rgba(0,0,255,0.7)",
-};
-const blockOpacity = props.index % 2 === 0 ? 0.2 : 0.5;
-</script>
-
-<template>
-  <div>
-    <div class="container-font" :style="titleStyle">
-      {{ title }}
-    </div>
-    <div
-      key="blockColor"
-      :style="{
-        top: titleStyle.lineHeight,
-        width: itemSides.width,
-        height: itemSides.height - 18,
-        backgroundColor: 'rgba(0,0,255,' + blockOpacity + ')',
-      }"
-    ></div>
-    <div key="container" :style="{ top: titleStyle.lineHeight }">
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<style>
-@import "./FontStyle.css";
-</style>

package/samples/Basic/components/FontStyle.css

@@ -1,16 +0,0 @@
-
-.title-font {
-  font-family: 黑体;
-  font-size: 16px;
-}
-
-.container-font {
-  color: #FFFFFF;
-  font-family: 黑体;
-  font-size: 16px;
-}
-
-.content-font {
-  font-family: 黑体;
-  font-size: 12px;
-}

package/samples/Basic/components/anim/AnimGroup.vue

@@ -1,66 +0,0 @@
-<script setup>
-import { reactive, onMounted, onBeforeUnmount } from "vue";
-import ContentBlock from "../ContentBlock.vue";
-import AnimKeyframeBasic from "./AnimKeyframeBasic.vue";
-import AnimKeyframeComposite from "./AnimKeyframeComposite.vue";
-import AnimTransition from "./AnimTransition.vue";
-
-const props = defineProps({
-  contentClass: String,
-  itemSides: Object,
-});
-
-const contentBlockProps = {
-  colIndex: 0,
-  itemSides: props.itemSides,
-};
-let timerId = -1;
-const state = reactive({
-  timeCount: 20,
-});
-
-onMounted(() => {
-  timerId = setInterval(() => {
-    state.timeCount = state.timeCount + 5;
-  }, 2000);
-});
-
-onBeforeUnmount(() => {
-  if (timerId >= 0) {
-    clearInterval(timerId);
-  }
-  timerId = -1;
-});
-</script>
-
-<template>
-  <div id="item-root">
-    <ContentBlock
-      :class="contentClass"
-      :style="{ top: itemSides.height * 0 }"
-      :="contentBlockProps"
-      :index="1"
-      title="Keyframe基础动画集合"
-    >
-      <AnimKeyframeBasic />
-    </ContentBlock>
-    <ContentBlock
-      :class="contentClass"
-      :style="{ top: itemSides.height * 1 }"
-      :="contentBlockProps"
-      :index="2"
-      title="Keyframe组合示例"
-    >
-      <AnimKeyframeComposite />
-    </ContentBlock>
-    <ContentBlock
-      :class="contentClass"
-      :style="{ top: itemSides.height * 2 }"
-      :="{ ...contentBlockProps, itemSides: { ...itemSides, height: 290 } }"
-      :index="3"
-      title="Transition动画示例"
-    >
-      <AnimTransition :timeCount="state.timeCount" />
-    </ContentBlock>
-  </div>
-</template>

package/samples/Basic/components/anim/AnimKeyframeBasic.vue

@@ -1,119 +0,0 @@
-<script setup>
-const blockSize = {
-  width: 70,
-  height: 70,
-};
-const titleStyle = {
-  width: 60,
-  height: 20,
-  textAlign: "center",
-  lineHeight: 20,
-};
-const itemStyle = {
-  top: 20,
-  width: 50,
-  height: 50,
-  backgroundColor: "rgba(255, 0, 0, 1)",
-};
-</script>
-
-<template>
-  <div id="layout-root">
-    <div>
-      <div class="content-font" :style="{ ...titleStyle }">Translate3d</div>
-      <div :style="{ ...itemStyle, animation: 'AnimTranslate 3s infinite' }" />
-    </div>
-    <div :style="{ left: blockSize.width }">
-      <div class="content-font" :style="{ ...titleStyle }">Scale3d</div>
-      <div
-        :style="{ ...itemStyle, animation: 'AnimScale 3s infinite linear' }"
-      />
-    </div>
-    <div :style="{ left: blockSize.width * 2 }">
-      <div class="content-font" :style="{ ...titleStyle }">Rotate3d</div>
-      <div
-        :style="{ ...itemStyle, animation: 'AnimRotate 3s infinite linear' }"
-      />
-    </div>
-    <div :style="{ left: blockSize.width, top: blockSize.height }">
-      <div class="content-font" :style="{ ...titleStyle }">Skew</div>
-      <div
-        :style="{ ...itemStyle, animation: 'AnimSkew 3s infinite ease-in' }"
-      />
-    </div>
-    <div :style="{ left: blockSize.width * 2, top: blockSize.height }">
-      <div class="content-font" :style="{ ...titleStyle }">Opacity</div>
-      <div
-        :style="{
-          ...itemStyle,
-          width: 20,
-          animation: 'AnimOpacityOut 3s infinite ease-out',
-        }"
-      />
-      <div
-        :style="{
-          ...itemStyle,
-          left: 25,
-          width: 20,
-          animation: 'AnimOpacityIn 3s infinite ease-in-out',
-        }"
-      />
-    </div>
-  </div>
-</template>
-
-<style>
-@keyframes AnimTranslate {
-  from {
-    transform: translate3d(50%, 50px, 0);
-  }
-  to {
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-@keyframes AnimScale {
-  from {
-    transform: scale3d(1.5, 1.5, 1);
-  }
-  to {
-    transform: scale3d(0, 0, 0);
-  }
-}
-
-@keyframes AnimRotate {
-  from {
-    transform: rotate3d(1.5, 1, 1, 90deg);
-  }
-  to {
-    transform: rotate3d(1.5, 1, 1, 0);
-  }
-}
-
-@keyframes AnimSkew {
-  from {
-    transform: skew(30deg, 45deg);
-  }
-  to {
-    transform: skew(0, 0);
-  }
-}
-
-@keyframes AnimOpacityOut {
-  from {
-    opacity: 0.1;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes AnimOpacityIn {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 20%;
-  }
-}
-</style>