mtxt-ui3 0.0.2

package/dist/components/style.css

@@ -0,0 +1 @@
+.playVideos{display:flex;flex-direction:column;height:100%;padding-left:20px}.playVideos .operate{display:flex;justify-content:space-between;margin:5px 0}.playVideos .operate .button{cursor:pointer}.playVideos .grid{display:grid;flex:1;overflow:hidden}.playVideos .grid .video{background:#000;border:1px solid hsla(216,7%,59%,.3);height:100%;object-fit:fill;overflow:hidden;width:100%}.playVideos .grid.full{height:100%;left:0;position:fixed;top:0;width:100%;z-index:10}.playVideos .type1{grid-template-columns:1fr;grid-template-rows:1fr}.playVideos .type4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}.playVideos .type8{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr}.playVideos .type8 .video:first-child{grid-column:1/4;grid-row:1/4}.playVideos .type9{grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr}.playVideos .type13{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr}.playVideos .type13 .video:first-child{grid-column:1/3;grid-row:1/3}.playVideos .type16{grid-template-columns:1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr}@keyframes moveBottom{0%{bottom:0}to{bottom:-66px}}.videoComponent{background:#000;height:100%;position:relative;width:100%}.videoComponent.fill{object-fit:fill}.videoComponent.contain{object-fit:contain}.videoBox{height:100%;overflow:hidden;position:relative}.videoBox:hover .selectFields{animation-duration:1s;animation-fill-mode:both;animation-name:moveBottom}.videoBox:hover .footer-min{display:flex}.videoBox:hover .footer-min .name-min span,.videoBox:hover .footer-min .tool{display:block}.videoBox .selectFields{background:rgba(0,0,0,.3);bottom:0;display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr;height:66px;position:absolute;width:100%}.videoBox .selectFields .info{border:0;color:#fff;line-height:33px;overflow:hidden;padding:0 5px;text-align:center;text-overflow:ellipsis;white-space:nowrap}.videoBox .selectFields .info .value{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.videoBox .footer-min{align-items:center;backdrop-filter:blur(10px);background:hsla(0,0%,100%,.04);border-radius:4px 4px 0 0;bottom:0;display:none;height:44px;justify-content:space-between;position:absolute;width:100%}.videoBox .footer-min .name-min{align-items:center;display:flex;padding-left:15px}.videoBox .footer-min .name-min span{color:#fff;display:none;font-size:16px;font-weight:600}.videoBox .footer-min .tool{display:none}.videoBox .footer-min .tool img{cursor:pointer;height:20px;margin-right:15px;width:20px}.videoControls{align-items:center;display:flex;flex-direction:column;width:100%}.videoControls .videoControl{height:126px;position:relative;width:126px}.videoControls .videoControl .bg{height:100%;position:relative;width:100%}.videoControls .videoControl img{cursor:pointer;position:absolute}.videoControls .videoControl .up{left:52px;top:14px}.videoControls .videoControl .lup{left:26px;top:26px;transform:rotate(-45deg)}.videoControls .videoControl .rup{left:78px;top:27px;transform:rotate(45deg)}.videoControls .videoControl .left{left:14px;top:52px;transform:rotate(-90deg)}.videoControls .videoControl .right{left:90px;top:52px;transform:rotate(90deg)}.videoControls .videoControl .ldown{left:26px;top:78px;transform:rotate(215deg)}.videoControls .videoControl .down{left:52px;top:90px;transform:rotate(180deg)}.videoControls .videoControl .rdown{left:78px;top:78px;transform:rotate(135deg)}.videoControls .btns{background:#e0e7f2;border-radius:19px;height:28px;margin:8px 8px 0;padding:3px;width:56px}.videoControls .btns img{cursor:pointer;margin-right:1px}

package/dist/directives/index.cjs

@@ -0,0 +1,89 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const focusDirective = {
+  mounted(el, {
+    value
+  }) {
+    if (value !== false) {
+      el.focus();
+    }
+  }
+};
+
+const getScale = el => {
+  const parent = el.parentElement;
+  if (!parent) return;
+  const zoom = getComputedStyle(parent).getPropertyValue("zoom");
+  if (zoom !== "1") {
+    if (zoom !== "1") {
+      return {
+        x: Number(zoom)
+      };
+    } else {
+      return getScale(parent);
+    }
+  }
+  return getScale(parent);
+};
+const autoScroll = {
+  mounted(el, {
+    value = "ant-table-body",
+    modifiers
+  }) {
+    let timer;
+    let timer2;
+    let hover = false;
+    let wait = false;
+    const {
+      self
+    } = modifiers;
+    const onmouseenter = () => hover = true;
+    const onmouseleave = () => hover = false;
+    const scrollEl = self ? el : el.querySelector(`.${value}`);
+    if (!scrollEl) return;
+    const startScroll = () => {
+      if (!document.contains(el)) {
+        timer && clearInterval(timer);
+        el.removeEventListener("mouseenter", onmouseenter);
+        el.removeEventListener("mouseleave", onmouseleave);
+        return;
+      }
+      if (hover) return;
+      const scale = getScale(scrollEl);
+      const scrollElHeight = scrollEl.getBoundingClientRect().height / (scale?.y ?? 1);
+      const step = Math.ceil(1 / (scale?.x ?? 1));
+      if (scrollElHeight >= scrollEl.scrollHeight) {
+        return;
+      }
+      if (!hover && scrollEl.scrollTop + scrollElHeight > scrollEl.scrollHeight - step) {
+        if (timer2) return;
+        timer2 = setTimeout(() => {
+          if (!hover) {
+            scrollEl.scrollTop = 0;
+          }
+          setTimeout(() => {
+            if (!hover) {
+              wait = false;
+            }
+          }, 1e3);
+          timer2 = null;
+        }, 1e3);
+        wait = true;
+      } else {
+        if (!wait) {
+          scrollEl.scrollTo({
+            top: scrollEl.scrollTop + step
+          });
+        }
+      }
+    };
+    timer = setInterval(startScroll, 100);
+    el.addEventListener("mouseenter", onmouseenter);
+    el.addEventListener("mouseleave", onmouseleave);
+  }
+};
+
+exports.autoScroll = autoScroll;
+exports.focusDirective = focusDirective;

package/dist/directives/index.d.ts

@@ -0,0 +1,15 @@
+import { Directive } from 'vue';
+
+/**
+ * 输入框自动获取焦点
+ */
+declare const focusDirective: Directive;
+
+/**
+ * 列表自动滚动
+ * 用法 v-autoScroll={'class'} class: 需要滚动的类名，必须是指令所在元素的子元素
+ * 修饰符： self:作用在v-autoScoll本身的元素上
+ */
+declare const autoScroll: Directive;
+
+export { autoScroll, focusDirective };

package/dist/directives/index.js

@@ -0,0 +1,84 @@
+const focusDirective = {
+  mounted(el, {
+    value
+  }) {
+    if (value !== false) {
+      el.focus();
+    }
+  }
+};
+
+const getScale = el => {
+  const parent = el.parentElement;
+  if (!parent) return;
+  const zoom = getComputedStyle(parent).getPropertyValue("zoom");
+  if (zoom !== "1") {
+    if (zoom !== "1") {
+      return {
+        x: Number(zoom)
+      };
+    } else {
+      return getScale(parent);
+    }
+  }
+  return getScale(parent);
+};
+const autoScroll = {
+  mounted(el, {
+    value = "ant-table-body",
+    modifiers
+  }) {
+    let timer;
+    let timer2;
+    let hover = false;
+    let wait = false;
+    const {
+      self
+    } = modifiers;
+    const onmouseenter = () => hover = true;
+    const onmouseleave = () => hover = false;
+    const scrollEl = self ? el : el.querySelector(`.${value}`);
+    if (!scrollEl) return;
+    const startScroll = () => {
+      if (!document.contains(el)) {
+        timer && clearInterval(timer);
+        el.removeEventListener("mouseenter", onmouseenter);
+        el.removeEventListener("mouseleave", onmouseleave);
+        return;
+      }
+      if (hover) return;
+      const scale = getScale(scrollEl);
+      const scrollElHeight = scrollEl.getBoundingClientRect().height / (scale?.y ?? 1);
+      const step = Math.ceil(1 / (scale?.x ?? 1));
+      if (scrollElHeight >= scrollEl.scrollHeight) {
+        return;
+      }
+      if (!hover && scrollEl.scrollTop + scrollElHeight > scrollEl.scrollHeight - step) {
+        if (timer2) return;
+        timer2 = setTimeout(() => {
+          if (!hover) {
+            scrollEl.scrollTop = 0;
+          }
+          setTimeout(() => {
+            if (!hover) {
+              wait = false;
+            }
+          }, 1e3);
+          timer2 = null;
+        }, 1e3);
+        wait = true;
+      } else {
+        if (!wait) {
+          scrollEl.scrollTo({
+            top: scrollEl.scrollTop + step
+          });
+        }
+      }
+    };
+    timer = setInterval(startScroll, 100);
+    el.addEventListener("mouseenter", onmouseenter);
+    el.addEventListener("mouseleave", onmouseleave);
+  }
+};
+
+export { autoScroll, focusDirective };