@fmdevui/fm-dev 1.0.16 → 1.0.18

package/index.js

@@ -1,21 +1,21 @@
-/*! fm-dev v1.0.16 */
+/*! fm-dev v1.0.18 */
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('crypto'), require('url'), require('http'), require('https'), require('util'), require('stream'), require('assert'), require('zlib'), require('element-plus')) :
   typeof define === 'function' && define.amd ? define(['exports', 'vue', 'crypto', 'url', 'http', 'https', 'util', 'stream', 'assert', 'zlib', 'element-plus'], factory) :
   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.FmPlus = {}, global.Vue, global.crypto, global.require$$0, global.require$$1, global.require$$2, global.util, global.stream, global.require$$4, global.zlib, global.ElementPlus));
 })(this, (function (exports, vue, crypto, require$$0, require$$1, require$$2, util, stream, require$$4, zlib, elementPlus) { 'use strict';
 
-  const _hoisted_1$2 = { class: "fm-transfer-panel" };
-  const _hoisted_2$1 = { class: "fm-transfer-panel__header" };
-  const _hoisted_3 = { class: "fm-transfer-panel__body" };
-  const _hoisted_4 = { class: "fm-transfer-buttons__item" };
+  const _hoisted_1$3 = { class: "fm-transfer-panel" };
+  const _hoisted_2$2 = { class: "fm-transfer-panel__header" };
+  const _hoisted_3$1 = { class: "fm-transfer-panel__body" };
+  const _hoisted_4$1 = { class: "fm-transfer-buttons__item" };
   const _hoisted_5 = { class: "fm-transfer-buttons__item" };
   const _hoisted_6 = { class: "fm-transfer-buttons__item" };
   const _hoisted_7 = { class: "fm-transfer-buttons__item" };
   const _hoisted_8 = { class: "fm-transfer-panel" };
   const _hoisted_9 = { class: "fm-transfer-panel__header" };
   const _hoisted_10 = { class: "fm-transfer-panel__body" };
-  var _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
+  var _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "FmTransfer"
     },
@@ -175,8 +175,8 @@
           default: vue.withCtx(() => [
             vue.createVNode(_component_el_col, { span: 10 }, {
               default: vue.withCtx(() => [
-                vue.createElementVNode("div", _hoisted_1$2, [
-                  vue.createElementVNode("p", _hoisted_2$1, [
+                vue.createElementVNode("div", _hoisted_1$3, [
+                  vue.createElementVNode("p", _hoisted_2$2, [
                     vue.createVNode(_component_el_checkbox, {
                       modelValue: state.leftAllChecked,
                       "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => state.leftAllChecked = $event),
@@ -202,7 +202,7 @@
                       /* TEXT */
                     )
                   ]),
-                  vue.createElementVNode("div", _hoisted_3, [
+                  vue.createElementVNode("div", _hoisted_3$1, [
                     vue.createVNode(_component_el_input, {
                       class: "transfer-panel__filter",
                       modelValue: state.leftKeyword,
@@ -253,7 +253,7 @@
               class: "fm-transfer-buttons"
             }, {
               default: vue.withCtx(() => [
-                vue.createElementVNode("div", _hoisted_4, [
+                vue.createElementVNode("div", _hoisted_4$1, [
                   vue.createVNode(_component_el_button, {
                     type: "primary",
                     style: {},
@@ -372,9 +372,9 @@
     }
   });
 
-  const _hoisted_1$1 = { class: "notice-bar-warp-text-box" };
-  const _hoisted_2 = ["innerHTML"];
-  var _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$2 = { class: "notice-bar-warp-text-box" };
+  const _hoisted_2$1 = ["innerHTML"];
+  var _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     ...{
       name: "FmNoticeBar"
     },
@@ -465,7 +465,7 @@
                   2
                   /* CLASS */
                 )) : vue.createCommentVNode("v-if", true),
-                vue.createElementVNode("div", _hoisted_1$1, [
+                vue.createElementVNode("div", _hoisted_1$2, [
                   vue.createElementVNode(
                     "div",
                     {
@@ -477,7 +477,7 @@
                       vue.createElementVNode("div", {
                         innerHTML: props.text,
                         "data-slate-editor": ""
-                      }, null, 8, _hoisted_2)
+                      }, null, 8, _hoisted_2$1)
                     ],
                     512
                     /* NEED_PATCH */
@@ -497,6 +497,390 @@
     }
   });
 
+  var _sfc_main$2 = {
+    name: "dragVerify",
+    props: {
+      isPassing: {
+        type: Boolean,
+        default: false
+      },
+      width: {
+        type: Number,
+        default: 250
+      },
+      height: {
+        type: Number,
+        default: 40
+      },
+      text: {
+        type: String,
+        default: "swiping to the right side"
+      },
+      successText: {
+        type: String,
+        default: "success"
+      },
+      background: {
+        type: String,
+        default: "#eee"
+      },
+      progressBarBg: {
+        type: String,
+        default: "#76c61d"
+      },
+      completedBg: {
+        type: String,
+        default: "#76c61d"
+      },
+      circle: {
+        type: Boolean,
+        default: false
+      },
+      radius: {
+        type: String,
+        default: "4px"
+      },
+      handlerIcon: {
+        type: String
+      },
+      successIcon: {
+        type: String
+      },
+      handlerBg: {
+        type: String,
+        default: "#fff"
+      },
+      textSize: {
+        type: String,
+        default: "14px"
+      },
+      textColor: {
+        type: String,
+        default: "#333"
+      },
+      imgsrc: {
+        type: String
+      },
+      showTips: {
+        type: Boolean,
+        default: true
+      },
+      successTip: {
+        type: String,
+        default: "\u9A8C\u8BC1\u901A\u8FC7"
+      },
+      failTip: {
+        type: String,
+        default: "\u9A8C\u8BC1\u5931\u8D25"
+      },
+      diffDegree: {
+        type: Number,
+        default: 10
+      },
+      minDegree: {
+        type: Number,
+        default: 90
+      },
+      maxDegree: {
+        type: Number,
+        default: 270
+      }
+    },
+    mounted: function() {
+      const dragEl = this.$refs.dragVerify;
+      dragEl.style.setProperty("--textColor", this.textColor);
+      dragEl.style.setProperty("--width", Math.floor(this.width / 2) + "px");
+      dragEl.style.setProperty("--pwidth", -Math.floor(this.width / 2) + "px");
+    },
+    computed: {
+      handlerStyle: function() {
+        return {
+          width: this.height + "px",
+          height: this.height + "px",
+          background: this.handlerBg
+        };
+      },
+      message: function() {
+        return this.isPassing ? "" : this.text;
+      },
+      successMessage: function() {
+        return this.isPassing ? this.successText : "";
+      },
+      dragVerifyStyle: function() {
+        return {
+          width: this.width + "px",
+          height: this.height + "px",
+          lineHeight: this.height + "px",
+          marginTop: "20px",
+          background: this.background,
+          borderRadius: this.circle ? this.height / 2 + "px" : this.radius
+        };
+      },
+      dragVerifyImgStyle: function() {
+        return {
+          width: this.width + "px",
+          height: this.width + "px",
+          position: "relative",
+          overflow: "hidden",
+          "border-radius": "50%"
+        };
+      },
+      progressBarStyle: function() {
+        return {
+          background: this.progressBarBg,
+          height: this.height + "px",
+          borderRadius: this.circle ? this.height / 2 + "px 0 0 " + this.height / 2 + "px" : this.radius
+        };
+      },
+      textStyle: function() {
+        return {
+          height: this.height + "px",
+          width: this.width + "px",
+          fontSize: this.textSize
+        };
+      },
+      factor: function() {
+        if (this.minDegree == this.maxDegree) {
+          return Math.floor(1 + Math.random() * 6) / 10 + 1;
+        }
+        return 1;
+      }
+    },
+    data() {
+      return {
+        isMoving: false,
+        x: 0,
+        isOk: false,
+        showBar: false,
+        showErrorTip: false,
+        ranRotate: 0,
+        cRotate: 0,
+        imgStyle: {}
+      };
+    },
+    methods: {
+      checkimgLoaded: function() {
+        var minDegree = this.minDegree;
+        var maxDegree = this.maxDegree;
+        var ranRotate = Math.floor(minDegree + Math.random() * (maxDegree - minDegree));
+        this.ranRotate = ranRotate;
+        this.imgStyle = {
+          transform: `rotateZ(${ranRotate}deg)`
+        };
+      },
+      dragStart: function(e) {
+        if (!this.isPassing) {
+          this.isMoving = true;
+          this.x = e.pageX || e.touches[0].pageX;
+        }
+        this.showBar = true;
+        this.showErrorTip = false;
+        this.$emit("handlerMove");
+      },
+      dragMoving: function(e) {
+        if (this.isMoving && !this.isPassing) {
+          var _x = (e.pageX || e.touches[0].pageX) - this.x;
+          var handler = this.$refs.handler;
+          handler.style.left = _x + "px";
+          var progressBar = this.$refs.progressBar;
+          progressBar.style.width = _x + this.height / 2 + "px";
+          var cRotate = Math.ceil(_x / (this.width - this.height) * this.maxDegree * this.factor);
+          this.cRotate = cRotate;
+          var rotate = this.ranRotate - cRotate;
+          this.imgStyle = {
+            transform: `rotateZ(${rotate}deg)`
+          };
+        }
+      },
+      dragFinish: function(e) {
+        if (this.isMoving && !this.isPassing) {
+          if (Math.abs(this.ranRotate - this.cRotate) > this.diffDegree) {
+            this.isOk = true;
+            this.imgStyle = {
+              transform: `rotateZ(${this.ranRotate}deg)`
+            };
+            var that = this;
+            setTimeout(function() {
+              var handler = that.$refs.handler;
+              var progressBar = that.$refs.progressBar;
+              handler.style.left = "0";
+              progressBar.style.width = "0";
+              that.isOk = false;
+            }, 500);
+            this.showErrorTip = true;
+            this.$emit("passfail");
+          } else {
+            this.passVerify();
+          }
+          this.isMoving = false;
+        }
+      },
+      passVerify: function() {
+        this.$emit("update:isPassing", true);
+        this.isMoving = false;
+        var handler = this.$refs.handler;
+        handler.children[0].className = this.successIcon;
+        this.$refs.progressBar.style.background = this.completedBg;
+        this.$refs.message.style["-webkit-text-fill-color"] = "unset";
+        this.$refs.message.style.animation = "slidetounlock2 3s infinite";
+        this.$refs.progressBar.style.color = "#fff";
+        this.$refs.progressBar.style.fontSize = this.textSize;
+        this.$emit("passcallback");
+      },
+      reset: function() {
+        this.reImg();
+        this.checkimgLoaded();
+      },
+      reImg: function() {
+        this.$emit("update:isPassing", false);
+        const oriData = this.$options.data();
+        for (const key in oriData) {
+          if (Object.prototype.hasOwnProperty.call(oriData, key)) {
+            this[key] = oriData[key];
+          }
+        }
+        var handler = this.$refs.handler;
+        var message = this.$refs.message;
+        handler.style.left = "0";
+        this.$refs.progressBar.style.width = "0";
+        handler.children[0].className = this.handlerIcon;
+        message.style["-webkit-text-fill-color"] = "transparent";
+        message.style.animation = "slidetounlock 3s infinite";
+        message.style.color = this.background;
+      },
+      refreshimg: function() {
+        this.$emit("refresh");
+      }
+    },
+    watch: {
+      imgsrc: {
+        immediate: false,
+        handler: function() {
+          this.reImg();
+        }
+      }
+    }
+  };
+
+  var _export_sfc = (sfc, props) => {
+    const target = sfc.__vccOpts || sfc;
+    for (const [key, val] of props) {
+      target[key] = val;
+    }
+    return target;
+  };
+
+  const _hoisted_1$1 = { class: "drag-verify-container" };
+  const _hoisted_2 = ["src"];
+  const _hoisted_3 = {
+    key: 0,
+    class: "tips success"
+  };
+  const _hoisted_4 = {
+    key: 1,
+    class: "tips danger"
+  };
+  function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+    return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [
+      vue.createElementVNode(
+        "div",
+        {
+          style: vue.normalizeStyle([$options.dragVerifyImgStyle, { "background-color": "var(--el-color-primary)" }])
+        },
+        [
+          vue.createElementVNode("img", {
+            ref: "checkImg",
+            src: $props.imgsrc,
+            class: vue.normalizeClass(["check-img", { goOrigin: $data.isOk }]),
+            onLoad: _cache[0] || (_cache[0] = (...args) => $options.checkimgLoaded && $options.checkimgLoaded(...args)),
+            style: vue.normalizeStyle($data.imgStyle),
+            alt: ""
+          }, null, 46, _hoisted_2),
+          $props.showTips && $props.isPassing ? (vue.openBlock(), vue.createElementBlock(
+            "div",
+            _hoisted_3,
+            vue.toDisplayString($props.successTip),
+            1
+            /* TEXT */
+          )) : vue.createCommentVNode("v-if", true),
+          $props.showTips && !$props.isPassing && $data.showErrorTip ? (vue.openBlock(), vue.createElementBlock(
+            "div",
+            _hoisted_4,
+            vue.toDisplayString($props.failTip),
+            1
+            /* TEXT */
+          )) : vue.createCommentVNode("v-if", true)
+        ],
+        4
+        /* STYLE */
+      ),
+      vue.createElementVNode(
+        "div",
+        {
+          ref: "dragVerify",
+          class: "drag_verify",
+          style: vue.normalizeStyle($options.dragVerifyStyle),
+          onMousemove: _cache[3] || (_cache[3] = (...args) => $options.dragMoving && $options.dragMoving(...args)),
+          onMouseup: _cache[4] || (_cache[4] = (...args) => $options.dragFinish && $options.dragFinish(...args)),
+          onMouseleave: _cache[5] || (_cache[5] = (...args) => $options.dragFinish && $options.dragFinish(...args)),
+          onTouchmove: _cache[6] || (_cache[6] = vue.withModifiers((...args) => $options.dragMoving && $options.dragMoving(...args), ["prevent"])),
+          onTouchend: _cache[7] || (_cache[7] = vue.withModifiers((...args) => $options.dragFinish && $options.dragFinish(...args), ["prevent"]))
+        },
+        [
+          vue.createElementVNode(
+            "div",
+            {
+              class: vue.normalizeClass(["dv_progress_bar", { goFirst2: $data.isOk }]),
+              ref: "progressBar",
+              style: vue.normalizeStyle($options.progressBarStyle)
+            },
+            vue.toDisplayString($options.successMessage),
+            7
+            /* TEXT, CLASS, STYLE */
+          ),
+          vue.createElementVNode(
+            "div",
+            {
+              class: "dv_text",
+              style: vue.normalizeStyle($options.textStyle),
+              ref: "message"
+            },
+            vue.toDisplayString($options.message),
+            5
+            /* TEXT, STYLE */
+          ),
+          vue.createElementVNode(
+            "div",
+            {
+              class: vue.normalizeClass(["dv_handler dv_handler_bg", { goFirst: $data.isOk }]),
+              onMousedown: _cache[1] || (_cache[1] = (...args) => $options.dragStart && $options.dragStart(...args)),
+              onTouchstart: _cache[2] || (_cache[2] = vue.withModifiers((...args) => $options.dragStart && $options.dragStart(...args), ["prevent"])),
+              ref: "handler",
+              style: vue.normalizeStyle([$options.handlerStyle, { "background-color": "var(--el-color-primary)" }])
+            },
+            [
+              vue.createElementVNode(
+                "i",
+                {
+                  class: vue.normalizeClass($props.handlerIcon),
+                  style: { "color": "#fff" }
+                },
+                null,
+                2
+                /* CLASS */
+              )
+            ],
+            38
+            /* CLASS, STYLE, NEED_HYDRATION */
+          )
+        ],
+        36
+        /* STYLE, NEED_HYDRATION */
+      )
+    ]);
+  }
+  var dragimg = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render], ["__scopeId", "data-v-9e8c9ed2"]]);
+
   /*! Element Plus Icons Vue v2.3.1 */
 
   var add_location_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ vue.defineComponent({
@@ -6654,8 +7038,9 @@
     }
   }
 
-  const FmTransfer = _sfc_main$3;
-  const FmNoticeBar = _sfc_main$2;
+  const FmTransfer = _sfc_main$4;
+  const FmNoticeBar = _sfc_main$3;
+  const FmDragImg = dragimg;
 
   const makeInstaller = (components = []) => {
     const install = (app) => {
@@ -51686,6 +52071,7 @@
 
   const install = installer.install;
 
+  exports.FmDragImg = FmDragImg;
   exports.FmLogin = FmLogin;
   exports.FmNoticeBar = FmNoticeBar;
   exports.FmTransfer = FmTransfer;

package/index.min.css

@@ -0,0 +1 @@
+.drag_verify[data-v-9e8c9ed2]{background-color:#e8e8e8;overflow:hidden;position:relative;text-align:center}.drag_verify .dv_handler[data-v-9e8c9ed2]{cursor:move;left:0;position:absolute;top:0}.drag_verify .dv_handler i[data-v-9e8c9ed2]{color:#666;font-size:16px;padding-left:0}.drag_verify .dv_handler .el-icon-circle-check[data-v-9e8c9ed2]{color:#6c6;margin-top:9px}.drag_verify .dv_progress_bar[data-v-9e8c9ed2]{height:34px;position:absolute;width:0}.drag_verify .dv_text[data-v-9e8c9ed2]{background:-webkit-gradient(linear,left top,right top,color-stop(0,var(--textColor)),color-stop(.4,var(--textColor)),color-stop(.5,#fff),color-stop(.6,var(--textColor)),color-stop(1,var(--textColor)));-webkit-background-clip:text;color:transparent;position:absolute;top:0;-moz-user-select:none;-webkit-user-select:none;user-select:none;-o-user-select:none;-ms-user-select:none;-webkit-text-fill-color:transparent;-webkit-text-size-adjust:none;animation:slidetounlock 3s infinite}.drag_verify .dv_text[data-v-9e8c9ed2] *{-webkit-text-fill-color:var(--textColor)}.goFirst[data-v-9e8c9ed2]{left:0!important;transition:left .5s}.goOrigin[data-v-9e8c9ed2]{transition:transform .5s}.goKeep[data-v-9e8c9ed2]{transition:left .2s}.goFirst2[data-v-9e8c9ed2]{transition:width .5s;width:0!important}.drag-verify-container[data-v-9e8c9ed2]{border-radius:50%;line-height:0;position:relative}.move-bar[data-v-9e8c9ed2]{position:absolute;z-index:100}.clip-bar[data-v-9e8c9ed2]{background:hsla(0,0%,100%,.8);position:absolute}.refresh[data-v-9e8c9ed2]{cursor:pointer;font-size:20px;position:absolute;right:5px;top:5px;z-index:200}.tips[data-v-9e8c9ed2]{bottom:25px;font-size:12px;height:20px;line-height:20px;position:absolute;text-align:center;width:100%;z-index:200}.tips.success[data-v-9e8c9ed2]{background:hsla(0,0%,100%,.6);color:green}.tips.danger[data-v-9e8c9ed2]{background:rgba(0,0,0,.6);color:#ff0}.check-img[data-v-9e8c9ed2]{border-radius:50%;width:100%}