@cmstops/pro-compo 0.3.71 → 0.3.72

package/lib/selectResourceModal/components/List/ListWraper.js

@@ -17,6 +17,10 @@ const _hoisted_5 = {
   class: "resource-list-content-empty"
 };
 const _hoisted_6 = { class: "resource-list-footer" };
+const _hoisted_7 = {
+  key: 0,
+  class: "footer-right"
+};
 const _sfc_main = vue.defineComponent({
   __name: "ListWraper",
   props: {
@@ -52,7 +56,9 @@ const _sfc_main = vue.defineComponent({
         ]),
         vue.createElementVNode("div", _hoisted_6, [
           vue.renderSlot(_ctx.$slots, "footer"),
-          vue.renderSlot(_ctx.$slots, "footer-extra")
+          _ctx.$slots["footer-extra"] ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7, [
+            vue.renderSlot(_ctx.$slots, "footer-extra")
+          ])) : vue.createCommentVNode("v-if", true)
         ])
       ]);
     };

package/lib/selectResourceModal/scripts/useCompoLf.js

@@ -29,7 +29,10 @@ function useCompoentLifycycle(props, emits) {
   return {
     wrapProps,
     close: () => emits("update:visible", false),
-    submit: (data) => emits("submit", JSON.parse(JSON.stringify(data)))
+    submit: (data, ...args) => {
+      emits("submit", JSON.parse(JSON.stringify(data)), ...args);
+      emits("update:visible", false);
+    }
   };
 }
 module.exports = useCompoentLifycycle;

package/lib/selectResourceModal/style/index.css

@@ -178,7 +178,7 @@
 .resource-list-footer {
   display: flex;
   justify-content: space-between;
-  padding-bottom: 10px;
+  padding-bottom: 20px;
 }
 .resource-list-footer .footer-right {
   display: flex;

package/lib/selectResourceModal/style/list.less

@@ -21,7 +21,7 @@
   &-footer {
     display: flex;
     justify-content: space-between;
-    padding-bottom: 10px;
+    padding-bottom: 20px;
 
     .footer-right {
       display: flex;

package/lib/videoThumb/component.js

@@ -12,10 +12,12 @@ const _sfc_main = vue.defineComponent({
   __name: "component",
   props: {
     BASE_API: {},
+    value: {},
     src: {},
-    duration: {}
+    duration: {},
+    offset: {}
   },
-  emits: ["select"],
+  emits: ["select", "update:value"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
@@ -23,46 +25,44 @@ const _sfc_main = vue.defineComponent({
     const { thumbs, curThumb, getVideoThumbs, handleSelectThumb } = useVideoThumbs.useVideoThumbs();
     const videoThumbRef = vue.ref();
     const videoThumbDrager = vue.ref();
-    const isDrag = vue.ref(false);
     const width = vue.computed(() => {
       if (!videoThumbRef.value)
         return 0;
       const rect = videoThumbRef.value.getBoundingClientRect();
       return parseInt((rect.width / thumbs.value.length).toFixed(0), 10);
     });
+    const startPos = vue.ref(0);
     function moveDragger(moveX) {
       if (!videoThumbDrager.value || !videoThumbRef.value)
         return;
       const rect = videoThumbRef.value.getBoundingClientRect();
-      if (moveX < 0 || moveX > rect.width)
+      const pos = startPos.value + moveX;
+      if (pos < 0 || pos > rect.width - 5)
         return;
-      videoThumbDrager.value.style.left = `${moveX}px`;
-      const index = Math.floor(moveX / width.value);
-      curThumb.value = thumbs.value[index];
+      videoThumbDrager.value.style.left = `${pos}px`;
+      const index = Math.floor(pos / width.value);
+      curThumb.value = thumbs.value[index < thumbs.value.length ? index : thumbs.value.length - 1];
     }
-    const handleMousedown = () => {
-      isDrag.value = true;
-      window.onmouseup = handleMouseup;
-      window.onmousemove = handleMousemove;
-    };
-    const handleMouseup = () => {
-      isDrag.value = false;
-      window.onmouseup = null;
-      window.onmousemove = null;
-    };
-    const handleMousemove = (e) => {
-      if (!isDrag.value)
+    function upDragger() {
+      startPos.value = 0;
+    }
+    function downDragger() {
+      if (!videoThumbDrager.value)
         return;
-      const moveX = e.x - 30;
-      moveDragger(moveX);
-    };
+      const originX = parseInt(videoThumbDrager.value.style.left.replace("px", ""), 10) || 0;
+      startPos.value = originX;
+    }
     function handleSelect(idx) {
       handleSelectThumb(idx);
       moveDragger(idx * width.value + width.value / 2);
     }
+    const { handleMousedown } = useVideoThumbs.useDragger(moveDragger, upDragger, downDragger);
     vue.watch(
       () => curThumb.value,
-      () => emit("select", curThumb.value),
+      () => {
+        emit("select", curThumb.value);
+        emit("update:value", curThumb.value);
+      },
       { immediate: true }
     );
     vue.onMounted(() => {
@@ -79,12 +79,13 @@ const _sfc_main = vue.defineComponent({
           ref: videoThumbRef,
           class: "video-thumb-list"
         }, [
-          vue.createElementVNode("div", {
+          vue.unref(thumbs).length > 0 ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 0,
             ref_key: "videoThumbDrager",
             ref: videoThumbDrager,
             class: "video-thumb-list-drager",
-            onMousedown: handleMousedown
-          }, null, 544),
+            onMousedown: _cache[0] || (_cache[0] = (...args) => vue.unref(handleMousedown) && vue.unref(handleMousedown)(...args))
+          }, null, 544)) : vue.createCommentVNode("v-if", true),
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(thumbs), (thumb, idx) => {
             return vue.openBlock(), vue.createElementBlock("div", {
               key: thumb,

package/lib/videoThumb/scripts/useVideoThumbs.js

@@ -47,4 +47,32 @@ function useVideoThumbs() {
     handleSelectThumb
   };
 }
+function useDragger(moveCallback, upCallback, downCallback) {
+  const x = vue.ref(0);
+  const isDrag = vue.ref(false);
+  const handleMousedown = (e) => {
+    isDrag.value = true;
+    x.value = e.x;
+    window.onmouseup = handleMouseup;
+    window.onmousemove = handleMousemove;
+    downCallback && downCallback();
+  };
+  const handleMouseup = () => {
+    isDrag.value = false;
+    x.value = 0;
+    window.onmouseup = null;
+    window.onmousemove = null;
+    upCallback && upCallback();
+  };
+  const handleMousemove = (e) => {
+    if (!isDrag.value)
+      return;
+    moveCallback && moveCallback(e.x - x.value);
+  };
+  return {
+    isDrag,
+    handleMousedown
+  };
+}
+exports.useDragger = useDragger;
 exports.useVideoThumbs = useVideoThumbs;

package/lib/videoThumb/style/index.css

@@ -5,23 +5,25 @@
   box-sizing: border-box;
   width: 100%;
   height: 100%;
-  padding: 10px;
   overflow: hidden;
 }
 .video-thumb .video-player-container {
   display: flex;
   flex: 1;
   flex-direction: column;
+  align-items: center;
+  justify-content: center;
   overflow: hidden;
 }
-.video-thumb .video-player-container video {
-  height: 100%;
+.video-thumb .video-player-container img {
+  max-width: 800px;
+  max-height: 100%;
 }
 .video-thumb .video-thumb-list {
   position: relative;
   display: flex;
   height: 80px;
-  padding: 20px 0;
+  padding: 10px 0;
 }
 .video-thumb .video-thumb-list .video-thumb-list-item {
   flex: 1;
@@ -40,10 +42,15 @@
 }
 .video-thumb .video-thumb-list .video-thumb-list-drager {
   position: absolute;
-  top: 20px;
+  top: 10px;
   left: 0;
+  z-index: 100;
   width: 6px;
-  height: calc(100% - 40px);
+  height: calc(100% - 20px);
   background-color: rgb(var(--primary-5));
   cursor: pointer;
+  transition: transform 0.3s ease-in-out;
+}
+.video-thumb .video-thumb-list .video-thumb-list-drager:hover {
+  transform: scale(1.05);
 }

package/lib/videoThumb/style/index.less

@@ -5,7 +5,6 @@
   box-sizing: border-box;
   width: 100%;
   height: 100%;
-  padding: 10px;
   overflow: hidden;
 
   // 播放器
@@ -13,10 +12,13 @@
     display: flex;
     flex: 1;
     flex-direction: column;
+    align-items: center;
+    justify-content: center;
     overflow: hidden;
 
-    video {
-      height: 100%;
+    img {
+      max-width: 800px;
+      max-height: 100%;
     }
   }
 
@@ -25,7 +27,7 @@
     position: relative;
     display: flex;
     height: 80px;
-    padding: 20px 0;
+    padding: 10px 0;
 
     .video-thumb-list-item {
       flex: 1;
@@ -50,12 +52,18 @@
 
     .video-thumb-list-drager {
       position: absolute;
-      top: 20px;
+      top: 10px;
       left: 0;
+      z-index: 100;
       width: 6px;
-      height: calc(100% - 40px);
+      height: calc(100% - 20px);
       background-color: rgb(var(--primary-5));
       cursor: pointer;
+      transition: transform 0.3s ease-in-out;
+
+      &:hover {
+        transform: scale(1.05);
+      }
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cmstops/pro-compo",
-  "version": "0.3.71",
+  "version": "0.3.72",
   "description": "",
   "keywords": [
     "vue",