├── .eslintrc.js ├── .gitignore ├── docs ├── assets │ ├── index.84b3fba9.css │ ├── index.d4dd2bc2.js │ └── vendor.5e89dcc4.js └── index.html ├── package.json ├── packages ├── exampleV3 │ ├── babel.config.js │ ├── index.html │ ├── package.json │ ├── src │ │ ├── App.vue │ │ └── main.js │ ├── vite.config.js │ └── yarn.lock └── slideValidator │ ├── component.ts │ ├── dist │ ├── index.cjs.js │ ├── index.cjs.js.map │ ├── index.css │ ├── index.d.ts │ ├── index.esm.js │ ├── index.esm.js.map │ ├── index.global.js │ └── index.global.js.map │ ├── index.css │ ├── index.ts │ ├── package.json │ ├── readme.md │ ├── utils │ └── index.ts │ └── yarn.lock ├── readme.md ├── rollup.config.js ├── tsconfig.json └── yarn.lock /.eslintrc.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-undef */ 2 | export default { 3 | "env": { 4 | "browser": true, 5 | "es2021": true 6 | }, 7 | "extends": [ 8 | "eslint:recommended", 9 | "plugin:vue/essential", 10 | "plugin:@typescript-eslint/recommended" 11 | ], 12 | "parserOptions": { 13 | "ecmaVersion": 12, 14 | "parser": "@typescript-eslint/parser", 15 | "sourceType": "module" 16 | }, 17 | "plugins": [ 18 | "vue", 19 | "@typescript-eslint" 20 | ], 21 | rules: { 22 | "no-console": process.env.NODE_ENV === "production" ? "warn" : "off", 23 | "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off" 24 | } 25 | }; 26 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | /logs 5 | 6 | # local env files 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | pnpm-debug.log* 15 | 16 | # Editor directories and files 17 | .idea 18 | .vscode 19 | *.suo 20 | *.ntvs* 21 | *.njsproj 22 | *.sln 23 | *.sw? 24 | /public/upload/ 25 | -------------------------------------------------------------------------------- /docs/assets/index.84b3fba9.css: -------------------------------------------------------------------------------- 1 | .vue-login_slide-container{position:relative;border-radius:4px}.vue-login_slider-container{position:absolute;top:0px;left:0px;border-radius:4px;cursor:move;z-index:10;background-color:#f0f8ff;border:1px solid #f3efef;box-sizing:border-box}.vue-login_slider-success-bg{position:absolute;left:0;top:0;bottom:0;border-radius:4px;box-sizing:border-box}.vue-login_inner-container{position:absolute;left:0;top:0;right:0;bottom:0;user-select:none;display:flex;align-items:center;justify-content:center}div{line-height:50px} 2 | -------------------------------------------------------------------------------- /docs/assets/index.d4dd2bc2.js: -------------------------------------------------------------------------------- 1 | import{d as e,c as t,r as n,o as l,h as r,a as i,b as s,e as u,u as o,F as a,f as c,g as d}from"./vendor.5e89dcc4.js";!function(){const e=document.createElement("link").relList;if(!(e&&e.supports&&e.supports("modulepreload"))){for(const e of document.querySelectorAll('link[rel="modulepreload"]'))t(e);new MutationObserver((e=>{for(const n of e)if("childList"===n.type)for(const e of n.addedNodes)"LINK"===e.tagName&&"modulepreload"===e.rel&&t(e)})).observe(document,{childList:!0,subtree:!0})}function t(e){if(e.ep)return;e.ep=!0;const t=function(e){const t={};return e.integrity&&(t.integrity=e.integrity),e.referrerpolicy&&(t.referrerPolicy=e.referrerpolicy),"use-credentials"===e.crossorigin?t.credentials="include":"anonymous"===e.crossorigin?t.credentials="omit":t.credentials="same-origin",t}(e);fetch(e.href,t)}}(); 2 | /*! ***************************************************************************** 3 | Copyright (c) Microsoft Corporation. 4 | 5 | Permission to use, copy, modify, and/or distribute this software for any 6 | purpose with or without fee is hereby granted. 7 | 8 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH 9 | REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY 10 | AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, 11 | INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM 12 | LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR 13 | OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR 14 | PERFORMANCE OF THIS SOFTWARE. 15 | ***************************************************************************** */ 16 | var v=function(){return(v=Object.assign||function(e){for(var t,n=1,l=arguments.length;n0&&y.value<=n?(s.value.style.left=y.value+"px",a.value.style.width=y.value+"px"):y.value>n&&function(){d.value=!0,o.value.innerText=e.sliderSuccessInnerText;var t=parseInt(u.value.style.width)-parseInt(s.value.style.width)+"px";if(s.value.style.left=t,a.value.style.width=t,e.sliderSuccessStyle)for(var n in e.sliderSuccessStyle)Object.prototype.hasOwnProperty.call(e.sliderSuccessStyle,n)&&(s.value.style[n]=e.sliderSuccessStyle[n]);document.removeEventListener("mousemove",h)}()}};return{slideValidatorStatus:d,containerWidth:t,containerHeight:r,mergeSliderStyle:i}},render:function(){return r("div",{class:"vue-login_slide-container",style:{width:this.containerWidth,height:this.containerHeight,backgroundColor:this.backgroundColor}},[r("div",{class:"vue-login_slider-success-bg",style:{backgroundColor:this.successBgColor}}),r("div",{class:"vue-login_slider-container",style:this.mergeSliderStyle}),r("div",{class:"vue-login_inner-container",style:this.innerTextStyle},this.innerText)])}});d({setup(e){const t=n(null),l=n(0),r=()=>{console.log(t),alert(t.value.slideValidatorStatus)},d=()=>{l.value=Date.now()};return(e,n)=>(c(),i(a,null,[s("div",null,[s("button",{onClick:r},"获取状态"),s("button",{onClick:d},"重置")]),s("div",null,[u(o(y),{key:l.value,width:"300px","slider-success-style":{backgroundColor:"lightgreen"},"success-bg-color":"#ccc",ref:(e,n)=>{n.sliderRef=e,t.value=e}},null,512)])],64))}}).mount("#app"); 17 | -------------------------------------------------------------------------------- /docs/assets/vendor.5e89dcc4.js: -------------------------------------------------------------------------------- 1 | function e(e,t){const n=Object.create(null),o=e.split(",");for(let s=0;s!!n[e.toLowerCase()]:e=>!!n[e]}const t=e("itemscope,allowfullscreen,formnovalidate,ismap,nomodule,novalidate,readonly");function n(e){return!!e||""===e}function o(e){if(y(e)){const t={};for(let n=0;n{if(e){const n=e.split(r);n.length>1&&(t[n[0].trim()]=n[1].trim())}})),t}function i(e){let t="";if(w(e))t=e;else if(y(e))for(let n=0;n{},f=()=>!1,p=/^on[^a-z]/,d=e=>p.test(e),h=e=>e.startsWith("onUpdate:"),v=Object.assign,g=(e,t)=>{const n=e.indexOf(t);n>-1&&e.splice(n,1)},m=Object.prototype.hasOwnProperty,_=(e,t)=>m.call(e,t),y=Array.isArray,b=e=>"[object Map]"===F(e),x=e=>"function"==typeof e,w=e=>"string"==typeof e,C=e=>"symbol"==typeof e,S=e=>null!==e&&"object"==typeof e,k=e=>S(e)&&x(e.then)&&x(e.catch),O=Object.prototype.toString,F=e=>O.call(e),E=e=>w(e)&&"NaN"!==e&&"-"!==e[0]&&""+parseInt(e,10)===e,P=e(",key,ref,onVnodeBeforeMount,onVnodeMounted,onVnodeBeforeUpdate,onVnodeUpdated,onVnodeBeforeUnmount,onVnodeUnmounted"),R=e=>{const t=Object.create(null);return n=>t[n]||(t[n]=e(n))},M=/-(\w)/g,j=R((e=>e.replace(M,((e,t)=>t?t.toUpperCase():"")))),T=/\B([A-Z])/g,A=R((e=>e.replace(T,"-$1").toLowerCase())),$=R((e=>e.charAt(0).toUpperCase()+e.slice(1))),V=R((e=>e?`on${$(e)}`:"")),N=(e,t)=>!Object.is(e,t),U=(e,t)=>{for(let n=0;n{Object.defineProperty(e,t,{configurable:!0,enumerable:!1,value:n})},L=e=>{const t=parseFloat(e);return isNaN(t)?e:t};let B;const W=[];class D{constructor(e=!1){this.active=!0,this.effects=[],this.cleanups=[],!e&&B&&(this.parent=B,this.index=(B.scopes||(B.scopes=[])).push(this)-1)}run(e){if(this.active)try{return this.on(),e()}finally{this.off()}}on(){this.active&&(W.push(this),B=this)}off(){this.active&&(W.pop(),B=W[W.length-1])}stop(e){if(this.active){if(this.effects.forEach((e=>e.stop())),this.cleanups.forEach((e=>e())),this.scopes&&this.scopes.forEach((e=>e.stop(!0))),this.parent&&!e){const e=this.parent.scopes.pop();e&&e!==this&&(this.parent.scopes[this.index]=e,e.index=this.index)}this.active=!1}}}const z=e=>{const t=new Set(e);return t.w=0,t.n=0,t},H=e=>(e.w&X)>0,K=e=>(e.n&X)>0,q=new WeakMap;let G=0,X=1;const Z=[];let J;const Q=Symbol(""),Y=Symbol("");class ee{constructor(e,t=null,n){this.fn=e,this.scheduler=t,this.active=!0,this.deps=[],function(e,t){(t=t||B)&&t.active&&t.effects.push(e)}(this,n)}run(){if(!this.active)return this.fn();if(!Z.includes(this))try{return Z.push(J=this),oe.push(ne),ne=!0,X=1<<++G,G<=30?(({deps:e})=>{if(e.length)for(let t=0;t{const{deps:t}=e;if(t.length){let n=0;for(let o=0;o0?Z[e-1]:void 0}}stop(){this.active&&(te(this),this.onStop&&this.onStop(),this.active=!1)}}function te(e){const{deps:t}=e;if(t.length){for(let n=0;n{("length"===t||t>=o)&&i.push(e)}));else switch(void 0!==n&&i.push(l.get(n)),t){case"add":y(e)?E(n)&&i.push(l.get("length")):(i.push(l.get(Q)),b(e)&&i.push(l.get(Y)));break;case"delete":y(e)||(i.push(l.get(Q)),b(e)&&i.push(l.get(Y)));break;case"set":b(e)&&i.push(l.get(Q))}if(1===i.length)i[0]&&ae(i[0]);else{const e=[];for(const t of i)t&&e.push(...t);ae(z(e))}}function ae(e,t){for(const n of y(e)?e:[...e])(n!==J||n.allowRecurse)&&(n.scheduler?n.scheduler():n.run())}const fe=e("__proto__,__v_isRef,__isVue"),pe=new Set(Object.getOwnPropertyNames(Symbol).map((e=>Symbol[e])).filter(C)),de=_e(),he=_e(!1,!0),ve=_e(!0),ge=me();function me(){const e={};return["includes","indexOf","lastIndexOf"].forEach((t=>{e[t]=function(...e){const n=ot(this);for(let t=0,s=this.length;t{e[t]=function(...e){se();const n=ot(this)[t].apply(this,e);return re(),n}})),e}function _e(e=!1,t=!1){return function(n,o,s){if("__v_isReactive"===o)return!e;if("__v_isReadonly"===o)return e;if("__v_raw"===o&&s===(e?t?Xe:Ge:t?qe:Ke).get(n))return n;const r=y(n);if(!e&&r&&_(ge,o))return Reflect.get(ge,o,s);const l=Reflect.get(n,o,s);if(C(o)?pe.has(o):fe(o))return l;if(e||le(n,0,o),t)return l;if(ct(l)){return!r||!E(o)?l.value:l}return S(l)?e?Qe(l):Je(l):l}}function ye(e=!1){return function(t,n,o,s){let r=t[n];if(!e&&(o=ot(o),r=ot(r),!y(t)&&ct(r)&&!ct(o)))return r.value=o,!0;const l=y(t)&&E(n)?Number(n)!0,deleteProperty:(e,t)=>!0},we=v({},be,{get:he,set:ye(!0)}),Ce=e=>S(e)?Je(e):e,Se=e=>S(e)?Qe(e):e,ke=e=>e,Oe=e=>Reflect.getPrototypeOf(e);function Fe(e,t,n=!1,o=!1){const s=ot(e=e.__v_raw),r=ot(t);t!==r&&!n&&le(s,0,t),!n&&le(s,0,r);const{has:l}=Oe(s),i=o?ke:n?Se:Ce;return l.call(s,t)?i(e.get(t)):l.call(s,r)?i(e.get(r)):void(e!==s&&e.get(t))}function Ee(e,t=!1){const n=this.__v_raw,o=ot(n),s=ot(e);return e!==s&&!t&&le(o,0,e),!t&&le(o,0,s),e===s?n.has(e):n.has(e)||n.has(s)}function Pe(e,t=!1){return e=e.__v_raw,!t&&le(ot(e),0,Q),Reflect.get(e,"size",e)}function Re(e){e=ot(e);const t=ot(this);return Oe(t).has.call(t,e)||(t.add(e),ue(t,"add",e,e)),this}function Me(e,t){t=ot(t);const n=ot(this),{has:o,get:s}=Oe(n);let r=o.call(n,e);r||(e=ot(e),r=o.call(n,e));const l=s.call(n,e);return n.set(e,t),r?N(t,l)&&ue(n,"set",e,t):ue(n,"add",e,t),this}function je(e){const t=ot(this),{has:n,get:o}=Oe(t);let s=n.call(t,e);s||(e=ot(e),s=n.call(t,e)),o&&o.call(t,e);const r=t.delete(e);return s&&ue(t,"delete",e,void 0),r}function Te(){const e=ot(this),t=0!==e.size,n=e.clear();return t&&ue(e,"clear",void 0,void 0),n}function Ae(e,t){return function(n,o){const s=this,r=s.__v_raw,l=ot(r),i=t?ke:e?Se:Ce;return!e&&le(l,0,Q),r.forEach(((e,t)=>n.call(o,i(e),i(t),s)))}}function $e(e,t,n){return function(...o){const s=this.__v_raw,r=ot(s),l=b(r),i="entries"===e||e===Symbol.iterator&&l,c="keys"===e&&l,u=s[e](...o),a=n?ke:t?Se:Ce;return!t&&le(r,0,c?Y:Q),{next(){const{value:e,done:t}=u.next();return t?{value:e,done:t}:{value:i?[a(e[0]),a(e[1])]:a(e),done:t}},[Symbol.iterator](){return this}}}}function Ve(e){return function(...t){return"delete"!==e&&this}}function Ne(){const e={get(e){return Fe(this,e)},get size(){return Pe(this)},has:Ee,add:Re,set:Me,delete:je,clear:Te,forEach:Ae(!1,!1)},t={get(e){return Fe(this,e,!1,!0)},get size(){return Pe(this)},has:Ee,add:Re,set:Me,delete:je,clear:Te,forEach:Ae(!1,!0)},n={get(e){return Fe(this,e,!0)},get size(){return Pe(this,!0)},has(e){return Ee.call(this,e,!0)},add:Ve("add"),set:Ve("set"),delete:Ve("delete"),clear:Ve("clear"),forEach:Ae(!0,!1)},o={get(e){return Fe(this,e,!0,!0)},get size(){return Pe(this,!0)},has(e){return Ee.call(this,e,!0)},add:Ve("add"),set:Ve("set"),delete:Ve("delete"),clear:Ve("clear"),forEach:Ae(!0,!0)};return["keys","values","entries",Symbol.iterator].forEach((s=>{e[s]=$e(s,!1,!1),n[s]=$e(s,!0,!1),t[s]=$e(s,!1,!0),o[s]=$e(s,!0,!0)})),[e,n,t,o]}const[Ue,Ie,Le,Be]=Ne();function We(e,t){const n=t?e?Be:Le:e?Ie:Ue;return(t,o,s)=>"__v_isReactive"===o?!e:"__v_isReadonly"===o?e:"__v_raw"===o?t:Reflect.get(_(n,o)&&o in t?n:t,o,s)}const De={get:We(!1,!1)},ze={get:We(!1,!0)},He={get:We(!0,!1)},Ke=new WeakMap,qe=new WeakMap,Ge=new WeakMap,Xe=new WeakMap;function Ze(e){return e.__v_skip||!Object.isExtensible(e)?0:function(e){switch(e){case"Object":case"Array":return 1;case"Map":case"Set":case"WeakMap":case"WeakSet":return 2;default:return 0}}((e=>F(e).slice(8,-1))(e))}function Je(e){return e&&e.__v_isReadonly?e:Ye(e,!1,be,De,Ke)}function Qe(e){return Ye(e,!0,xe,He,Ge)}function Ye(e,t,n,o,s){if(!S(e))return e;if(e.__v_raw&&(!t||!e.__v_isReactive))return e;const r=s.get(e);if(r)return r;const l=Ze(e);if(0===l)return e;const i=new Proxy(e,2===l?o:n);return s.set(e,i),i}function et(e){return tt(e)?et(e.__v_raw):!(!e||!e.__v_isReactive)}function tt(e){return!(!e||!e.__v_isReadonly)}function nt(e){return et(e)||tt(e)}function ot(e){const t=e&&e.__v_raw;return t?ot(t):e}function st(e){return I(e,"__v_skip",!0),e}function rt(e){ie()&&((e=ot(e)).dep||(e.dep=z()),ce(e.dep))}function lt(e,t){(e=ot(e)).dep&&ae(e.dep)}const it=e=>S(e)?Je(e):e;function ct(e){return Boolean(e&&!0===e.__v_isRef)}function ut(e){return function(e,t){if(ct(e))return e;return new at(e,t)}(e,!1)}class at{constructor(e,t){this._shallow=t,this.dep=void 0,this.__v_isRef=!0,this._rawValue=t?e:ot(e),this._value=t?e:it(e)}get value(){return rt(this),this._value}set value(e){e=this._shallow?e:ot(e),N(e,this._rawValue)&&(this._rawValue=e,this._value=this._shallow?e:it(e),lt(this))}}function ft(e){return ct(e)?e.value:e}const pt={get:(e,t,n)=>ft(Reflect.get(e,t,n)),set:(e,t,n,o)=>{const s=e[t];return ct(s)&&!ct(n)?(s.value=n,!0):Reflect.set(e,t,n,o)}};function dt(e){return et(e)?e:new Proxy(e,pt)}class ht{constructor(e,t,n){this._setter=t,this.dep=void 0,this._dirty=!0,this.__v_isRef=!0,this.effect=new ee(e,(()=>{this._dirty||(this._dirty=!0,lt(this))})),this.__v_isReadonly=n}get value(){const e=ot(this);return rt(e),e._dirty&&(e._dirty=!1,e._value=e.effect.run()),e._value}set value(e){this._setter(e)}}function vt(e,t){let n,o;x(e)?(n=e,o=a):(n=e.get,o=e.set);return new ht(n,o,x(e)||!e.set)}Promise.resolve();function gt(e,t,...n){const o=e.vnode.props||c;let s=n;const r=t.startsWith("update:"),l=r&&t.slice(7);if(l&&l in o){const e=`${"modelValue"===l?"model":l}Modifiers`,{number:t,trim:r}=o[e]||c;r?s=n.map((e=>e.trim())):t&&(s=n.map(L))}let i,u=o[i=V(t)]||o[i=V(j(t))];!u&&r&&(u=o[i=V(A(t))]),u&&ao(u,e,6,s);const a=o[i+"Once"];if(a){if(e.emitted){if(e.emitted[i])return}else e.emitted={};e.emitted[i]=!0,ao(a,e,6,s)}}function mt(e,t,n=!1){const o=t.emitsCache,s=o.get(e);if(void 0!==s)return s;const r=e.emits;let l={},i=!1;if(!x(e)){const o=e=>{const n=mt(e,t,!0);n&&(i=!0,v(l,n))};!n&&t.mixins.length&&t.mixins.forEach(o),e.extends&&o(e.extends),e.mixins&&e.mixins.forEach(o)}return r||i?(y(r)?r.forEach((e=>l[e]=null)):v(l,r),o.set(e,l),l):(o.set(e,null),null)}function _t(e,t){return!(!e||!d(t))&&(t=t.slice(2).replace(/Once$/,""),_(e,t[0].toLowerCase()+t.slice(1))||_(e,A(t))||_(e,t))}let yt=null,bt=null;function xt(e){const t=yt;return yt=e,bt=e&&e.type.__scopeId||null,t}function wt(e){const{type:t,vnode:n,proxy:o,withProxy:s,props:r,propsOptions:[l],slots:i,attrs:c,emit:u,render:a,renderCache:f,data:p,setupState:d,ctx:v,inheritAttrs:g}=e;let m;const _=xt(e);try{let e;if(4&n.shapeFlag){const t=s||o;m=qn(a.call(t,t,f,r,d,p,v)),e=c}else{const n=t;0,m=qn(n.length>1?n(r,{attrs:c,slots:i,emit:u}):n(r,null)),e=t.props?c:Ct(c)}let _=m;if(e&&!1!==g){const t=Object.keys(e),{shapeFlag:n}=_;t.length&&7&n&&(l&&t.some(h)&&(e=St(e,l)),_=Hn(_,e))}0,n.dirs&&(_.dirs=_.dirs?_.dirs.concat(n.dirs):n.dirs),n.transition&&(_.transition=n.transition),m=_}catch(y){Mn.length=0,fo(y,e,1),m=zn(Pn)}return xt(_),m}const Ct=e=>{let t;for(const n in e)("class"===n||"style"===n||d(n))&&((t||(t={}))[n]=e[n]);return t},St=(e,t)=>{const n={};for(const o in e)h(o)&&o.slice(9)in t||(n[o]=e[o]);return n};function kt(e,t,n){const o=Object.keys(t);if(o.length!==Object.keys(e).length)return!0;for(let s=0;s1)return n&&x(t)?t.call(o.proxy):t}}function Ft(e){return x(e)?{setup:e,name:e.name}:e}const Et=e=>!!e.type.__asyncLoader,Pt=e=>e.type.__isKeepAlive;function Rt(e,t){jt(e,"a",t)}function Mt(e,t){jt(e,"da",t)}function jt(e,t,n=to){const o=e.__wdc||(e.__wdc=()=>{let t=n;for(;t;){if(t.isDeactivated)return;t=t.parent}e()});if(At(t,o,n),n){let e=n.parent;for(;e&&e.parent;)Pt(e.parent.vnode)&&Tt(o,t,n,e),e=e.parent}}function Tt(e,t,n,o){const s=At(t,e,o,!0);Bt((()=>{g(o[t],s)}),n)}function At(e,t,n=to,o=!1){if(n){const s=n[e]||(n[e]=[]),r=t.__weh||(t.__weh=(...o)=>{if(n.isUnmounted)return;se(),no(n);const s=ao(t,n,e,o);return oo(),re(),s});return o?s.unshift(r):s.push(r),r}}const $t=e=>(t,n=to)=>(!ro||"sp"===e)&&At(e,t,n),Vt=$t("bm"),Nt=$t("m"),Ut=$t("bu"),It=$t("u"),Lt=$t("bum"),Bt=$t("um"),Wt=$t("sp"),Dt=$t("rtg"),zt=$t("rtc");function Ht(e,t=to){At("ec",e,t)}let Kt=!0;function qt(e){const t=Zt(e),n=e.proxy,o=e.ctx;Kt=!1,t.beforeCreate&&Gt(t.beforeCreate,e,"bc");const{data:s,computed:r,methods:l,watch:i,provide:c,inject:u,created:f,beforeMount:p,mounted:d,beforeUpdate:h,updated:v,activated:g,deactivated:m,beforeDestroy:_,beforeUnmount:b,destroyed:w,unmounted:C,render:k,renderTracked:O,renderTriggered:F,errorCaptured:E,serverPrefetch:P,expose:R,inheritAttrs:M,components:j,directives:T,filters:A}=t;if(u&&function(e,t,n=a,o=!1){y(e)&&(e=en(e));for(const s in e){const n=e[s];let r;r=S(n)?"default"in n?Ot(n.from||s,n.default,!0):Ot(n.from||s):Ot(n),ct(r)&&o?Object.defineProperty(t,s,{enumerable:!0,configurable:!0,get:()=>r.value,set:e=>r.value=e}):t[s]=r}}(u,o,null,e.appContext.config.unwrapInjectedRef),l)for(const a in l){const e=l[a];x(e)&&(o[a]=e.bind(n))}if(s){const t=s.call(n,n);S(t)&&(e.data=Je(t))}if(Kt=!0,r)for(const y in r){const e=r[y],t=vt({get:x(e)?e.bind(n,n):x(e.get)?e.get.bind(n,n):a,set:!x(e)&&x(e.set)?e.set.bind(n):a});Object.defineProperty(o,y,{enumerable:!0,configurable:!0,get:()=>t.value,set:e=>t.value=e})}if(i)for(const a in i)Xt(i[a],o,n,a);if(c){const e=x(c)?c.call(n):c;Reflect.ownKeys(e).forEach((t=>{!function(e,t){if(to){let n=to.provides;const o=to.parent&&to.parent.provides;o===n&&(n=to.provides=Object.create(o)),n[e]=t}}(t,e[t])}))}function $(e,t){y(t)?t.forEach((t=>e(t.bind(n)))):t&&e(t.bind(n))}if(f&&Gt(f,e,"c"),$(Vt,p),$(Nt,d),$(Ut,h),$(It,v),$(Rt,g),$(Mt,m),$(Ht,E),$(zt,O),$(Dt,F),$(Lt,b),$(Bt,C),$(Wt,P),y(R))if(R.length){const t=e.exposed||(e.exposed={});R.forEach((e=>{Object.defineProperty(t,e,{get:()=>n[e],set:t=>n[e]=t})}))}else e.exposed||(e.exposed={});k&&e.render===a&&(e.render=k),null!=M&&(e.inheritAttrs=M),j&&(e.components=j),T&&(e.directives=T)}function Gt(e,t,n){ao(y(e)?e.map((e=>e.bind(t.proxy))):e.bind(t.proxy),t,n)}function Xt(e,t,n,o){const s=o.includes(".")?Uo(n,o):()=>n[o];if(w(e)){const n=t[e];x(n)&&$o(s,n)}else if(x(e))$o(s,e.bind(n));else if(S(e))if(y(e))e.forEach((e=>Xt(e,t,n,o)));else{const o=x(e.handler)?e.handler.bind(n):t[e.handler];x(o)&&$o(s,o,e)}}function Zt(e){const t=e.type,{mixins:n,extends:o}=t,{mixins:s,optionsCache:r,config:{optionMergeStrategies:l}}=e.appContext,i=r.get(t);let c;return i?c=i:s.length||n||o?(c={},s.length&&s.forEach((e=>Jt(c,e,l,!0))),Jt(c,t,l)):c=t,r.set(t,c),c}function Jt(e,t,n,o=!1){const{mixins:s,extends:r}=t;r&&Jt(e,r,n,!0),s&&s.forEach((t=>Jt(e,t,n,!0)));for(const l in t)if(o&&"expose"===l);else{const o=Qt[l]||n&&n[l];e[l]=o?o(e[l],t[l]):t[l]}return e}const Qt={data:Yt,props:nn,emits:nn,methods:nn,computed:nn,beforeCreate:tn,created:tn,beforeMount:tn,mounted:tn,beforeUpdate:tn,updated:tn,beforeDestroy:tn,beforeUnmount:tn,destroyed:tn,unmounted:tn,activated:tn,deactivated:tn,errorCaptured:tn,serverPrefetch:tn,components:nn,directives:nn,watch:function(e,t){if(!e)return t;if(!t)return e;const n=v(Object.create(null),e);for(const o in t)n[o]=tn(e[o],t[o]);return n},provide:Yt,inject:function(e,t){return nn(en(e),en(t))}};function Yt(e,t){return t?e?function(){return v(x(e)?e.call(this,this):e,x(t)?t.call(this,this):t)}:t:e}function en(e){if(y(e)){const t={};for(let n=0;n{a=!0;const[n,o]=ln(e,t,!0);v(l,n),o&&i.push(...o)};!n&&t.mixins.length&&t.mixins.forEach(o),e.extends&&o(e.extends),e.mixins&&e.mixins.forEach(o)}if(!r&&!a)return o.set(e,u),u;if(y(r))for(let u=0;u-1,n[1]=o<0||t-1||_(n,"default"))&&i.push(e)}}}const f=[l,i];return o.set(e,f),f}function cn(e){return"$"!==e[0]}function un(e){const t=e&&e.toString().match(/^\s*function (\w+)/);return t?t[1]:null===e?"null":""}function an(e,t){return un(e)===un(t)}function fn(e,t){return y(t)?t.findIndex((t=>an(t,e))):x(t)&&an(t,e)?0:-1}const pn=e=>"_"===e[0]||"$stable"===e,dn=e=>y(e)?e.map(qn):[qn(e)],hn=(e,t,n)=>{const o=function(e,t=yt,n){if(!t)return e;if(e._n)return e;const o=(...n)=>{o._d&&$n(-1);const s=xt(t),r=e(...n);return xt(s),o._d&&$n(1),r};return o._n=!0,o._c=!0,o._d=!0,o}(((...e)=>dn(t(...e))),n);return o._c=!1,o},vn=(e,t,n)=>{const o=e._ctx;for(const s in e){if(pn(s))continue;const n=e[s];if(x(n))t[s]=hn(0,n,o);else if(null!=n){const e=dn(n);t[s]=()=>e}}},gn=(e,t)=>{const n=dn(t);e.slots.default=()=>n};function mn(e,t,n,o){const s=e.dirs,r=t&&t.dirs;for(let l=0;l(r.has(e)||(e&&x(e.install)?(r.add(e),e.install(i,...t)):x(e)&&(r.add(e),e(i,...t))),i),mixin:e=>(s.mixins.includes(e)||s.mixins.push(e),i),component:(e,t)=>t?(s.components[e]=t,i):s.components[e],directive:(e,t)=>t?(s.directives[e]=t,i):s.directives[e],mount(r,c,u){if(!l){const a=zn(n,o);return a.appContext=s,c&&t?t(a,r):e(a,r,u),l=!0,i._container=r,r.__vue_app__=i,a.component.proxy}},unmount(){l&&(e(null,i._container),delete i._container.__vue_app__)},provide:(e,t)=>(s.provides[e]=t,i)};return i}}const xn=function(e,t){t&&t.pendingBranch?y(e)?t.effects.push(...e):t.effects.push(e):Po(e,xo,bo,wo)};function wn(e){return function(e,t){const{insert:n,remove:o,patchProp:s,createElement:r,createText:l,createComment:i,setText:f,setElementText:p,parentNode:d,nextSibling:h,setScopeId:g=a,cloneNode:m,insertStaticContent:y}=e,b=(e,t,n,o=null,s=null,r=null,l=!1,i=null,c=!!t.dynamicChildren)=>{if(e===t)return;e&&!In(e,t)&&(o=ne(e),Z(e,s,r,!0),e=null),-2===t.patchFlag&&(c=!1,t.dynamicChildren=null);const{type:u,ref:a,shapeFlag:f}=t;switch(u){case En:x(e,t,n,o);break;case Pn:w(e,t,n,o);break;case Rn:null==e&&C(t,n,o,l);break;case Fn:N(e,t,n,o,s,r,l,i,c);break;default:1&f?F(e,t,n,o,s,r,l,i,c):6&f?L(e,t,n,o,s,r,l,i,c):(64&f||128&f)&&u.process(e,t,n,o,s,r,l,i,c,ie)}null!=a&&s&&Cn(a,e&&e.ref,r,t||e,!t)},x=(e,t,o,s)=>{if(null==e)n(t.el=l(t.children),o,s);else{const n=t.el=e.el;t.children!==e.children&&f(n,t.children)}},w=(e,t,o,s)=>{null==e?n(t.el=i(t.children||""),o,s):t.el=e.el},C=(e,t,n,o)=>{[e.el,e.anchor]=y(e.children,t,n,o)},S=({el:e,anchor:t},o,s)=>{let r;for(;e&&e!==t;)r=h(e),n(e,o,s),e=r;n(t,o,s)},O=({el:e,anchor:t})=>{let n;for(;e&&e!==t;)n=h(e),o(e),e=n;o(t)},F=(e,t,n,o,s,r,l,i,c)=>{l=l||"svg"===t.type,null==e?E(t,n,o,s,r,l,i,c):T(e,t,s,r,l,i,c)},E=(e,t,o,l,i,c,u,a)=>{let f,d;const{type:h,props:v,shapeFlag:g,transition:_,patchFlag:y,dirs:b}=e;if(e.el&&void 0!==m&&-1===y)f=e.el=m(e.el);else{if(f=e.el=r(e.type,c,v&&v.is,v),8&g?p(f,e.children):16&g&&M(e.children,f,null,l,i,c&&"foreignObject"!==h,u,a),b&&mn(e,null,l,"created"),v){for(const t in v)"value"===t||P(t)||s(f,t,null,v[t],c,e.children,l,i,te);"value"in v&&s(f,"value",null,v.value),(d=v.onVnodeBeforeMount)&&Sn(d,l,e)}R(f,e,e.scopeId,u,l)}b&&mn(e,null,l,"beforeMount");const x=(!i||i&&!i.pendingBranch)&&_&&!_.persisted;x&&_.beforeEnter(f),n(f,t,o),((d=v&&v.onVnodeMounted)||x||b)&&xn((()=>{d&&Sn(d,l,e),x&&_.enter(f),b&&mn(e,null,l,"mounted")}),i)},R=(e,t,n,o,s)=>{if(n&&g(e,n),o)for(let r=0;r{for(let u=c;u{const u=t.el=e.el;let{patchFlag:a,dynamicChildren:f,dirs:d}=t;a|=16&e.patchFlag;const h=e.props||c,v=t.props||c;let g;(g=v.onVnodeBeforeUpdate)&&Sn(g,n,t,e),d&&mn(t,e,n,"beforeUpdate");const m=r&&"foreignObject"!==t.type;if(f?$(e.dynamicChildren,f,u,n,o,m,l):i||K(e,t,u,null,n,o,m,l,!1),a>0){if(16&a)V(u,t,h,v,n,o,r);else if(2&a&&h.class!==v.class&&s(u,"class",null,v.class,r),4&a&&s(u,"style",h.style,v.style,r),8&a){const l=t.dynamicProps;for(let t=0;t{g&&Sn(g,n,t,e),d&&mn(t,e,n,"updated")}),o)},$=(e,t,n,o,s,r,l)=>{for(let i=0;i{if(n!==o){for(const c in o){if(P(c))continue;const u=o[c],a=n[c];u!==a&&"value"!==c&&s(e,c,a,u,i,t.children,r,l,te)}if(n!==c)for(const c in n)P(c)||c in o||s(e,c,n[c],null,i,t.children,r,l,te);"value"in o&&s(e,"value",n.value,o.value)}},N=(e,t,o,s,r,i,c,u,a)=>{const f=t.el=e?e.el:l(""),p=t.anchor=e?e.anchor:l("");let{patchFlag:d,dynamicChildren:h,slotScopeIds:v}=t;v&&(u=u?u.concat(v):v),null==e?(n(f,o,s),n(p,o,s),M(t.children,o,p,r,i,c,u,a)):d>0&&64&d&&h&&e.dynamicChildren?($(e.dynamicChildren,h,o,r,i,c,u),(null!=t.key||r&&t===r.subTree)&&kn(e,t,!0)):K(e,t,o,p,r,i,c,u,a)},L=(e,t,n,o,s,r,l,i,c)=>{t.slotScopeIds=i,null==e?512&t.shapeFlag?s.ctx.activate(t,n,o,l,c):B(t,n,o,s,r,l,c):W(e,t,c)},B=(e,t,n,o,s,r,l)=>{const i=e.component=function(e,t,n){const o=e.type,s=(t?t.appContext:e.appContext)||Yn,r={uid:eo++,vnode:e,type:o,parent:t,appContext:s,root:null,next:null,subTree:null,update:null,scope:new D(!0),render:null,proxy:null,exposed:null,exposeProxy:null,withProxy:null,provides:t?t.provides:Object.create(s.provides),accessCache:null,renderCache:[],components:null,directives:null,propsOptions:ln(o,s),emitsOptions:mt(o,s),emit:null,emitted:null,propsDefaults:c,inheritAttrs:o.inheritAttrs,ctx:c,data:c,props:c,attrs:c,slots:c,refs:c,setupState:c,setupContext:null,suspense:n,suspenseId:n?n.pendingId:0,asyncDep:null,asyncResolved:!1,isMounted:!1,isUnmounted:!1,isDeactivated:!1,bc:null,c:null,bm:null,m:null,bu:null,u:null,um:null,bum:null,da:null,a:null,rtg:null,rtc:null,ec:null,sp:null};r.ctx={_:r},r.root=t?t.root:r,r.emit=gt.bind(null,r),e.ce&&e.ce(r);return r}(e,o,s);if(Pt(e)&&(i.ctx.renderer=ie),function(e,t=!1){ro=t;const{props:n,children:o}=e.vnode,s=so(e);on(e,n,s,t),((e,t)=>{if(32&e.vnode.shapeFlag){const n=t._;n?(e.slots=ot(t),I(t,"_",n)):vn(t,e.slots={})}else e.slots={},t&&gn(e,t);I(e.slots,Ln,1)})(e,o);const r=s?function(e,t){const n=e.type;e.accessCache=Object.create(null),e.proxy=st(new Proxy(e.ctx,Qn));const{setup:o}=n;if(o){const n=e.setupContext=o.length>1?function(e){const t=t=>{e.exposed=t||{}};let n;return{get attrs(){return n||(n=function(e){return new Proxy(e.attrs,{get:(t,n)=>(le(e,0,"$attrs"),t[n])})}(e))},slots:e.slots,emit:e.emit,expose:t}}(e):null;no(e),se();const s=uo(o,e,0,[e.props,n]);if(re(),oo(),k(s)){if(s.then(oo,oo),t)return s.then((t=>{lo(e,t)})).catch((t=>{fo(t,e,0)}));e.asyncDep=s}else lo(e,s)}else io(e)}(e,t):void 0;ro=!1}(i),i.asyncDep){if(s&&s.registerDep(i,z),!e.el){const e=i.subTree=zn(Pn);w(null,e,t,n)}}else z(i,e,t,n,s,r,l)},W=(e,t,n)=>{const o=t.component=e.component;if(function(e,t,n){const{props:o,children:s,component:r}=e,{props:l,children:i,patchFlag:c}=t,u=r.emitsOptions;if(t.dirs||t.transition)return!0;if(!(n&&c>=0))return!(!s&&!i||i&&i.$stable)||o!==l&&(o?!l||kt(o,l,u):!!l);if(1024&c)return!0;if(16&c)return o?kt(o,l,u):!!l;if(8&c){const e=t.dynamicProps;for(let t=0;tgo&&vo.splice(t,1)}(o.update),o.update()}else t.component=e.component,t.el=e.el,o.vnode=t},z=(e,t,n,o,s,r,l)=>{const i=new ee((()=>{if(e.isMounted){let t,{next:n,bu:o,u:c,parent:u,vnode:a}=e,f=n;i.allowRecurse=!1,n?(n.el=a.el,H(e,n,l)):n=a,o&&U(o),(t=n.props&&n.props.onVnodeBeforeUpdate)&&Sn(t,u,n,a),i.allowRecurse=!0;const p=wt(e),h=e.subTree;e.subTree=p,b(h,p,d(h.el),ne(h),e,s,r),n.el=p.el,null===f&&function({vnode:e,parent:t},n){for(;t&&t.subTree===e;)(e=t.vnode).el=n,t=t.parent}(e,p.el),c&&xn(c,s),(t=n.props&&n.props.onVnodeUpdated)&&xn((()=>Sn(t,u,n,a)),s)}else{let l;const{el:c,props:u}=t,{bm:a,m:f,parent:p}=e,d=Et(t);if(i.allowRecurse=!1,a&&U(a),!d&&(l=u&&u.onVnodeBeforeMount)&&Sn(l,p,t),i.allowRecurse=!0,c&&ae){const n=()=>{e.subTree=wt(e),ae(c,e.subTree,e,s,null)};d?t.type.__asyncLoader().then((()=>!e.isUnmounted&&n())):n()}else{const l=e.subTree=wt(e);b(null,l,n,o,e,s,r),t.el=l.el}if(f&&xn(f,s),!d&&(l=u&&u.onVnodeMounted)){const e=t;xn((()=>Sn(l,p,e)),s)}256&t.shapeFlag&&e.a&&xn(e.a,s),e.isMounted=!0,t=n=o=null}}),(()=>Fo(e.update)),e.scope),c=e.update=i.run.bind(i);c.id=e.uid,i.allowRecurse=c.allowRecurse=!0,c()},H=(e,t,n)=>{t.component=e;const o=e.vnode.props;e.vnode=t,e.next=null,function(e,t,n,o){const{props:s,attrs:r,vnode:{patchFlag:l}}=e,i=ot(s),[c]=e.propsOptions;let u=!1;if(!(o||l>0)||16&l){let o;sn(e,t,s,r)&&(u=!0);for(const r in i)t&&(_(t,r)||(o=A(r))!==r&&_(t,o))||(c?!n||void 0===n[r]&&void 0===n[o]||(s[r]=rn(c,i,r,void 0,e,!0)):delete s[r]);if(r!==i)for(const e in r)t&&_(t,e)||(delete r[e],u=!0)}else if(8&l){const n=e.vnode.dynamicProps;for(let o=0;o{const{vnode:o,slots:s}=e;let r=!0,l=c;if(32&o.shapeFlag){const e=t._;e?n&&1===e?r=!1:(v(s,t),n||1!==e||delete s._):(r=!t.$stable,vn(t,s)),l=t}else t&&(gn(e,t),l={default:1});if(r)for(const i in s)pn(i)||i in l||delete s[i]})(e,t.children,n),se(),Ro(void 0,e.update),re()},K=(e,t,n,o,s,r,l,i,c=!1)=>{const u=e&&e.children,a=e?e.shapeFlag:0,f=t.children,{patchFlag:d,shapeFlag:h}=t;if(d>0){if(128&d)return void G(u,f,n,o,s,r,l,i,c);if(256&d)return void q(u,f,n,o,s,r,l,i,c)}8&h?(16&a&&te(u,s,r),f!==u&&p(n,f)):16&a?16&h?G(u,f,n,o,s,r,l,i,c):te(u,s,r,!0):(8&a&&p(n,""),16&h&&M(f,n,o,s,r,l,i,c))},q=(e,t,n,o,s,r,l,i,c)=>{t=t||u;const a=(e=e||u).length,f=t.length,p=Math.min(a,f);let d;for(d=0;df?te(e,s,r,!0,!1,p):M(t,n,o,s,r,l,i,c,p)},G=(e,t,n,o,s,r,l,i,c)=>{let a=0;const f=t.length;let p=e.length-1,d=f-1;for(;a<=p&&a<=d;){const o=e[a],u=t[a]=c?Gn(t[a]):qn(t[a]);if(!In(o,u))break;b(o,u,n,null,s,r,l,i,c),a++}for(;a<=p&&a<=d;){const o=e[p],u=t[d]=c?Gn(t[d]):qn(t[d]);if(!In(o,u))break;b(o,u,n,null,s,r,l,i,c),p--,d--}if(a>p){if(a<=d){const e=d+1,u=ed)for(;a<=p;)Z(e[a],s,r,!0),a++;else{const h=a,v=a,g=new Map;for(a=v;a<=d;a++){const e=t[a]=c?Gn(t[a]):qn(t[a]);null!=e.key&&g.set(e.key,a)}let m,_=0;const y=d-v+1;let x=!1,w=0;const C=new Array(y);for(a=0;a=y){Z(o,s,r,!0);continue}let u;if(null!=o.key)u=g.get(o.key);else for(m=v;m<=d;m++)if(0===C[m-v]&&In(o,t[m])){u=m;break}void 0===u?Z(o,s,r,!0):(C[u-v]=a+1,u>=w?w=u:x=!0,b(o,t[u],n,null,s,r,l,i,c),_++)}const S=x?function(e){const t=e.slice(),n=[0];let o,s,r,l,i;const c=e.length;for(o=0;o>1,e[n[i]]0&&(t[o]=n[r-1]),n[r]=o)}}r=n.length,l=n[r-1];for(;r-- >0;)n[r]=l,l=t[l];return n}(C):u;for(m=S.length-1,a=y-1;a>=0;a--){const e=v+a,u=t[e],p=e+1{const{el:l,type:i,transition:c,children:u,shapeFlag:a}=e;if(6&a)return void X(e.component.subTree,t,o,s);if(128&a)return void e.suspense.move(t,o,s);if(64&a)return void i.move(e,t,o,ie);if(i===Fn){n(l,t,o);for(let e=0;ec.enter(l)),r);else{const{leave:e,delayLeave:s,afterLeave:r}=c,i=()=>n(l,t,o),u=()=>{e(l,(()=>{i(),r&&r()}))};s?s(l,i,u):u()}else n(l,t,o)},Z=(e,t,n,o=!1,s=!1)=>{const{type:r,props:l,ref:i,children:c,dynamicChildren:u,shapeFlag:a,patchFlag:f,dirs:p}=e;if(null!=i&&Cn(i,null,n,e,!0),256&a)return void t.ctx.deactivate(e);const d=1&a&&p,h=!Et(e);let v;if(h&&(v=l&&l.onVnodeBeforeUnmount)&&Sn(v,t,e),6&a)Y(e.component,n,o);else{if(128&a)return void e.suspense.unmount(n,o);d&&mn(e,null,t,"beforeUnmount"),64&a?e.type.remove(e,t,n,s,ie,o):u&&(r!==Fn||f>0&&64&f)?te(u,t,n,!1,!0):(r===Fn&&384&f||!s&&16&a)&&te(c,t,n),o&&J(e)}(h&&(v=l&&l.onVnodeUnmounted)||d)&&xn((()=>{v&&Sn(v,t,e),d&&mn(e,null,t,"unmounted")}),n)},J=e=>{const{type:t,el:n,anchor:s,transition:r}=e;if(t===Fn)return void Q(n,s);if(t===Rn)return void O(e);const l=()=>{o(n),r&&!r.persisted&&r.afterLeave&&r.afterLeave()};if(1&e.shapeFlag&&r&&!r.persisted){const{leave:t,delayLeave:o}=r,s=()=>t(n,l);o?o(e.el,l,s):s()}else l()},Q=(e,t)=>{let n;for(;e!==t;)n=h(e),o(e),e=n;o(t)},Y=(e,t,n)=>{const{bum:o,scope:s,update:r,subTree:l,um:i}=e;o&&U(o),s.stop(),r&&(r.active=!1,Z(l,e,t,n)),i&&xn(i,t),xn((()=>{e.isUnmounted=!0}),t),t&&t.pendingBranch&&!t.isUnmounted&&e.asyncDep&&!e.asyncResolved&&e.suspenseId===t.pendingId&&(t.deps--,0===t.deps&&t.resolve())},te=(e,t,n,o=!1,s=!1,r=0)=>{for(let l=r;l6&e.shapeFlag?ne(e.component.subTree):128&e.shapeFlag?e.suspense.next():h(e.anchor||e.el),oe=(e,t,n)=>{null==e?t._vnode&&Z(t._vnode,null,null,!0):b(t._vnode||null,e,t,null,null,null,n),Mo(),t._vnode=e},ie={p:b,um:Z,m:X,r:J,mt:B,mc:M,pc:K,pbc:$,n:ne,o:e};let ce,ae;t&&([ce,ae]=t(ie));return{render:oe,hydrate:ce,createApp:bn(oe,ce)}}(e)}function Cn(e,t,n,o,s=!1){if(y(e))return void e.forEach(((e,r)=>Cn(e,t&&(y(t)?t[r]:t),n,o,s)));if(Et(o)&&!s)return;const r=4&o.shapeFlag?co(o.component)||o.component.proxy:o.el,l=s?null:r,{i:i,r:u}=e,a=t&&t.r,f=i.refs===c?i.refs={}:i.refs,p=i.setupState;if(null!=a&&a!==u&&(w(a)?(f[a]=null,_(p,a)&&(p[a]=null)):ct(a)&&(a.value=null)),w(u)){const e=()=>{f[u]=l,_(p,u)&&(p[u]=l)};l?(e.id=-1,xn(e,n)):e()}else if(ct(u)){const e=()=>{u.value=l};l?(e.id=-1,xn(e,n)):e()}else x(u)&&uo(u,i,12,[l,f])}function Sn(e,t,n,o=null){ao(e,t,7,[n,o])}function kn(e,t,n=!1){const o=e.children,s=t.children;if(y(o)&&y(s))for(let r=0;r0?jn||u:null,Mn.pop(),jn=Mn[Mn.length-1]||null,An>0&&jn&&jn.push(e),e}function Nn(e,t,n,o,s,r){return Vn(Dn(e,t,n,o,s,r,!0))}function Un(e){return!!e&&!0===e.__v_isVNode}function In(e,t){return e.type===t.type&&e.key===t.key}const Ln="__vInternal",Bn=({key:e})=>null!=e?e:null,Wn=({ref:e})=>null!=e?w(e)||ct(e)||x(e)?{i:yt,r:e}:e:null;function Dn(e,t=null,n=null,o=0,s=null,r=(e===Fn?0:1),l=!1,i=!1){const c={__v_isVNode:!0,__v_skip:!0,type:e,props:t,key:t&&Bn(t),ref:t&&Wn(t),scopeId:bt,slotScopeIds:null,children:n,component:null,suspense:null,ssContent:null,ssFallback:null,dirs:null,transition:null,el:null,anchor:null,target:null,targetAnchor:null,staticCount:0,shapeFlag:r,patchFlag:o,dynamicProps:s,dynamicChildren:null,appContext:null};return i?(Xn(c,n),128&r&&e.normalize(c)):n&&(c.shapeFlag|=w(n)?8:16),An>0&&!l&&jn&&(c.patchFlag>0||6&r)&&32!==c.patchFlag&&jn.push(c),c}const zn=function(e,t=null,n=null,s=0,r=null,l=!1){e&&e!==On||(e=Pn);if(Un(e)){const o=Hn(e,t,!0);return n&&Xn(o,n),o}c=e,x(c)&&"__vccOpts"in c&&(e=e.__vccOpts);var c;if(t){t=function(e){return e?nt(e)||Ln in e?v({},e):e:null}(t);let{class:e,style:n}=t;e&&!w(e)&&(t.class=i(e)),S(n)&&(nt(n)&&!y(n)&&(n=v({},n)),t.style=o(n))}const u=w(e)?1:(e=>e.__isSuspense)(e)?128:(e=>e.__isTeleport)(e)?64:S(e)?4:x(e)?2:0;return Dn(e,t,n,s,r,u,l,!0)};function Hn(e,t,n=!1){const{props:s,ref:r,patchFlag:l,children:c}=e,u=t?function(...e){const t={};for(let n=0;ne?so(e)?co(e)||e.proxy:Zn(e.parent):null,Jn=v(Object.create(null),{$:e=>e,$el:e=>e.vnode.el,$data:e=>e.data,$props:e=>e.props,$attrs:e=>e.attrs,$slots:e=>e.slots,$refs:e=>e.refs,$parent:e=>Zn(e.parent),$root:e=>Zn(e.root),$emit:e=>e.emit,$options:e=>Zt(e),$forceUpdate:e=>()=>Fo(e.update),$nextTick:e=>Oo.bind(e.proxy),$watch:e=>No.bind(e)}),Qn={get({_:e},t){const{ctx:n,setupState:o,data:s,props:r,accessCache:l,type:i,appContext:u}=e;let a;if("$"!==t[0]){const i=l[t];if(void 0!==i)switch(i){case 0:return o[t];case 1:return s[t];case 3:return n[t];case 2:return r[t]}else{if(o!==c&&_(o,t))return l[t]=0,o[t];if(s!==c&&_(s,t))return l[t]=1,s[t];if((a=e.propsOptions[0])&&_(a,t))return l[t]=2,r[t];if(n!==c&&_(n,t))return l[t]=3,n[t];Kt&&(l[t]=4)}}const f=Jn[t];let p,d;return f?("$attrs"===t&&le(e,0,t),f(e)):(p=i.__cssModules)&&(p=p[t])?p:n!==c&&_(n,t)?(l[t]=3,n[t]):(d=u.config.globalProperties,_(d,t)?d[t]:void 0)},set({_:e},t,n){const{data:o,setupState:s,ctx:r}=e;if(s!==c&&_(s,t))s[t]=n;else if(o!==c&&_(o,t))o[t]=n;else if(_(e.props,t))return!1;return("$"!==t[0]||!(t.slice(1)in e))&&(r[t]=n,!0)},has({_:{data:e,setupState:t,accessCache:n,ctx:o,appContext:s,propsOptions:r}},l){let i;return void 0!==n[l]||e!==c&&_(e,l)||t!==c&&_(t,l)||(i=r[0])&&_(i,l)||_(o,l)||_(Jn,l)||_(s.config.globalProperties,l)}},Yn=_n();let eo=0;let to=null;const no=e=>{to=e,e.scope.on()},oo=()=>{to&&to.scope.off(),to=null};function so(e){return 4&e.vnode.shapeFlag}let ro=!1;function lo(e,t,n){x(t)?e.render=t:S(t)&&(e.setupState=dt(t)),io(e)}function io(e,t,n){const o=e.type;e.render||(e.render=o.render||a),no(e),se(),qt(e),re(),oo()}function co(e){if(e.exposed)return e.exposeProxy||(e.exposeProxy=new Proxy(dt(st(e.exposed)),{get:(t,n)=>n in t?t[n]:n in Jn?Jn[n](e):void 0}))}function uo(e,t,n,o){let s;try{s=o?e(...o):e()}catch(r){fo(r,t,n)}return s}function ao(e,t,n,o){if(x(e)){const s=uo(e,t,n,o);return s&&k(s)&&s.catch((e=>{fo(e,t,n)})),s}const s=[];for(let r=0;r>>1;jo(vo[o])jo(e)-jo(t))),wo=0;wonull==e.id?1/0:e.id;function To(e){ho=!1,po=!0,Ro(e),vo.sort(((e,t)=>jo(e)-jo(t)));try{for(go=0;goe.value,p=!!e._shallow):et(e)?(u=()=>e,o=!0):y(e)?(d=!0,p=e.some(et),u=()=>e.map((e=>ct(e)?e.value:et(e)?Io(e):x(e)?uo(e,i,2):void 0))):u=x(e)?t?()=>uo(e,i,2):()=>{if(!i||!i.isUnmounted)return f&&f(),ao(e,i,3,[h])}:a,t&&o){const e=u;u=()=>Io(e())}let h=e=>{f=b.onStop=()=>{uo(e,i,4)}},v=d?[]:Ao;const m=()=>{if(b.active)if(t){const e=b.run();(o||p||(d?e.some(((e,t)=>N(e,v[t]))):N(e,v)))&&(f&&f(),ao(t,i,3,[e,v===Ao?void 0:v,h]),v=e)}else b.run()};let _;m.allowRecurse=!!t,_="sync"===s?m:"post"===s?()=>xn(m,i&&i.suspense):()=>{!i||i.isMounted?function(e){Po(e,_o,mo,yo)}(m):m()};const b=new ee(u,_);return t?n?m():v=b.run():"post"===s?xn(b.run.bind(b),i&&i.suspense):b.run(),()=>{b.stop(),i&&i.scope&&g(i.scope.effects,b)}}function No(e,t,n){const o=this.proxy,s=w(e)?e.includes(".")?Uo(o,e):()=>o[e]:e.bind(o,o);let r;x(t)?r=t:(r=t.handler,n=t);const l=to;no(this);const i=Vo(s,r.bind(o),n);return l?no(l):oo(),i}function Uo(e,t){const n=t.split(".");return()=>{let t=e;for(let e=0;e{Io(e,t)}));else if((e=>"[object Object]"===F(e))(e))for(const n in e)Io(e[n],t);return e}function Lo(e,t,n){const o=arguments.length;return 2===o?S(t)&&!y(t)?Un(t)?zn(e,null,[t]):zn(e,t):zn(e,null,t):(o>3?n=Array.prototype.slice.call(arguments,2):3===o&&Un(n)&&(n=[n]),zn(e,t,n))}const Bo="3.2.11",Wo="undefined"!=typeof document?document:null,Do=new Map,zo={insert:(e,t,n)=>{t.insertBefore(e,n||null)},remove:e=>{const t=e.parentNode;t&&t.removeChild(e)},createElement:(e,t,n,o)=>{const s=t?Wo.createElementNS("http://www.w3.org/2000/svg",e):Wo.createElement(e,n?{is:n}:void 0);return"select"===e&&o&&null!=o.multiple&&s.setAttribute("multiple",o.multiple),s},createText:e=>Wo.createTextNode(e),createComment:e=>Wo.createComment(e),setText:(e,t)=>{e.nodeValue=t},setElementText:(e,t)=>{e.textContent=t},parentNode:e=>e.parentNode,nextSibling:e=>e.nextSibling,querySelector:e=>Wo.querySelector(e),setScopeId(e,t){e.setAttribute(t,"")},cloneNode(e){const t=e.cloneNode(!0);return"_value"in e&&(t._value=e._value),t},insertStaticContent(e,t,n,o){const s=n?n.previousSibling:t.lastChild;let r=Do.get(e);if(!r){const t=Wo.createElement("template");if(t.innerHTML=o?`${e}`:e,r=t.content,o){const e=r.firstChild;for(;e.firstChild;)r.appendChild(e.firstChild);r.removeChild(e)}Do.set(e,r)}return t.insertBefore(r.cloneNode(!0),n),[s?s.nextSibling:t.firstChild,n?n.previousSibling:t.lastChild]}};const Ho=/\s*!important$/;function Ko(e,t,n){if(y(n))n.forEach((n=>Ko(e,t,n)));else if(t.startsWith("--"))e.setProperty(t,n);else{const o=function(e,t){const n=Go[t];if(n)return n;let o=j(t);if("filter"!==o&&o in e)return Go[t]=o;o=$(o);for(let s=0;sdocument.createEvent("Event").timeStamp&&(Zo=()=>performance.now());const e=navigator.userAgent.match(/firefox\/(\d+)/i);Jo=!!(e&&Number(e[1])<=53)}let Qo=0;const Yo=Promise.resolve(),es=()=>{Qo=0};function ts(e,t,n,o,s=null){const r=e._vei||(e._vei={}),l=r[t];if(o&&l)l.value=o;else{const[n,i]=function(e){let t;if(ns.test(e)){let n;for(t={};n=e.match(ns);)e=e.slice(0,e.length-n[0].length),t[n[0].toLowerCase()]=!0}return[A(e.slice(2)),t]}(t);if(o){!function(e,t,n,o){e.addEventListener(t,n,o)}(e,n,r[t]=function(e,t){const n=e=>{const o=e.timeStamp||Zo();(Jo||o>=n.attached-1)&&ao(function(e,t){if(y(t)){const n=e.stopImmediatePropagation;return e.stopImmediatePropagation=()=>{n.call(e),e._stopped=!0},t.map((e=>t=>!t._stopped&&e(t)))}return t}(e,n.value),t,5,[e])};return n.value=e,n.attached=(()=>Qo||(Yo.then(es),Qo=Zo()))(),n}(o,s),i)}else l&&(!function(e,t,n,o){e.removeEventListener(t,n,o)}(e,n,l,i),r[t]=void 0)}}const ns=/(?:Once|Passive|Capture)$/;const os=/^on[a-z]/;const ss=v({patchProp:(e,o,s,r,l=!1,i,c,u,a)=>{"class"===o?function(e,t,n){const o=e._vtc;o&&(t=(t?[t,...o]:[...o]).join(" ")),null==t?e.removeAttribute("class"):n?e.setAttribute("class",t):e.className=t}(e,r,l):"style"===o?function(e,t,n){const o=e.style,s=o.display;if(n)if(w(n))t!==n&&(o.cssText=n);else{for(const e in n)Ko(o,e,n[e]);if(t&&!w(t))for(const e in t)null==n[e]&&Ko(o,e,"")}else e.removeAttribute("style");"_vod"in e&&(o.display=s)}(e,s,r):d(o)?h(o)||ts(e,o,0,r,c):("."===o[0]?(o=o.slice(1),1):"^"===o[0]?(o=o.slice(1),0):function(e,t,n,o){if(o)return"innerHTML"===t||"textContent"===t||!!(t in e&&os.test(t)&&x(n));if("spellcheck"===t||"draggable"===t)return!1;if("form"===t)return!1;if("list"===t&&"INPUT"===e.tagName)return!1;if("type"===t&&"TEXTAREA"===e.tagName)return!1;if(os.test(t)&&w(n))return!1;return t in e}(e,o,r,l))?function(e,t,o,s,r,l,i){if("innerHTML"===t||"textContent"===t)return s&&i(s,r,l),void(e[t]=null==o?"":o);if("value"===t&&"PROGRESS"!==e.tagName){e._value=o;const n=null==o?"":o;return e.value!==n&&(e.value=n),void(null==o&&e.removeAttribute(t))}if(""===o||null==o){const s=typeof e[t];if("boolean"===s)return void(e[t]=n(o));if(null==o&&"string"===s)return e[t]="",void e.removeAttribute(t);if("number"===s){try{e[t]=0}catch(c){}return void e.removeAttribute(t)}}try{e[t]=o}catch(u){}}(e,o,r,i,c,u,a):("true-value"===o?e._trueValue=r:"false-value"===o&&(e._falseValue=r),function(e,o,s,r,l){if(r&&o.startsWith("xlink:"))null==s?e.removeAttributeNS(Xo,o.slice(6,o.length)):e.setAttributeNS(Xo,o,s);else{const r=t(o);null==s||r&&!n(s)?e.removeAttribute(o):e.setAttribute(o,r?"":s)}}(e,o,r,l))}},zo);let rs;const ls=(...e)=>{const t=(rs||(rs=wn(ss))).createApp(...e),{mount:n}=t;return t.mount=e=>{const o=function(e){if(w(e)){return document.querySelector(e)}return e}(e);if(!o)return;const s=t._component;x(s)||s.render||s.template||(s.template=o.innerHTML),o.innerHTML="";const r=n(o,!1,o instanceof SVGElement);return o instanceof Element&&(o.removeAttribute("v-cloak"),o.setAttribute("data-v-app","")),r},t};export{Fn as F,Nn as a,Dn as b,vt as c,Ft as d,zn as e,Tn as f,ls as g,Lo as h,Nt as o,ut as r,ft as u}; 2 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Vue Demi with Vite 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@test-demi/monorepo", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "private": true, 6 | "workspaces": [ 7 | "packages/slideValidator", 8 | "packages/exampleV3" 9 | ], 10 | "license": "MIT", 11 | "scripts": { 12 | "dev:3": "vue-demi-switch 3 && yarn workspace exampleV3 run dev", 13 | "test:2": "vue-demi-switch 2 vue2 && jest", 14 | "test:3": "vue-demi-switch 3 && yarn workspace exampleV3 run test", 15 | "build": "rollup -c" 16 | }, 17 | "dependencies": { 18 | "vue-demi": "^0.11.4" 19 | }, 20 | "peerDependencies": { 21 | "@vue/composition-api": "^1.1.4" 22 | }, 23 | "peerDependenciesMeta": { 24 | "@vue/composition-api": { 25 | "optional": true 26 | } 27 | }, 28 | "devDependencies": { 29 | "@babel/core": "^7.15.5", 30 | "@babel/preset-env": "^7.15.6", 31 | "@types/node": "^16.9.0", 32 | "@typescript-eslint/eslint-plugin": "^4.31.0", 33 | "@typescript-eslint/parser": "^4.31.0", 34 | "babel-jest": "^27.2.0", 35 | "eslint": "^7.32.0", 36 | "eslint-plugin-vue": "^7.17.0", 37 | "jest": "^27.2.0", 38 | "rollup": "^2.56.3", 39 | "rollup-plugin-css-only": "^3.1.0", 40 | "rollup-plugin-dts": "^4.0.0", 41 | "rollup-plugin-terser": "^7.0.2", 42 | "rollup-plugin-typescript2": "^0.30.0", 43 | "typescript": "^4.4.2", 44 | "vue": "^3.2.11", 45 | "vue2": "npm:vue@2.6.14" 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /packages/exampleV3/babel.config.js: -------------------------------------------------------------------------------- 1 | // babel.config.js 2 | module.exports = { 3 | presets: [['@babel/preset-env', {targets: {node: 'current'}}]], 4 | }; -------------------------------------------------------------------------------- /packages/exampleV3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Vue Demi with Vite 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /packages/exampleV3/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "exampleV3", 3 | "version": "1.0.0", 4 | "main": "index.js", 5 | "private": true, 6 | "license": "MIT", 7 | "scripts": { 8 | "dev": "vite", 9 | "build": "vite build" 10 | }, 11 | "dependencies": { 12 | "@test-demi/slideValidator": "1.0.0", 13 | "vue": "^3.2.11" 14 | }, 15 | "devDependencies": { 16 | "@vitejs/plugin-vue": "^1.6.2", 17 | "@vue/compiler-sfc": "^3.2.11", 18 | "@vue/test-utils": "^2.0.0-rc.14", 19 | "vite": "^2.5.6", 20 | "vue-tsc": "^0.3.0" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /packages/exampleV3/src/App.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 31 | 32 | -------------------------------------------------------------------------------- /packages/exampleV3/src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import App from './App.vue' 3 | 4 | createApp(App).mount('#app') 5 | -------------------------------------------------------------------------------- /packages/exampleV3/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import vue from "@vitejs/plugin-vue"; 3 | 4 | export default defineConfig({ 5 | plugins: [vue()], 6 | base: '/test-demi/' 7 | }); 8 | -------------------------------------------------------------------------------- /packages/exampleV3/yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | "@babel/helper-validator-identifier@^7.14.9": 6 | version "7.14.9" 7 | resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.9.tgz#6654d171b2024f6d8ee151bf2509699919131d48" 8 | integrity sha512-pQYxPY0UP6IHISRitNe8bsijHex4TWZXi2HwKVsjPiltzlhse2znVcm9Ace510VT1kxIHjGJCZZQBX2gJDbo0g== 9 | 10 | "@babel/parser@^7.15.0": 11 | version "7.15.5" 12 | resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.15.5.tgz#d33a58ca69facc05b26adfe4abebfed56c1c2dac" 13 | integrity sha512-2hQstc6I7T6tQsWzlboMh3SgMRPaS4H6H7cPQsJkdzTzEGqQrpLDsE2BGASU5sBPoEQyHzeqU6C8uKbFeEk6sg== 14 | 15 | "@babel/types@^7.15.0": 16 | version "7.15.4" 17 | resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.15.4.tgz#74eeb86dbd6748d2741396557b9860e57fce0a0d" 18 | integrity sha512-0f1HJFuGmmbrKTCZtbm3cU+b/AqdEYk5toj5iQur58xkVMlS0JWaKxTBSmCXd47uiN7vbcozAupm6Mvs80GNhw== 19 | dependencies: 20 | "@babel/helper-validator-identifier" "^7.14.9" 21 | to-fast-properties "^2.0.0" 22 | 23 | "@types/estree@^0.0.48": 24 | version "0.0.48" 25 | resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.48.tgz#18dc8091b285df90db2f25aa7d906cfc394b7f74" 26 | integrity sha512-LfZwXoGUDo0C3me81HXgkBg5CTQYb6xzEl+fNmbO4JdRiSKQ8A0GD1OBBvKAIsbCUgoyAty7m99GqqMQe784ew== 27 | 28 | "@vue/compiler-core@3.2.11": 29 | version "3.2.11" 30 | resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.2.11.tgz#10af3777dba303ee7aae668029f131cb90391bee" 31 | integrity sha512-bcbsLx5XyQg8WDDEGwmpX0BfEfv82wIs9fWFelpyVhNRGMaABvUTalYINyfhVT+jOqNaD4JBhJiVKd/8TmsHWg== 32 | dependencies: 33 | "@babel/parser" "^7.15.0" 34 | "@babel/types" "^7.15.0" 35 | "@vue/shared" "3.2.11" 36 | estree-walker "^2.0.2" 37 | source-map "^0.6.1" 38 | 39 | "@vue/compiler-dom@3.2.11": 40 | version "3.2.11" 41 | resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.2.11.tgz#d066f8e1f1812b4e881593819ade0fe6d654c776" 42 | integrity sha512-DNvhUHI/1Hn0/+ZYDYGAuDGasUm+XHKC3FE4GqkNCTO/fcLaJMRg/7eT1m1lkc7jPffUwwfh1rZru5mwzOjrNw== 43 | dependencies: 44 | "@vue/compiler-core" "3.2.11" 45 | "@vue/shared" "3.2.11" 46 | 47 | "@vue/compiler-sfc@^3.2.11": 48 | version "3.2.11" 49 | resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.2.11.tgz#628fa12238760d9b9b339ac2e125a759224fadbf" 50 | integrity sha512-cUIaS8mgJrQ6yucj2AupWAwBRITK3W/a8wCOn9g5fJGtOl8h4APY8vN3lzP8HIJDyEeRF3I8SfRhL+oX97kSnw== 51 | dependencies: 52 | "@babel/parser" "^7.15.0" 53 | "@babel/types" "^7.15.0" 54 | "@types/estree" "^0.0.48" 55 | "@vue/compiler-core" "3.2.11" 56 | "@vue/compiler-dom" "3.2.11" 57 | "@vue/compiler-ssr" "3.2.11" 58 | "@vue/ref-transform" "3.2.11" 59 | "@vue/shared" "3.2.11" 60 | consolidate "^0.16.0" 61 | estree-walker "^2.0.2" 62 | hash-sum "^2.0.0" 63 | lru-cache "^5.1.1" 64 | magic-string "^0.25.7" 65 | merge-source-map "^1.1.0" 66 | postcss "^8.1.10" 67 | postcss-modules "^4.0.0" 68 | postcss-selector-parser "^6.0.4" 69 | source-map "^0.6.1" 70 | 71 | "@vue/compiler-ssr@3.2.11": 72 | version "3.2.11" 73 | resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.2.11.tgz#702cef3429651645bdbe09fe5962803b5a621abb" 74 | integrity sha512-+ptAdUlFDij+Z0VGCbRRkxQlNev5LkbZAntvkxrFjc08CTMhZmiV4Js48n2hAmuSXaKNEpmGkDGU26c/vf1+xw== 75 | dependencies: 76 | "@vue/compiler-dom" "3.2.11" 77 | "@vue/shared" "3.2.11" 78 | 79 | "@vue/ref-transform@3.2.11": 80 | version "3.2.11" 81 | resolved "https://registry.yarnpkg.com/@vue/ref-transform/-/ref-transform-3.2.11.tgz#4d282b9570d1485a73e7bf5d57cce27b4a7aa690" 82 | integrity sha512-7rX0YsfYb7+1PeKPME1tQyUQcQgt0sIXRRnPD1Vw8Zs2KIo90YLy9CrvwalcRCxGw0ScsjBEhVjJtWIT79TElg== 83 | dependencies: 84 | "@babel/parser" "^7.15.0" 85 | "@vue/compiler-core" "3.2.11" 86 | "@vue/shared" "3.2.11" 87 | estree-walker "^2.0.2" 88 | magic-string "^0.25.7" 89 | 90 | "@vue/shared@3.2.11": 91 | version "3.2.11" 92 | resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.11.tgz#01899f54949caf1ac241de397bd17069632574de" 93 | integrity sha512-ovfXAsSsCvV9JVceWjkqC/7OF5HbgLOtCWjCIosmPGG8lxbPuavhIxRH1dTx4Dg9xLgRTNLvI3pVxG4ItQZekg== 94 | 95 | big.js@^5.2.2: 96 | version "5.2.2" 97 | resolved "https://registry.yarnpkg.com/big.js/-/big.js-5.2.2.tgz#65f0af382f578bcdc742bd9c281e9cb2d7768328" 98 | integrity sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ== 99 | 100 | bluebird@^3.7.2: 101 | version "3.7.2" 102 | resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f" 103 | integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg== 104 | 105 | colorette@^1.2.2: 106 | version "1.4.0" 107 | resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.4.0.tgz#5190fbb87276259a86ad700bff2c6d6faa3fca40" 108 | integrity sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g== 109 | 110 | consolidate@^0.16.0: 111 | version "0.16.0" 112 | resolved "https://registry.yarnpkg.com/consolidate/-/consolidate-0.16.0.tgz#a11864768930f2f19431660a65906668f5fbdc16" 113 | integrity sha512-Nhl1wzCslqXYTJVDyJCu3ODohy9OfBMB5uD2BiBTzd7w+QY0lBzafkR8y8755yMYHAaMD4NuzbAw03/xzfw+eQ== 114 | dependencies: 115 | bluebird "^3.7.2" 116 | 117 | cssesc@^3.0.0: 118 | version "3.0.0" 119 | resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee" 120 | integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg== 121 | 122 | emojis-list@^3.0.0: 123 | version "3.0.0" 124 | resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78" 125 | integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q== 126 | 127 | esbuild@^0.12.17: 128 | version "0.12.25" 129 | resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.12.25.tgz#c2131cef022cf9fe94aaa5e00110b27fc976221a" 130 | integrity sha512-woie0PosbRSoN8gQytrdCzUbS2ByKgO8nD1xCZkEup3D9q92miCze4PqEI9TZDYAuwn6CruEnQpJxgTRWdooAg== 131 | 132 | estree-walker@^2.0.2: 133 | version "2.0.2" 134 | resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac" 135 | integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w== 136 | 137 | fsevents@~2.3.2: 138 | version "2.3.2" 139 | resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a" 140 | integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA== 141 | 142 | function-bind@^1.1.1: 143 | version "1.1.1" 144 | resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d" 145 | integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A== 146 | 147 | generic-names@^2.0.1: 148 | version "2.0.1" 149 | resolved "https://registry.yarnpkg.com/generic-names/-/generic-names-2.0.1.tgz#f8a378ead2ccaa7a34f0317b05554832ae41b872" 150 | integrity sha512-kPCHWa1m9wGG/OwQpeweTwM/PYiQLrUIxXbt/P4Nic3LbGjCP0YwrALHW1uNLKZ0LIMg+RF+XRlj2ekT9ZlZAQ== 151 | dependencies: 152 | loader-utils "^1.1.0" 153 | 154 | has@^1.0.3: 155 | version "1.0.3" 156 | resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796" 157 | integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw== 158 | dependencies: 159 | function-bind "^1.1.1" 160 | 161 | hash-sum@^2.0.0: 162 | version "2.0.0" 163 | resolved "https://registry.yarnpkg.com/hash-sum/-/hash-sum-2.0.0.tgz#81d01bb5de8ea4a214ad5d6ead1b523460b0b45a" 164 | integrity sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg== 165 | 166 | icss-replace-symbols@^1.1.0: 167 | version "1.1.0" 168 | resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz#06ea6f83679a7749e386cfe1fe812ae5db223ded" 169 | integrity sha1-Bupvg2ead0njhs/h/oEq5dsiPe0= 170 | 171 | icss-utils@^5.0.0: 172 | version "5.1.0" 173 | resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-5.1.0.tgz#c6be6858abd013d768e98366ae47e25d5887b1ae" 174 | integrity sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA== 175 | 176 | is-core-module@^2.2.0: 177 | version "2.6.0" 178 | resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.6.0.tgz#d7553b2526fe59b92ba3e40c8df757ec8a709e19" 179 | integrity sha512-wShG8vs60jKfPWpF2KZRaAtvt3a20OAn7+IJ6hLPECpSABLcKtFKTTI4ZtH5QcBruBHlq+WsdHWyz0BCZW7svQ== 180 | dependencies: 181 | has "^1.0.3" 182 | 183 | json5@^1.0.1: 184 | version "1.0.1" 185 | resolved "https://registry.yarnpkg.com/json5/-/json5-1.0.1.tgz#779fb0018604fa854eacbf6252180d83543e3dbe" 186 | integrity sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow== 187 | dependencies: 188 | minimist "^1.2.0" 189 | 190 | loader-utils@^1.1.0: 191 | version "1.4.0" 192 | resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613" 193 | integrity sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA== 194 | dependencies: 195 | big.js "^5.2.2" 196 | emojis-list "^3.0.0" 197 | json5 "^1.0.1" 198 | 199 | lodash.camelcase@^4.3.0: 200 | version "4.3.0" 201 | resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6" 202 | integrity sha1-soqmKIorn8ZRA1x3EfZathkDMaY= 203 | 204 | lru-cache@^5.1.1: 205 | version "5.1.1" 206 | resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-5.1.1.tgz#1da27e6710271947695daf6848e847f01d84b920" 207 | integrity sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w== 208 | dependencies: 209 | yallist "^3.0.2" 210 | 211 | magic-string@^0.25.7: 212 | version "0.25.7" 213 | resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.7.tgz#3f497d6fd34c669c6798dcb821f2ef31f5445051" 214 | integrity sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA== 215 | dependencies: 216 | sourcemap-codec "^1.4.4" 217 | 218 | merge-source-map@^1.1.0: 219 | version "1.1.0" 220 | resolved "https://registry.yarnpkg.com/merge-source-map/-/merge-source-map-1.1.0.tgz#2fdde7e6020939f70906a68f2d7ae685e4c8c646" 221 | integrity sha512-Qkcp7P2ygktpMPh2mCQZaf3jhN6D3Z/qVZHSdWvQ+2Ef5HgRAPBO57A77+ENm0CPx2+1Ce/MYKi3ymqdfuqibw== 222 | dependencies: 223 | source-map "^0.6.1" 224 | 225 | minimist@^1.2.0: 226 | version "1.2.5" 227 | resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602" 228 | integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw== 229 | 230 | nanoid@^3.1.23: 231 | version "3.1.25" 232 | resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.25.tgz#09ca32747c0e543f0e1814b7d3793477f9c8e152" 233 | integrity sha512-rdwtIXaXCLFAQbnfqDRnI6jaRHp9fTcYBjtFKE8eezcZ7LuLjhUaQGNeMXf1HmRoCH32CLz6XwX0TtxEOS/A3Q== 234 | 235 | path-parse@^1.0.6: 236 | version "1.0.7" 237 | resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735" 238 | integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw== 239 | 240 | postcss-modules-extract-imports@^3.0.0: 241 | version "3.0.0" 242 | resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz#cda1f047c0ae80c97dbe28c3e76a43b88025741d" 243 | integrity sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw== 244 | 245 | postcss-modules-local-by-default@^4.0.0: 246 | version "4.0.0" 247 | resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.0.tgz#ebbb54fae1598eecfdf691a02b3ff3b390a5a51c" 248 | integrity sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ== 249 | dependencies: 250 | icss-utils "^5.0.0" 251 | postcss-selector-parser "^6.0.2" 252 | postcss-value-parser "^4.1.0" 253 | 254 | postcss-modules-scope@^3.0.0: 255 | version "3.0.0" 256 | resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz#9ef3151456d3bbfa120ca44898dfca6f2fa01f06" 257 | integrity sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg== 258 | dependencies: 259 | postcss-selector-parser "^6.0.4" 260 | 261 | postcss-modules-values@^4.0.0: 262 | version "4.0.0" 263 | resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz#d7c5e7e68c3bb3c9b27cbf48ca0bb3ffb4602c9c" 264 | integrity sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ== 265 | dependencies: 266 | icss-utils "^5.0.0" 267 | 268 | postcss-modules@^4.0.0: 269 | version "4.2.2" 270 | resolved "https://registry.yarnpkg.com/postcss-modules/-/postcss-modules-4.2.2.tgz#5e7777c5a8964ea176919d90b2e54ef891321ce5" 271 | integrity sha512-/H08MGEmaalv/OU8j6bUKi/kZr2kqGF6huAW8m9UAgOLWtpFdhA14+gPBoymtqyv+D4MLsmqaF2zvIegdCxJXg== 272 | dependencies: 273 | generic-names "^2.0.1" 274 | icss-replace-symbols "^1.1.0" 275 | lodash.camelcase "^4.3.0" 276 | postcss-modules-extract-imports "^3.0.0" 277 | postcss-modules-local-by-default "^4.0.0" 278 | postcss-modules-scope "^3.0.0" 279 | postcss-modules-values "^4.0.0" 280 | string-hash "^1.1.1" 281 | 282 | postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4: 283 | version "6.0.6" 284 | resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.6.tgz#2c5bba8174ac2f6981ab631a42ab0ee54af332ea" 285 | integrity sha512-9LXrvaaX3+mcv5xkg5kFwqSzSH1JIObIx51PrndZwlmznwXRfxMddDvo9gve3gVR8ZTKgoFDdWkbRFmEhT4PMg== 286 | dependencies: 287 | cssesc "^3.0.0" 288 | util-deprecate "^1.0.2" 289 | 290 | postcss-value-parser@^4.1.0: 291 | version "4.1.0" 292 | resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb" 293 | integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ== 294 | 295 | postcss@^8.1.10, postcss@^8.3.6: 296 | version "8.3.6" 297 | resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.3.6.tgz#2730dd76a97969f37f53b9a6096197be311cc4ea" 298 | integrity sha512-wG1cc/JhRgdqB6WHEuyLTedf3KIRuD0hG6ldkFEZNCjRxiC+3i6kkWUUbiJQayP28iwG35cEmAbe98585BYV0A== 299 | dependencies: 300 | colorette "^1.2.2" 301 | nanoid "^3.1.23" 302 | source-map-js "^0.6.2" 303 | 304 | resolve@^1.20.0: 305 | version "1.20.0" 306 | resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975" 307 | integrity sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A== 308 | dependencies: 309 | is-core-module "^2.2.0" 310 | path-parse "^1.0.6" 311 | 312 | rollup@^2.38.5: 313 | version "2.56.3" 314 | resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.56.3.tgz#b63edadd9851b0d618a6d0e6af8201955a77aeff" 315 | integrity sha512-Au92NuznFklgQCUcV96iXlxUbHuB1vQMaH76DHl5M11TotjOHwqk9CwcrT78+Tnv4FN9uTBxq6p4EJoYkpyekg== 316 | optionalDependencies: 317 | fsevents "~2.3.2" 318 | 319 | source-map-js@^0.6.2: 320 | version "0.6.2" 321 | resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-0.6.2.tgz#0bb5de631b41cfbda6cfba8bd05a80efdfd2385e" 322 | integrity sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug== 323 | 324 | source-map@^0.6.1: 325 | version "0.6.1" 326 | resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263" 327 | integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g== 328 | 329 | sourcemap-codec@^1.4.4: 330 | version "1.4.8" 331 | resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4" 332 | integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA== 333 | 334 | string-hash@^1.1.1: 335 | version "1.1.3" 336 | resolved "https://registry.yarnpkg.com/string-hash/-/string-hash-1.1.3.tgz#e8aafc0ac1855b4666929ed7dd1275df5d6c811b" 337 | integrity sha1-6Kr8CsGFW0Zmkp7X3RJ1311sgRs= 338 | 339 | to-fast-properties@^2.0.0: 340 | version "2.0.0" 341 | resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e" 342 | integrity sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4= 343 | 344 | util-deprecate@^1.0.2: 345 | version "1.0.2" 346 | resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf" 347 | integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8= 348 | 349 | vite@^2.5.6: 350 | version "2.5.6" 351 | resolved "https://registry.yarnpkg.com/vite/-/vite-2.5.6.tgz#51431bb5b99b041289595300ba15947bad0f89aa" 352 | integrity sha512-P++qzXuOPhTql8iDamsatlJfD7/yGi8NCNwzyqkB2p0jrNJC567WEdXiKn3hQ+ZV8amQmB2dTH6svo3Z2tJ6MQ== 353 | dependencies: 354 | esbuild "^0.12.17" 355 | postcss "^8.3.6" 356 | resolve "^1.20.0" 357 | rollup "^2.38.5" 358 | optionalDependencies: 359 | fsevents "~2.3.2" 360 | 361 | yallist@^3.0.2: 362 | version "3.1.1" 363 | resolved "https://registry.yarnpkg.com/yallist/-/yallist-3.1.1.tgz#dbb7daf9bfd8bac9ab45ebf602b8cbad0d5d08fd" 364 | integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g== 365 | -------------------------------------------------------------------------------- /packages/slideValidator/component.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/no-non-null-assertion */ 2 | import { defineComponent, PropType, h, ref, onMounted, Ref, install } from 'vue-demi'; 3 | import * as CSS from 'csstype' 4 | import { useLengthUnit, useValidateIsColor } from './utils/index' 5 | 6 | interface CSSProperties extends CSS.Properties { 7 | /** 8 | * The index signature was removed to enable closed typing for style 9 | * using CSSType. You're able to use type assertion or module augmentation 10 | * to add properties or an index signature of your own. 11 | * 12 | * For examples and more information, visit: 13 | * https://github.com/frenic/csstype#what-should-i-do-when-i-get-type-errors 14 | */ 15 | } 16 | 17 | type StyleValue = CSSProperties | Array 18 | 19 | install(); 20 | 21 | export default defineComponent({ 22 | name: 'SlideValidator', 23 | props: { 24 | /** 25 | * 背景颜色 26 | */ 27 | backgroundColor: { 28 | type: String, 29 | validator: (val: string) => useValidateIsColor(val), 30 | default: '#abcdef' 31 | }, 32 | /** 33 | * 成功的背景颜色 34 | */ 35 | successBgColor: { 36 | type: String, 37 | validator: (val: string) => useValidateIsColor(val), 38 | default: '#abcdef' 39 | }, 40 | /** 41 | * 宽度 42 | */ 43 | width: { 44 | type: String || Number, 45 | default: '100%' 46 | }, 47 | /** 48 | * 高度 49 | */ 50 | height: { 51 | type: String || Number, 52 | default: '50px' 53 | }, 54 | /** 55 | * 滑块内部描述文字 56 | */ 57 | innerText: { 58 | type: String, 59 | default: '向右拖动滑块验证' 60 | }, 61 | /** 62 | * 验证成功的文本 63 | */ 64 | sliderSuccessInnerText: { 65 | type: String, 66 | default: '验证成功！' 67 | }, 68 | /** 69 | * 滑块内部文字样式 70 | */ 71 | innerTextStyle: { 72 | type: Object as PropType, 73 | default: () => ({}) 74 | }, 75 | /** 76 | * 滑块样式 77 | */ 78 | sliderStyle: { 79 | type: Object as PropType, 80 | default: () => ({}) 81 | }, 82 | /** 83 | * 滑块成功的样式 84 | */ 85 | sliderSuccessStyle: { 86 | type: Object as PropType, 87 | default: () => ({}) 88 | }, 89 | }, 90 | expose: ['slideValidatorStatus'], 91 | setup(props: { width: { toString: () => string; }; height: { toString: () => string; }; sliderStyle: StyleValue; sliderSuccessInnerText: any; sliderSuccessStyle: any; }) { 92 | 93 | /** 94 | * 容器宽度 95 | */ 96 | const containerWidth = useLengthUnit(props.width.toString()); 97 | /** 98 | * 容器高度 99 | */ 100 | const containerHeight = useLengthUnit(props.height.toString()); 101 | /** 102 | * 合并滑块的样式 103 | */ 104 | const mergeSliderStyle: StyleValue = { width: containerHeight.value, height: containerHeight.value, ...props.sliderStyle }; 105 | 106 | /** 107 | * 滑块dom 108 | */ 109 | const sliderRef: Ref = ref(null); 110 | /** 111 | * 容器dom 112 | */ 113 | const sliderContainerRef: Ref = ref(null); 114 | /** 115 | * 滑块内部dom 116 | */ 117 | const sliderInnerTextRef: Ref = ref(null); 118 | /** 119 | * 成功遮罩dom 120 | */ 121 | const sliderSuccessBgRef: Ref = ref(null); 122 | /** 123 | * 当前鼠标点击状态 124 | */ 125 | const mouseClickState = ref(false); 126 | /** 127 | * 是否成功 128 | */ 129 | const confirmSuccess = ref(false); 130 | /** 131 | * 滑块距离左侧的距离 132 | */ 133 | const sliderStartXPosition = ref(0); 134 | /** 135 | * 移动距离 136 | */ 137 | const sliderDistance = ref(0); 138 | 139 | onMounted(() => { 140 | sliderContainerRef.value = document.getElementsByClassName('vue-login_slide-container')[0] as HTMLDivElement; 141 | sliderRef.value = document.getElementsByClassName('vue-login_slider-container')[0] as HTMLDivElement; 142 | sliderRef.value.addEventListener('mousedown', sliderMouseDown); 143 | sliderRef.value.addEventListener('mouseup', mouseUpFn); 144 | sliderInnerTextRef.value = document.getElementsByClassName('vue-login_inner-container')[0] as HTMLDivElement; 145 | sliderSuccessBgRef.value = document.getElementsByClassName('vue-login_slider-success-bg')[0] as HTMLDivElement; 146 | }) 147 | 148 | /** 149 | * 鼠标点击下来 150 | */ 151 | const sliderMouseDown = (e: MouseEvent) => { 152 | if (!confirmSuccess.value) { 153 | e.preventDefault && e.preventDefault(); //阻止文字选中等 浏览器默认事件 154 | mouseClickState.value = true; 155 | sliderStartXPosition.value = e.clientX; 156 | // 绑定事件 157 | document.addEventListener('mousemove', mouseMoveFn); 158 | } 159 | } 160 | 161 | /** 162 | * 163 | * 鼠标抬起 164 | */ 165 | const mouseUpFn = (e: MouseEvent) => { 166 | if (!confirmSuccess.value) { 167 | e.preventDefault && e.preventDefault(); //阻止文字选中等 浏览器默认事件 168 | mouseClickState.value = false; 169 | sliderStartXPosition.value = 0; 170 | sliderRef.value!.style.left = 0 + 'px'; 171 | sliderSuccessBgRef.value!.style.width = 0 + 'px'; 172 | // 解除事件 173 | document.removeEventListener('mousemove', mouseMoveFn); 174 | } 175 | } 176 | 177 | /** 178 | * 成功函数 179 | * 180 | */ 181 | const successFunction = () => { 182 | confirmSuccess.value = true; 183 | sliderInnerTextRef.value!.innerText = props.sliderSuccessInnerText; 184 | const resWidth = parseInt(sliderContainerRef.value!.style.width) - parseInt(sliderRef.value!.style.width) + 'px'; 185 | 186 | sliderRef.value!.style.left = resWidth; 187 | sliderSuccessBgRef.value!.style.width = resWidth; 188 | // 赋值成功的样式 189 | if (props.sliderSuccessStyle) { 190 | for (const p in props.sliderSuccessStyle) { 191 | if (Object.prototype.hasOwnProperty.call(props.sliderSuccessStyle, p)) { 192 | // eslint-disable-next-line @typescript-eslint/no-explicit-any 193 | sliderRef.value!.style[p as any] = (props.sliderSuccessStyle as any)[p] 194 | } 195 | } 196 | } 197 | // 解除事件 198 | document.removeEventListener('mousemove', mouseMoveFn); 199 | } 200 | /** 201 | * 鼠标移动事件 202 | */ 203 | const mouseMoveFn = (e: MouseEvent) => { 204 | if (mouseClickState.value) { 205 | sliderDistance.value = e.clientX - sliderStartXPosition.value; 206 | const maxSliderWidth = parseInt(sliderContainerRef.value!.style.width) - parseInt(sliderRef.value!.style.width) 207 | if (sliderDistance.value > 0 && sliderDistance.value <= maxSliderWidth) { 208 | sliderRef.value!.style.left = sliderDistance.value + 'px'; 209 | sliderSuccessBgRef.value!.style.width = sliderDistance.value + 'px'; 210 | } else if (sliderDistance.value > maxSliderWidth) { 211 | successFunction(); 212 | } 213 | } 214 | } 215 | return { 216 | slideValidatorStatus: confirmSuccess, 217 | containerWidth, 218 | containerHeight, 219 | mergeSliderStyle 220 | } 221 | }, 222 | render() { 223 | return h('div', { class: 'vue-login_slide-container', style: { width: this.containerWidth, height: this.containerHeight, backgroundColor: this.backgroundColor } }, [ 224 | h('div', { class: 'vue-login_slider-success-bg', style: { backgroundColor: this.successBgColor } }), 225 | h('div', { class: 'vue-login_slider-container', style: (this.mergeSliderStyle as CSSProperties) }), 226 | h('div', { class: 'vue-login_inner-container', style: this.innerTextStyle as CSSProperties }, this.innerText as string), 227 | ]) 228 | } 229 | 230 | }) 231 | 232 | 233 | 234 | 235 | 236 | 237 | -------------------------------------------------------------------------------- /packages/slideValidator/dist/index.cjs.js: -------------------------------------------------------------------------------- 1 | "use strict";var e=require("vue-demi"),t=function(){return(t=Object.assign||function(e){for(var t,n=1,l=arguments.length;n0&&y.value<=t?(s.value.style.left=y.value+"px",c.value.style.width=y.value+"px"):y.value>t&&function(){v.value=!0,o.value.innerText=l.sliderSuccessInnerText;var e=parseInt(a.value.style.width)-parseInt(s.value.style.width)+"px";if(s.value.style.left=e,c.value.style.width=e,l.sliderSuccessStyle)for(var t in l.sliderSuccessStyle)Object.prototype.hasOwnProperty.call(l.sliderSuccessStyle,t)&&(s.value.style[t]=l.sliderSuccessStyle[t]);document.removeEventListener("mousemove",h)}()}};return{slideValidatorStatus:v,containerWidth:r,containerHeight:u,mergeSliderStyle:i}},render:function(){return e.h("div",{class:"vue-login_slide-container",style:{width:this.containerWidth,height:this.containerHeight,backgroundColor:this.backgroundColor}},[e.h("div",{class:"vue-login_slider-success-bg",style:{backgroundColor:this.successBgColor}}),e.h("div",{class:"vue-login_slider-container",style:this.mergeSliderStyle}),e.h("div",{class:"vue-login_inner-container",style:this.innerTextStyle},this.innerText)])}});module.exports=r;//# sourceMappingURL=index.cjs.js.map 16 | -------------------------------------------------------------------------------- /packages/slideValidator/dist/index.cjs.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"index.cjs.js","sources":["../utils/index.ts","../component.ts"],"sourcesContent":["import { computed, ComputedRef } from 'vue-demi'\r\n\r\n/**\r\n * 判断传入参数是否是一个标准的长度单位， 'px', 'vw', 'px', 'vh', '%' 结尾\r\n * @param lengthStr 传入的长度\r\n * @param extraUnit 额外需要添加的单位\r\n * @returns 返回一个正常的度量单位\r\n */\r\n\r\nexport function useLengthUnit(lengthStr: string, extraUnit = 'px'):ComputedRef {\r\n return computed(() => {\r\n // 判断数字或者小数，默认加上px\r\n if (/^[1-9][0-9]*([.][0-9]{1,})?$/.test(lengthStr.toString())) {\r\n return lengthStr + extraUnit;\r\n } else {\r\n // 判断是否以常用的css单位结尾\r\n const cssArr: string[] = ['px', 'vw', 'px', 'vh', '%'];\r\n return cssArr.some(ca => lengthStr.toString().endsWith(ca)) ? lengthStr : parseInt(lengthStr.toString()) + extraUnit\r\n }\r\n })\r\n}\r\n\r\n\r\n/**\r\n * 验证是否是颜色\r\n * @param val \r\n * @returns \r\n */\r\nexport function useValidateIsColor(val: string):boolean {\r\n return /#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/.test(val);\r\n}\r\n\r\n/**\r\n * 获取随机数\r\n * @returns \r\n */\r\nexport function useGetUuid():string {\r\n return Date.now() + '-' + Math.random().toString(16).slice(2, 7) + '-' + Math.random().toString(16).slice(2, 7)\r\n}","/* eslint-disable @typescript-eslint/no-non-null-assertion */\r\nimport { defineComponent, PropType, h, ref, onMounted, Ref, install } from 'vue-demi';\r\nimport * as CSS from 'csstype'\r\nimport { useLengthUnit, useValidateIsColor } from './utils/index'\r\n\r\ninterface CSSProperties extends CSS.Properties {\r\n /**\r\n * The index signature was removed to enable closed typing for style\r\n * using CSSType. You're able to use type assertion or module augmentation\r\n * to add properties or an index signature of your own.\r\n *\r\n * For examples and more information, visit:\r\n * https://github.com/frenic/csstype#what-should-i-do-when-i-get-type-errors\r\n */\r\n}\r\n\r\ntype StyleValue = CSSProperties | Array\r\n\r\ninstall();\r\n\r\nexport default defineComponent({\r\n name: 'SlideValidator',\r\n props: {\r\n /**\r\n * 背景颜色\r\n */\r\n backgroundColor: {\r\n type: String,\r\n validator: (val: string) => useValidateIsColor(val),\r\n default: '#abcdef'\r\n },\r\n /**\r\n * 成功的背景颜色\r\n */\r\n successBgColor: {\r\n type: String,\r\n validator: (val: string) => useValidateIsColor(val),\r\n default: '#abcdef'\r\n },\r\n /**\r\n * 宽度\r\n */\r\n width: {\r\n type: String || Number,\r\n default: '100%'\r\n },\r\n /**\r\n * 高度\r\n */\r\n height: {\r\n type: String || Number,\r\n default: '50px'\r\n },\r\n /**\r\n * 滑块内部描述文字\r\n */\r\n innerText: {\r\n type: String,\r\n default: '向右拖动滑块验证'\r\n },\r\n /**\r\n * 验证成功的文本\r\n */\r\n sliderSuccessInnerText: {\r\n type: String,\r\n default: '验证成功！'\r\n },\r\n /**\r\n * 滑块内部文字样式\r\n */\r\n innerTextStyle: {\r\n type: Object as PropType,\r\n default: () => ({})\r\n },\r\n /**\r\n * 滑块样式\r\n */\r\n sliderStyle: {\r\n type: Object as PropType,\r\n default: () => ({})\r\n },\r\n /**\r\n * 滑块成功的样式\r\n */\r\n sliderSuccessStyle: {\r\n type: Object as PropType,\r\n default: () => ({})\r\n },\r\n },\r\n expose: ['slideValidatorStatus'],\r\n setup(props) {\r\n\r\n /**\r\n * 容器宽度\r\n */\r\n const containerWidth = useLengthUnit(props.width.toString());\r\n /**\r\n * 容器高度\r\n */\r\n const containerHeight = useLengthUnit(props.height.toString());\r\n /**\r\n * 合并滑块的样式\r\n */\r\n const mergeSliderStyle: StyleValue = { width: containerHeight.value, height: containerHeight.value, ...props.sliderStyle };\r\n\r\n /**\r\n * 滑块dom\r\n */\r\n const sliderRef: Ref = ref(null);\r\n /**\r\n * 容器dom\r\n */\r\n const sliderContainerRef: Ref = ref(null);\r\n /**\r\n * 滑块内部dom\r\n */\r\n const sliderInnerTextRef: Ref = ref(null);\r\n /**\r\n * 成功遮罩dom\r\n */\r\n const sliderSuccessBgRef: Ref = ref(null);\r\n /**\r\n * 当前鼠标点击状态\r\n */\r\n const mouseClickState = ref(false);\r\n /**\r\n * 是否成功\r\n */\r\n const confirmSuccess = ref(false);\r\n /**\r\n * 滑块距离左侧的距离\r\n */\r\n const sliderStartXPosition = ref(0);\r\n /**\r\n * 移动距离\r\n */\r\n const sliderDistance = ref(0);\r\n\r\n onMounted(() => {\r\n sliderContainerRef.value = document.getElementsByClassName('vue-login_slide-container')[0] as HTMLDivElement;\r\n sliderRef.value = document.getElementsByClassName('vue-login_slider-container')[0] as HTMLDivElement;\r\n sliderRef.value.addEventListener('mousedown', sliderMouseDown);\r\n sliderRef.value.addEventListener('mouseup', mouseUpFn);\r\n sliderInnerTextRef.value = document.getElementsByClassName('vue-login_inner-container')[0] as HTMLDivElement;\r\n sliderSuccessBgRef.value = document.getElementsByClassName('vue-login_slider-success-bg')[0] as HTMLDivElement;\r\n })\r\n\r\n /**\r\n * 鼠标点击下来\r\n */\r\n const sliderMouseDown = (e: MouseEvent) => {\r\n if (!confirmSuccess.value) {\r\n e.preventDefault && e.preventDefault(); //阻止文字选中等 浏览器默认事件\r\n mouseClickState.value = true;\r\n sliderStartXPosition.value = e.clientX;\r\n // 绑定事件\r\n document.addEventListener('mousemove', mouseMoveFn);\r\n }\r\n }\r\n\r\n /**\r\n * \r\n * 鼠标抬起\r\n */\r\n const mouseUpFn = (e: MouseEvent) => {\r\n if (!confirmSuccess.value) {\r\n e.preventDefault && e.preventDefault(); //阻止文字选中等 浏览器默认事件\r\n mouseClickState.value = false;\r\n sliderStartXPosition.value = 0;\r\n sliderRef.value!.style.left = 0 + 'px';\r\n sliderSuccessBgRef.value!.style.width = 0 + 'px';\r\n // 解除事件\r\n document.removeEventListener('mousemove', mouseMoveFn);\r\n }\r\n }\r\n\r\n /**\r\n * 成功函数\r\n * \r\n */\r\n const successFunction = () => {\r\n confirmSuccess.value = true;\r\n sliderInnerTextRef.value!.innerText = props.sliderSuccessInnerText;\r\n const resWidth = parseInt(sliderContainerRef.value!.style.width) - parseInt(sliderRef.value!.style.width) + 'px';\r\n\r\n sliderRef.value!.style.left = resWidth;\r\n sliderSuccessBgRef.value!.style.width = resWidth;\r\n // 赋值成功的样式\r\n if (props.sliderSuccessStyle) {\r\n for (const p in props.sliderSuccessStyle) {\r\n if (Object.prototype.hasOwnProperty.call(props.sliderSuccessStyle, p)) {\r\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n sliderRef.value!.style[p as any] = (props.sliderSuccessStyle as any)[p]\r\n }\r\n }\r\n }\r\n // 解除事件\r\n document.removeEventListener('mousemove', mouseMoveFn);\r\n }\r\n /**\r\n * 鼠标移动事件\r\n */\r\n const mouseMoveFn = (e: MouseEvent) => {\r\n if (mouseClickState.value) {\r\n sliderDistance.value = e.clientX - sliderStartXPosition.value;\r\n const maxSliderWidth = parseInt(sliderContainerRef.value!.style.width) - parseInt(sliderRef.value!.style.width)\r\n if (sliderDistance.value > 0 && sliderDistance.value <= maxSliderWidth) {\r\n sliderRef.value!.style.left = sliderDistance.value + 'px';\r\n sliderSuccessBgRef.value!.style.width = sliderDistance.value + 'px';\r\n } else if (sliderDistance.value > maxSliderWidth) {\r\n successFunction();\r\n }\r\n }\r\n }\r\n return {\r\n slideValidatorStatus: confirmSuccess,\r\n containerWidth,\r\n containerHeight,\r\n mergeSliderStyle\r\n }\r\n },\r\n render() {\r\n return h('div', { class: 'vue-login_slide-container', style: { width: this.containerWidth, height: this.containerHeight, backgroundColor: this.backgroundColor } }, [\r\n h('div', { class: 'vue-login_slider-success-bg', style: { backgroundColor: this.successBgColor } }),\r\n h('div', { class: 'vue-login_slider-container', style: (this.mergeSliderStyle as CSSProperties) }),\r\n h('div', { class: 'vue-login_inner-container', style: this.innerTextStyle as CSSProperties }, this.innerText as string),\r\n ])\r\n }\r\n\r\n})\r\n\r\n\r\n\r\n\r\n\r\n\r\n"],"names":["useLengthUnit","lengthStr","extraUnit","computed","test","toString","some","ca","endsWith","parseInt","useValidateIsColor","val","install","defineComponent","name","props","backgroundColor","type","String","validator","default","successBgColor","width","Number","height","innerText","sliderSuccessInnerText","innerTextStyle","Object","sliderStyle","sliderSuccessStyle","expose","setup","containerWidth","containerHeight","mergeSliderStyle","value","sliderRef","ref","sliderContainerRef","sliderInnerTextRef","sliderSuccessBgRef","mouseClickState","confirmSuccess","sliderStartXPosition","sliderDistance","onMounted","document","getElementsByClassName","addEventListener","sliderMouseDown","mouseUpFn","e","preventDefault","clientX","mouseMoveFn","style","left","removeEventListener","maxSliderWidth","resWidth","p","prototype","hasOwnProperty","call","successFunction","slideValidatorStatus","render","h","class","this"],"mappings":"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"} -------------------------------------------------------------------------------- /packages/slideValidator/dist/index.css: -------------------------------------------------------------------------------- 1 | .vue-login_slide-container { 2 | position: relative; 3 | border-radius: 4px; 4 | } 5 | 6 | .vue-login_slider-container { 7 | position: absolute; 8 | top: 0px; 9 | left: 0px; 10 | border-radius: 4px; 11 | cursor: move; 12 | z-index: 10; 13 | background-color: aliceblue; 14 | border: 1px solid #f3efef; 15 | box-sizing: border-box; 16 | } 17 | 18 | .vue-login_slider-success-bg{ 19 | position: absolute; 20 | left: 0; 21 | top: 0; 22 | bottom: 0; 23 | border-radius: 4px; 24 | box-sizing: border-box; 25 | } 26 | 27 | .vue-login_inner-container { 28 | position: absolute; 29 | left: 0; 30 | top: 0; 31 | right: 0; 32 | bottom: 0; 33 | user-select: none; 34 | display: flex; 35 | align-items: center; 36 | justify-content: center; 37 | } -------------------------------------------------------------------------------- /packages/slideValidator/dist/index.d.ts: -------------------------------------------------------------------------------- 1 | import * as _vue_composition_api from '@vue/composition-api'; 2 | import * as vue from 'vue'; 3 | import { PropType } from 'vue-demi'; 4 | import * as CSS from 'csstype'; 5 | 6 | interface CSSProperties extends CSS.Properties { 7 | } 8 | declare type StyleValue = CSSProperties | Array; 9 | declare const _default: vue.ComponentOptions & _vue_composition_api.Data, {}, {}, { 10 | backgroundColor: { 11 | type: StringConstructor; 12 | validator: (val: string) => boolean; 13 | default: string; 14 | }; 15 | successBgColor: { 16 | type: StringConstructor; 17 | validator: (val: string) => boolean; 18 | default: string; 19 | }; 20 | width: { 21 | type: StringConstructor; 22 | default: string; 23 | }; 24 | height: { 25 | type: StringConstructor; 26 | default: string; 27 | }; 28 | innerText: { 29 | type: StringConstructor; 30 | default: string; 31 | }; 32 | sliderSuccessInnerText: { 33 | type: StringConstructor; 34 | default: string; 35 | }; 36 | innerTextStyle: { 37 | type: PropType; 38 | default: () => {}; 39 | }; 40 | sliderStyle: { 41 | type: PropType; 42 | default: () => {}; 43 | }; 44 | sliderSuccessStyle: { 45 | type: PropType; 46 | default: () => {}; 47 | }; 48 | }, { 49 | backgroundColor: string; 50 | successBgColor: string; 51 | width: string; 52 | height: string; 53 | innerText: string; 54 | sliderSuccessInnerText: string; 55 | innerTextStyle: StyleValue; 56 | sliderStyle: StyleValue; 57 | sliderSuccessStyle: StyleValue; 58 | } & {}> & vue.VueConstructor & (new (...args: any[]) => _vue_composition_api.ComponentRenderProxy<{ 59 | backgroundColor: string; 60 | successBgColor: string; 61 | width: string; 62 | height: string; 63 | innerText: string; 64 | sliderSuccessInnerText: string; 65 | innerTextStyle: StyleValue; 66 | sliderStyle: StyleValue; 67 | sliderSuccessStyle: StyleValue; 68 | } & {}, _vue_composition_api.ShallowUnwrapRef<_vue_composition_api.Data>, _vue_composition_api.Data, {}, {}, { 69 | backgroundColor: string; 70 | successBgColor: string; 71 | width: string; 72 | height: string; 73 | innerText: string; 74 | sliderSuccessInnerText: string; 75 | innerTextStyle: StyleValue; 76 | sliderStyle: StyleValue; 77 | sliderSuccessStyle: StyleValue; 78 | } & {}, { 79 | backgroundColor: string; 80 | successBgColor: string; 81 | width: string; 82 | height: string; 83 | innerText: string; 84 | sliderSuccessInnerText: string; 85 | innerTextStyle: StyleValue; 86 | sliderStyle: StyleValue; 87 | sliderSuccessStyle: StyleValue; 88 | }, true>); 89 | 90 | export { _default as default }; 91 | -------------------------------------------------------------------------------- /packages/slideValidator/dist/index.esm.js: -------------------------------------------------------------------------------- 1 | import{computed as e,install as t,defineComponent as n,ref as l,onMounted as r,h as i}from"vue-demi"; 2 | /*! ***************************************************************************** 3 | Copyright (c) Microsoft Corporation. 4 | 5 | Permission to use, copy, modify, and/or distribute this software for any 6 | purpose with or without fee is hereby granted. 7 | 8 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH 9 | REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY 10 | AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, 11 | INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM 12 | LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR 13 | OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR 14 | PERFORMANCE OF THIS SOFTWARE. 15 | ***************************************************************************** */var u=function(){return(u=Object.assign||function(e){for(var t,n=1,l=arguments.length;n0&&p.value<=n?(s.value.style.left=p.value+"px",d.value.style.width=p.value+"px"):p.value>n&&function(){f.value=!0,c.value.innerText=e.sliderSuccessInnerText;var t=parseInt(o.value.style.width)-parseInt(s.value.style.width)+"px";if(s.value.style.left=t,d.value.style.width=t,e.sliderSuccessStyle)for(var n in e.sliderSuccessStyle)Object.prototype.hasOwnProperty.call(e.sliderSuccessStyle,n)&&(s.value.style[n]=e.sliderSuccessStyle[n]);document.removeEventListener("mousemove",m)}()}};return{slideValidatorStatus:f,containerWidth:t,containerHeight:n,mergeSliderStyle:i}},render:function(){return i("div",{class:"vue-login_slide-container",style:{width:this.containerWidth,height:this.containerHeight,backgroundColor:this.backgroundColor}},[i("div",{class:"vue-login_slider-success-bg",style:{backgroundColor:this.successBgColor}}),i("div",{class:"vue-login_slider-container",style:this.mergeSliderStyle}),i("div",{class:"vue-login_inner-container",style:this.innerTextStyle},this.innerText)])}});export{o as default};//# sourceMappingURL=index.esm.js.map 16 | -------------------------------------------------------------------------------- /packages/slideValidator/dist/index.esm.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"index.esm.js","sources":["../utils/index.ts","../component.ts"],"sourcesContent":["import { computed, ComputedRef } from 'vue-demi'\r\n\r\n/**\r\n * 判断传入参数是否是一个标准的长度单位， 'px', 'vw', 'px', 'vh', '%' 结尾\r\n * @param lengthStr 传入的长度\r\n * @param extraUnit 额外需要添加的单位\r\n * @returns 返回一个正常的度量单位\r\n */\r\n\r\nexport function useLengthUnit(lengthStr: string, extraUnit = 'px'):ComputedRef {\r\n return computed(() => {\r\n // 判断数字或者小数，默认加上px\r\n if (/^[1-9][0-9]*([.][0-9]{1,})?$/.test(lengthStr.toString())) {\r\n return lengthStr + extraUnit;\r\n } else {\r\n // 判断是否以常用的css单位结尾\r\n const cssArr: string[] = ['px', 'vw', 'px', 'vh', '%'];\r\n return cssArr.some(ca => lengthStr.toString().endsWith(ca)) ? lengthStr : parseInt(lengthStr.toString()) + extraUnit\r\n }\r\n })\r\n}\r\n\r\n\r\n/**\r\n * 验证是否是颜色\r\n * @param val \r\n * @returns \r\n */\r\nexport function useValidateIsColor(val: string):boolean {\r\n return /#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/.test(val);\r\n}\r\n\r\n/**\r\n * 获取随机数\r\n * @returns \r\n */\r\nexport function useGetUuid():string {\r\n return Date.now() + '-' + Math.random().toString(16).slice(2, 7) + '-' + Math.random().toString(16).slice(2, 7)\r\n}","/* eslint-disable @typescript-eslint/no-non-null-assertion */\r\nimport { defineComponent, PropType, h, ref, onMounted, Ref, install } from 'vue-demi';\r\nimport * as CSS from 'csstype'\r\nimport { useLengthUnit, useValidateIsColor } from './utils/index'\r\n\r\ninterface CSSProperties extends CSS.Properties {\r\n /**\r\n * The index signature was removed to enable closed typing for style\r\n * using CSSType. You're able to use type assertion or module augmentation\r\n * to add properties or an index signature of your own.\r\n *\r\n * For examples and more information, visit:\r\n * https://github.com/frenic/csstype#what-should-i-do-when-i-get-type-errors\r\n */\r\n}\r\n\r\ntype StyleValue = CSSProperties | Array\r\n\r\ninstall();\r\n\r\nexport default defineComponent({\r\n name: 'SlideValidator',\r\n props: {\r\n /**\r\n * 背景颜色\r\n */\r\n backgroundColor: {\r\n type: String,\r\n validator: (val: string) => useValidateIsColor(val),\r\n default: '#abcdef'\r\n },\r\n /**\r\n * 成功的背景颜色\r\n */\r\n successBgColor: {\r\n type: String,\r\n validator: (val: string) => useValidateIsColor(val),\r\n default: '#abcdef'\r\n },\r\n /**\r\n * 宽度\r\n */\r\n width: {\r\n type: String || Number,\r\n default: '100%'\r\n },\r\n /**\r\n * 高度\r\n */\r\n height: {\r\n type: String || Number,\r\n default: '50px'\r\n },\r\n /**\r\n * 滑块内部描述文字\r\n */\r\n innerText: {\r\n type: String,\r\n default: '向右拖动滑块验证'\r\n },\r\n /**\r\n * 验证成功的文本\r\n */\r\n sliderSuccessInnerText: {\r\n type: String,\r\n default: '验证成功！'\r\n },\r\n /**\r\n * 滑块内部文字样式\r\n */\r\n innerTextStyle: {\r\n type: Object as PropType,\r\n default: () => ({})\r\n },\r\n /**\r\n * 滑块样式\r\n */\r\n sliderStyle: {\r\n type: Object as PropType,\r\n default: () => ({})\r\n },\r\n /**\r\n * 滑块成功的样式\r\n */\r\n sliderSuccessStyle: {\r\n type: Object as PropType,\r\n default: () => ({})\r\n },\r\n },\r\n expose: ['slideValidatorStatus'],\r\n setup(props) {\r\n\r\n /**\r\n * 容器宽度\r\n */\r\n const containerWidth = useLengthUnit(props.width.toString());\r\n /**\r\n * 容器高度\r\n */\r\n const containerHeight = useLengthUnit(props.height.toString());\r\n /**\r\n * 合并滑块的样式\r\n */\r\n const mergeSliderStyle: StyleValue = { width: containerHeight.value, height: containerHeight.value, ...props.sliderStyle };\r\n\r\n /**\r\n * 滑块dom\r\n */\r\n const sliderRef: Ref = ref(null);\r\n /**\r\n * 容器dom\r\n */\r\n const sliderContainerRef: Ref = ref(null);\r\n /**\r\n * 滑块内部dom\r\n */\r\n const sliderInnerTextRef: Ref = ref(null);\r\n /**\r\n * 成功遮罩dom\r\n */\r\n const sliderSuccessBgRef: Ref = ref(null);\r\n /**\r\n * 当前鼠标点击状态\r\n */\r\n const mouseClickState = ref(false);\r\n /**\r\n * 是否成功\r\n */\r\n const confirmSuccess = ref(false);\r\n /**\r\n * 滑块距离左侧的距离\r\n */\r\n const sliderStartXPosition = ref(0);\r\n /**\r\n * 移动距离\r\n */\r\n const sliderDistance = ref(0);\r\n\r\n onMounted(() => {\r\n sliderContainerRef.value = document.getElementsByClassName('vue-login_slide-container')[0] as HTMLDivElement;\r\n sliderRef.value = document.getElementsByClassName('vue-login_slider-container')[0] as HTMLDivElement;\r\n sliderRef.value.addEventListener('mousedown', sliderMouseDown);\r\n sliderRef.value.addEventListener('mouseup', mouseUpFn);\r\n sliderInnerTextRef.value = document.getElementsByClassName('vue-login_inner-container')[0] as HTMLDivElement;\r\n sliderSuccessBgRef.value = document.getElementsByClassName('vue-login_slider-success-bg')[0] as HTMLDivElement;\r\n })\r\n\r\n /**\r\n * 鼠标点击下来\r\n */\r\n const sliderMouseDown = (e: MouseEvent) => {\r\n if (!confirmSuccess.value) {\r\n e.preventDefault && e.preventDefault(); //阻止文字选中等 浏览器默认事件\r\n mouseClickState.value = true;\r\n sliderStartXPosition.value = e.clientX;\r\n // 绑定事件\r\n document.addEventListener('mousemove', mouseMoveFn);\r\n }\r\n }\r\n\r\n /**\r\n * \r\n * 鼠标抬起\r\n */\r\n const mouseUpFn = (e: MouseEvent) => {\r\n if (!confirmSuccess.value) {\r\n e.preventDefault && e.preventDefault(); //阻止文字选中等 浏览器默认事件\r\n mouseClickState.value = false;\r\n sliderStartXPosition.value = 0;\r\n sliderRef.value!.style.left = 0 + 'px';\r\n sliderSuccessBgRef.value!.style.width = 0 + 'px';\r\n // 解除事件\r\n document.removeEventListener('mousemove', mouseMoveFn);\r\n }\r\n }\r\n\r\n /**\r\n * 成功函数\r\n * \r\n */\r\n const successFunction = () => {\r\n confirmSuccess.value = true;\r\n sliderInnerTextRef.value!.innerText = props.sliderSuccessInnerText;\r\n const resWidth = parseInt(sliderContainerRef.value!.style.width) - parseInt(sliderRef.value!.style.width) + 'px';\r\n\r\n sliderRef.value!.style.left = resWidth;\r\n sliderSuccessBgRef.value!.style.width = resWidth;\r\n // 赋值成功的样式\r\n if (props.sliderSuccessStyle) {\r\n for (const p in props.sliderSuccessStyle) {\r\n if (Object.prototype.hasOwnProperty.call(props.sliderSuccessStyle, p)) {\r\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n sliderRef.value!.style[p as any] = (props.sliderSuccessStyle as any)[p]\r\n }\r\n }\r\n }\r\n // 解除事件\r\n document.removeEventListener('mousemove', mouseMoveFn);\r\n }\r\n /**\r\n * 鼠标移动事件\r\n */\r\n const mouseMoveFn = (e: MouseEvent) => {\r\n if (mouseClickState.value) {\r\n sliderDistance.value = e.clientX - sliderStartXPosition.value;\r\n const maxSliderWidth = parseInt(sliderContainerRef.value!.style.width) - parseInt(sliderRef.value!.style.width)\r\n if (sliderDistance.value > 0 && sliderDistance.value <= maxSliderWidth) {\r\n sliderRef.value!.style.left = sliderDistance.value + 'px';\r\n sliderSuccessBgRef.value!.style.width = sliderDistance.value + 'px';\r\n } else if (sliderDistance.value > maxSliderWidth) {\r\n successFunction();\r\n }\r\n }\r\n }\r\n return {\r\n slideValidatorStatus: confirmSuccess,\r\n containerWidth,\r\n containerHeight,\r\n mergeSliderStyle\r\n }\r\n },\r\n render() {\r\n return h('div', { class: 'vue-login_slide-container', style: { width: this.containerWidth, height: this.containerHeight, backgroundColor: this.backgroundColor } }, [\r\n h('div', { class: 'vue-login_slider-success-bg', style: { backgroundColor: this.successBgColor } }),\r\n h('div', { class: 'vue-login_slider-container', style: (this.mergeSliderStyle as CSSProperties) }),\r\n h('div', { class: 'vue-login_inner-container', style: this.innerTextStyle as CSSProperties }, this.innerText as string),\r\n ])\r\n }\r\n\r\n})\r\n\r\n\r\n\r\n\r\n\r\n\r\n"],"names":["useLengthUnit","lengthStr","extraUnit","computed","test","toString","some","ca","endsWith","parseInt","useValidateIsColor","val","install","defineComponent","name","props","backgroundColor","type","String","validator","default","successBgColor","width","Number","height","innerText","sliderSuccessInnerText","innerTextStyle","Object","sliderStyle","sliderSuccessStyle","expose","setup","containerWidth","containerHeight","mergeSliderStyle","value","sliderRef","ref","sliderContainerRef","sliderInnerTextRef","sliderSuccessBgRef","mouseClickState","confirmSuccess","sliderStartXPosition","sliderDistance","onMounted","document","getElementsByClassName","addEventListener","sliderMouseDown","mouseUpFn","e","preventDefault","clientX","mouseMoveFn","style","left","removeEventListener","maxSliderWidth","resWidth","p","prototype","hasOwnProperty","call","successFunction","slideValidatorStatus","render","h","class","this"],"mappings":"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"} -------------------------------------------------------------------------------- /packages/slideValidator/dist/index.global.js: -------------------------------------------------------------------------------- 1 | !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("vue-demi")):"function"==typeof define&&define.amd?define(["vue-demi"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).slideValidator=t(e.VueDemi)}(this,(function(e){"use strict"; 2 | /*! ***************************************************************************** 3 | Copyright (c) Microsoft Corporation. 4 | 5 | Permission to use, copy, modify, and/or distribute this software for any 6 | purpose with or without fee is hereby granted. 7 | 8 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH 9 | REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY 10 | AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, 11 | INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM 12 | LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR 13 | OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR 14 | PERFORMANCE OF THIS SOFTWARE. 15 | ***************************************************************************** */var t=function(){return(t=Object.assign||function(e){for(var t,n=1,l=arguments.length;n0&&p.value<=t?(s.value.style.left=p.value+"px",d.value.style.width=p.value+"px"):p.value>t&&function(){v.value=!0,o.value.innerText=l.sliderSuccessInnerText;var e=parseInt(a.value.style.width)-parseInt(s.value.style.width)+"px";if(s.value.style.left=e,d.value.style.width=e,l.sliderSuccessStyle)for(var t in l.sliderSuccessStyle)Object.prototype.hasOwnProperty.call(l.sliderSuccessStyle,t)&&(s.value.style[t]=l.sliderSuccessStyle[t]);document.removeEventListener("mousemove",h)}()}};return{slideValidatorStatus:v,containerWidth:i,containerHeight:r,mergeSliderStyle:u}},render:function(){return e.h("div",{class:"vue-login_slide-container",style:{width:this.containerWidth,height:this.containerHeight,backgroundColor:this.backgroundColor}},[e.h("div",{class:"vue-login_slider-success-bg",style:{backgroundColor:this.successBgColor}}),e.h("div",{class:"vue-login_slider-container",style:this.mergeSliderStyle}),e.h("div",{class:"vue-login_inner-container",style:this.innerTextStyle},this.innerText)])}})}));//# sourceMappingURL=index.global.js.map 16 | -------------------------------------------------------------------------------- /packages/slideValidator/dist/index.global.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"index.global.js","sources":["../utils/index.ts","../component.ts"],"sourcesContent":["import { computed, ComputedRef } from 'vue-demi'\r\n\r\n/**\r\n * 判断传入参数是否是一个标准的长度单位， 'px', 'vw', 'px', 'vh', '%' 结尾\r\n * @param lengthStr 传入的长度\r\n * @param extraUnit 额外需要添加的单位\r\n * @returns 返回一个正常的度量单位\r\n */\r\n\r\nexport function useLengthUnit(lengthStr: string, extraUnit = 'px'):ComputedRef {\r\n return computed(() => {\r\n // 判断数字或者小数，默认加上px\r\n if (/^[1-9][0-9]*([.][0-9]{1,})?$/.test(lengthStr.toString())) {\r\n return lengthStr + extraUnit;\r\n } else {\r\n // 判断是否以常用的css单位结尾\r\n const cssArr: string[] = ['px', 'vw', 'px', 'vh', '%'];\r\n return cssArr.some(ca => lengthStr.toString().endsWith(ca)) ? lengthStr : parseInt(lengthStr.toString()) + extraUnit\r\n }\r\n })\r\n}\r\n\r\n\r\n/**\r\n * 验证是否是颜色\r\n * @param val \r\n * @returns \r\n */\r\nexport function useValidateIsColor(val: string):boolean {\r\n return /#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/.test(val);\r\n}\r\n\r\n/**\r\n * 获取随机数\r\n * @returns \r\n */\r\nexport function useGetUuid():string {\r\n return Date.now() + '-' + Math.random().toString(16).slice(2, 7) + '-' + Math.random().toString(16).slice(2, 7)\r\n}","/* eslint-disable @typescript-eslint/no-non-null-assertion */\r\nimport { defineComponent, PropType, h, ref, onMounted, Ref, install } from 'vue-demi';\r\nimport * as CSS from 'csstype'\r\nimport { useLengthUnit, useValidateIsColor } from './utils/index'\r\n\r\ninterface CSSProperties extends CSS.Properties {\r\n /**\r\n * The index signature was removed to enable closed typing for style\r\n * using CSSType. You're able to use type assertion or module augmentation\r\n * to add properties or an index signature of your own.\r\n *\r\n * For examples and more information, visit:\r\n * https://github.com/frenic/csstype#what-should-i-do-when-i-get-type-errors\r\n */\r\n}\r\n\r\ntype StyleValue = CSSProperties | Array\r\n\r\ninstall();\r\n\r\nexport default defineComponent({\r\n name: 'SlideValidator',\r\n props: {\r\n /**\r\n * 背景颜色\r\n */\r\n backgroundColor: {\r\n type: String,\r\n validator: (val: string) => useValidateIsColor(val),\r\n default: '#abcdef'\r\n },\r\n /**\r\n * 成功的背景颜色\r\n */\r\n successBgColor: {\r\n type: String,\r\n validator: (val: string) => useValidateIsColor(val),\r\n default: '#abcdef'\r\n },\r\n /**\r\n * 宽度\r\n */\r\n width: {\r\n type: String || Number,\r\n default: '100%'\r\n },\r\n /**\r\n * 高度\r\n */\r\n height: {\r\n type: String || Number,\r\n default: '50px'\r\n },\r\n /**\r\n * 滑块内部描述文字\r\n */\r\n innerText: {\r\n type: String,\r\n default: '向右拖动滑块验证'\r\n },\r\n /**\r\n * 验证成功的文本\r\n */\r\n sliderSuccessInnerText: {\r\n type: String,\r\n default: '验证成功！'\r\n },\r\n /**\r\n * 滑块内部文字样式\r\n */\r\n innerTextStyle: {\r\n type: Object as PropType,\r\n default: () => ({})\r\n },\r\n /**\r\n * 滑块样式\r\n */\r\n sliderStyle: {\r\n type: Object as PropType,\r\n default: () => ({})\r\n },\r\n /**\r\n * 滑块成功的样式\r\n */\r\n sliderSuccessStyle: {\r\n type: Object as PropType,\r\n default: () => ({})\r\n },\r\n },\r\n expose: ['slideValidatorStatus'],\r\n setup(props) {\r\n\r\n /**\r\n * 容器宽度\r\n */\r\n const containerWidth = useLengthUnit(props.width.toString());\r\n /**\r\n * 容器高度\r\n */\r\n const containerHeight = useLengthUnit(props.height.toString());\r\n /**\r\n * 合并滑块的样式\r\n */\r\n const mergeSliderStyle: StyleValue = { width: containerHeight.value, height: containerHeight.value, ...props.sliderStyle };\r\n\r\n /**\r\n * 滑块dom\r\n */\r\n const sliderRef: Ref = ref(null);\r\n /**\r\n * 容器dom\r\n */\r\n const sliderContainerRef: Ref = ref(null);\r\n /**\r\n * 滑块内部dom\r\n */\r\n const sliderInnerTextRef: Ref = ref(null);\r\n /**\r\n * 成功遮罩dom\r\n */\r\n const sliderSuccessBgRef: Ref = ref(null);\r\n /**\r\n * 当前鼠标点击状态\r\n */\r\n const mouseClickState = ref(false);\r\n /**\r\n * 是否成功\r\n */\r\n const confirmSuccess = ref(false);\r\n /**\r\n * 滑块距离左侧的距离\r\n */\r\n const sliderStartXPosition = ref(0);\r\n /**\r\n * 移动距离\r\n */\r\n const sliderDistance = ref(0);\r\n\r\n onMounted(() => {\r\n sliderContainerRef.value = document.getElementsByClassName('vue-login_slide-container')[0] as HTMLDivElement;\r\n sliderRef.value = document.getElementsByClassName('vue-login_slider-container')[0] as HTMLDivElement;\r\n sliderRef.value.addEventListener('mousedown', sliderMouseDown);\r\n sliderRef.value.addEventListener('mouseup', mouseUpFn);\r\n sliderInnerTextRef.value = document.getElementsByClassName('vue-login_inner-container')[0] as HTMLDivElement;\r\n sliderSuccessBgRef.value = document.getElementsByClassName('vue-login_slider-success-bg')[0] as HTMLDivElement;\r\n })\r\n\r\n /**\r\n * 鼠标点击下来\r\n */\r\n const sliderMouseDown = (e: MouseEvent) => {\r\n if (!confirmSuccess.value) {\r\n e.preventDefault && e.preventDefault(); //阻止文字选中等 浏览器默认事件\r\n mouseClickState.value = true;\r\n sliderStartXPosition.value = e.clientX;\r\n // 绑定事件\r\n document.addEventListener('mousemove', mouseMoveFn);\r\n }\r\n }\r\n\r\n /**\r\n * \r\n * 鼠标抬起\r\n */\r\n const mouseUpFn = (e: MouseEvent) => {\r\n if (!confirmSuccess.value) {\r\n e.preventDefault && e.preventDefault(); //阻止文字选中等 浏览器默认事件\r\n mouseClickState.value = false;\r\n sliderStartXPosition.value = 0;\r\n sliderRef.value!.style.left = 0 + 'px';\r\n sliderSuccessBgRef.value!.style.width = 0 + 'px';\r\n // 解除事件\r\n document.removeEventListener('mousemove', mouseMoveFn);\r\n }\r\n }\r\n\r\n /**\r\n * 成功函数\r\n * \r\n */\r\n const successFunction = () => {\r\n confirmSuccess.value = true;\r\n sliderInnerTextRef.value!.innerText = props.sliderSuccessInnerText;\r\n const resWidth = parseInt(sliderContainerRef.value!.style.width) - parseInt(sliderRef.value!.style.width) + 'px';\r\n\r\n sliderRef.value!.style.left = resWidth;\r\n sliderSuccessBgRef.value!.style.width = resWidth;\r\n // 赋值成功的样式\r\n if (props.sliderSuccessStyle) {\r\n for (const p in props.sliderSuccessStyle) {\r\n if (Object.prototype.hasOwnProperty.call(props.sliderSuccessStyle, p)) {\r\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n sliderRef.value!.style[p as any] = (props.sliderSuccessStyle as any)[p]\r\n }\r\n }\r\n }\r\n // 解除事件\r\n document.removeEventListener('mousemove', mouseMoveFn);\r\n }\r\n /**\r\n * 鼠标移动事件\r\n */\r\n const mouseMoveFn = (e: MouseEvent) => {\r\n if (mouseClickState.value) {\r\n sliderDistance.value = e.clientX - sliderStartXPosition.value;\r\n const maxSliderWidth = parseInt(sliderContainerRef.value!.style.width) - parseInt(sliderRef.value!.style.width)\r\n if (sliderDistance.value > 0 && sliderDistance.value <= maxSliderWidth) {\r\n sliderRef.value!.style.left = sliderDistance.value + 'px';\r\n sliderSuccessBgRef.value!.style.width = sliderDistance.value + 'px';\r\n } else if (sliderDistance.value > maxSliderWidth) {\r\n successFunction();\r\n }\r\n }\r\n }\r\n return {\r\n slideValidatorStatus: confirmSuccess,\r\n containerWidth,\r\n containerHeight,\r\n mergeSliderStyle\r\n }\r\n },\r\n render() {\r\n return h('div', { class: 'vue-login_slide-container', style: { width: this.containerWidth, height: this.containerHeight, backgroundColor: this.backgroundColor } }, [\r\n h('div', { class: 'vue-login_slider-success-bg', style: { backgroundColor: this.successBgColor } }),\r\n h('div', { class: 'vue-login_slider-container', style: (this.mergeSliderStyle as CSSProperties) }),\r\n h('div', { class: 'vue-login_inner-container', style: this.innerTextStyle as CSSProperties }, this.innerText as string),\r\n ])\r\n }\r\n\r\n})\r\n\r\n\r\n\r\n\r\n\r\n\r\n"],"names":["useLengthUnit","lengthStr","extraUnit","computed","test","toString","some","ca","endsWith","parseInt","useValidateIsColor","val","install","defineComponent","name","props","backgroundColor","type","String","validator","default","successBgColor","width","Number","height","innerText","sliderSuccessInnerText","innerTextStyle","Object","sliderStyle","sliderSuccessStyle","expose","setup","containerWidth","containerHeight","mergeSliderStyle","value","sliderRef","ref","sliderContainerRef","sliderInnerTextRef","sliderSuccessBgRef","mouseClickState","confirmSuccess","sliderStartXPosition","sliderDistance","onMounted","document","getElementsByClassName","addEventListener","sliderMouseDown","mouseUpFn","e","preventDefault","clientX","mouseMoveFn","style","left","removeEventListener","maxSliderWidth","resWidth","p","prototype","hasOwnProperty","call","successFunction","slideValidatorStatus","render","h","class","this"],"mappings":"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"} -------------------------------------------------------------------------------- /packages/slideValidator/index.css: -------------------------------------------------------------------------------- 1 | .vue-login_slide-container { 2 | position: relative; 3 | border-radius: 4px; 4 | } 5 | 6 | .vue-login_slider-container { 7 | position: absolute; 8 | top: 0px; 9 | left: 0px; 10 | border-radius: 4px; 11 | cursor: move; 12 | z-index: 10; 13 | background-color: aliceblue; 14 | border: 1px solid #f3efef; 15 | box-sizing: border-box; 16 | } 17 | 18 | .vue-login_slider-success-bg{ 19 | position: absolute; 20 | left: 0; 21 | top: 0; 22 | bottom: 0; 23 | border-radius: 4px; 24 | box-sizing: border-box; 25 | border: 1px solid #f3efef; 26 | } 27 | 28 | .vue-login_inner-container { 29 | position: absolute; 30 | left: 0; 31 | top: 0; 32 | right: 0; 33 | bottom: 0; 34 | user-select: none; 35 | display: flex; 36 | align-items: center; 37 | justify-content: center; 38 | } -------------------------------------------------------------------------------- /packages/slideValidator/index.ts: -------------------------------------------------------------------------------- 1 | import SlideValidator from './component' 2 | 3 | export default SlideValidator; -------------------------------------------------------------------------------- /packages/slideValidator/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-login-slide-validator", 3 | "version": "1.0.1", 4 | "main": "dist/index.cjs.js", 5 | "module": "dist/index.esm.js", 6 | "unpkg": "dist/index.global.js", 7 | "types": "dist/index.d.ts", 8 | "license": "MIT", 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/cll123456/test-demi.git" 12 | }, 13 | "author": "twinkle", 14 | "exports": { 15 | ".": { 16 | "import": "./dist/index.esm.js", 17 | "require": "./dist/index.cjs.js" 18 | }, 19 | "./index.css": { 20 | "import": "./dist/index.css", 21 | "require": "./dist/index.css" 22 | } 23 | }, 24 | "dependencies": { 25 | "vue-demi": "^0.11.4" 26 | }, 27 | "peerDependencies": { 28 | "@vue/composition-api": "^1.1.4", 29 | "vue": "^2.6.0 || >=3.0.0-0" 30 | }, 31 | "peerDependenciesMeta": { 32 | "@vue/composition-api": { 33 | "optional": true 34 | } 35 | }, 36 | "devDependencies": { 37 | "csstype": "^3.0.8" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /packages/slideValidator/readme.md: -------------------------------------------------------------------------------- 1 | # 初衷 2 | 3 | 写这个包的主要目的是为了使用`vue-demi`来写`vue2`和`vue3`的公用组件。简单说一下自己的开发感受吧。不没有想象中的那么顺利（可能是自己没有理解到位）； 使用`vue-demi` 里面目前来说只能`vue2`和`vue3`选择一种来进行测试，如果你想在同一个项目中对`vue2`和`vue3`来切换测试，我没有做到，会有些问题。比如： 我曾在项目中建立了一个`examplev2`和`examplev3`来进行项目测试，`vue3`正常启动，`vue2`就会启动不了。我使用的是yarn workspace来进行搭建的。所以全局只能有一个`vue`,`vue2`我就重命名了，重命名后的结果就是`vue-template-complier` 里面不能识别我的`vue2`. 所以自己就只能单独搭建项目来进行测试 4 | 5 | > 希望有大佬可以做到在同一个项目中能够切换vue2和vue3的测试。目前我看到的线上的包，我fork下来看，人家的vue2也是有问题的。 6 | 7 | 8 | # 使用方式 9 | 10 | ## vue3 11 | `npm i vue-login-slide-validator` 12 | 13 | `yarn add vue-login-slide-validator` 14 | 15 | ### 案例 16 | ```html 17 | 26 | 27 | 44 | 49 | ``` 50 | 51 | ### 效果 52 | ![在这里插入图片描述](https://img-blog.csdnimg.cn/b844f580f258406687dc739104510b6a.gif#pic_center) 53 | 54 | 55 | ## vue2 56 | `npm i vue-login-slide-validator @vue/composition-api` 57 | 或者 58 | `yarn add vue-login-slide-validator @vue/composition-api` 59 | 60 | ### 案例 61 | ```html 62 | 74 | 75 | 106 | 107 | ``` 108 | 109 | # api 110 | 111 | 112 | |中文意思| 属性名称 | 默认值 | 类型| 113 | |--|--|--|--| 114 | |一开始背景颜色| backgroundColor | #abcdef | string | 115 | |成功的背景颜色| successBgColor| 无 | string | 116 | |宽度| width| 300px | string | 117 | |高度| height| 50px| string | 118 | |初始内部文字| innerText| 向右拖动滑块验证 | string | 119 | |成功后的滑块文字| sliderSuccessInnerText| 验证成功 | string | 120 | |槽内样式| innerTextStyle| 无 | StyleValue| 121 | |滑块一开始的样式| sliderStyle| 无| StyleValue| 122 | |滑块成功的样式| sliderSuccessStyle| 无 | StyleValue | 123 | |获取滑块状态| slideValidatorStatus| false | boolean| 124 | 125 | 126 | > 源代码请查看 [https://github.com/cll123456/test-demi.git](https://github.com/cll123456/test-demi.git) -------------------------------------------------------------------------------- /packages/slideValidator/utils/index.ts: -------------------------------------------------------------------------------- 1 | import { computed, ComputedRef } from 'vue-demi' 2 | 3 | /** 4 | * 判断传入参数是否是一个标准的长度单位， 'px', 'vw', 'px', 'vh', '%' 结尾 5 | * @param lengthStr 传入的长度 6 | * @param extraUnit 额外需要添加的单位 7 | * @returns 返回一个正常的度量单位 8 | */ 9 | 10 | export function useLengthUnit(lengthStr: string, extraUnit = 'px'):ComputedRef { 11 | return computed(() => { 12 | // 判断数字或者小数，默认加上px 13 | if (/^[1-9][0-9]*([.][0-9]{1,})?$/.test(lengthStr.toString())) { 14 | return lengthStr + extraUnit; 15 | } else { 16 | // 判断是否以常用的css单位结尾 17 | const cssArr: string[] = ['px', 'vw', 'px', 'vh', '%']; 18 | return cssArr.some(ca => lengthStr.toString().endsWith(ca)) ? lengthStr : parseInt(lengthStr.toString()) + extraUnit 19 | } 20 | }) 21 | } 22 | 23 | 24 | /** 25 | * 验证是否是颜色 26 | * @param val 27 | * @returns 28 | */ 29 | export function useValidateIsColor(val: string):boolean { 30 | return /#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/.test(val); 31 | } 32 | 33 | /** 34 | * 获取随机数 35 | * @returns 36 | */ 37 | export function useGetUuid():string { 38 | return Date.now() + '-' + Math.random().toString(16).slice(2, 7) + '-' + Math.random().toString(16).slice(2, 7) 39 | } -------------------------------------------------------------------------------- /packages/slideValidator/yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | vue-demi@^0.11.4: 6 | version "0.11.4" 7 | resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.11.4.tgz#6101992fe4724cf5634018a16e953f3052e94e2a" 8 | integrity sha512-/3xFwzSykLW2HiiLie43a+FFgNOcokbBJ+fzvFXd0r2T8MYohqvphUyDQ8lbAwzQ3Dlcrb1c9ykifGkhSIAk6A== 9 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # 初衷 2 | 3 | 写这个包的主要目的是为了使用`vue-demi`来写`vue2`和`vue3`的公用组件。简单说一下自己的开发感受吧。不没有想象中的那么顺利（可能是自己没有理解到位）； 使用`vue-demi` 里面目前来说只能`vue2`和`vue3`选择一种来进行测试，如果你想在同一个项目中对`vue2`和`vue3`来切换测试，我没有做到，会有些问题。比如： 我曾在项目中建立了一个`examplev2`和`examplev3`来进行项目测试，`vue3`正常启动，`vue2`就会启动不了。我使用的是yarn workspace来进行搭建的。所以全局只能有一个`vue`,`vue2`我就重命名了，重命名后的结果就是`vue-template-complier` 里面不能识别我的`vue2`. 所以自己就只能单独搭建项目来进行测试 4 | 5 | > 希望有大佬可以做到在同一个项目中能够切换vue2和vue3的测试。目前我看到的线上的包，我fork下来看，人家的vue2也是有问题的。 6 | 7 | 8 | # 使用方式 9 | 10 | ## vue3 11 | `npm i vue-login-slide-validator` 12 | 13 | `yarn add vue-login-slide-validator` 14 | 15 | ### 案例 16 | ```html 17 | 26 | 27 | 44 | 49 | ``` 50 | 51 | ### 效果 52 | ![在这里插入图片描述](https://img-blog.csdnimg.cn/b844f580f258406687dc739104510b6a.gif#pic_center) 53 | 54 | 55 | ## vue2 56 | `npm i vue-login-slide-validator @vue/composition-api` 57 | 或者 58 | `yarn add vue-login-slide-validator @vue/composition-api` 59 | 60 | ### 案例 61 | ```html 62 | 74 | 75 | 106 | 107 | ``` 108 | 109 | # api 110 | 111 | 112 | |中文意思| 属性名称 | 默认值 | 类型| 113 | |--|--|--|--| 114 | |一开始背景颜色| backgroundColor | #abcdef | string | 115 | |成功的背景颜色| successBgColor| 无 | string | 116 | |宽度| width| 300px | string | 117 | |高度| height| 50px| string | 118 | |初始内部文字| innerText| 向右拖动滑块验证 | string | 119 | |成功后的滑块文字| sliderSuccessInnerText| 验证成功 | string | 120 | |槽内样式| innerTextStyle| 无 | StyleValue| 121 | |滑块一开始的样式| sliderStyle| 无| StyleValue| 122 | |滑块成功的样式| sliderSuccessStyle| 无 | StyleValue | 123 | |获取滑块状态| slideValidatorStatus| false | boolean| 124 | 125 | 126 | > 源代码请查看 [https://github.com/cll123456/test-demi.git](https://github.com/cll123456/test-demi.git) -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import typescript from "rollup-plugin-typescript2"; 2 | import dts from "rollup-plugin-dts"; 3 | import { terser } from "rollup-plugin-terser"; 4 | import { defineConfig } from "rollup"; 5 | import css from 'rollup-plugin-css-only' 6 | 7 | 8 | const packages = [{ packageName: 'slideValidator', path: './packages/slideValidator' }]; 9 | 10 | const rollOpts = []; 11 | packages.forEach(obj => { 12 | const rollObj = { 13 | plugins: [ 14 | typescript(), 15 | css(), 16 | terser()], 17 | external: ["vue-demi"], 18 | input: obj.path + '/index.ts', 19 | output: [ 20 | { 21 | format: "esm", 22 | compact: true, 23 | file: obj.path + '/dist/index.esm.js', 24 | sourcemap: true, 25 | }, 26 | { 27 | compact: true, 28 | format: "cjs", 29 | file: obj.path + '/dist/index.cjs.js', 30 | sourcemap: true, 31 | exports: "default", 32 | }, 33 | { 34 | file: obj.path + '/dist/index.global.js', 35 | format: "umd", 36 | name: obj.packageName, 37 | compact: true, 38 | sourcemap: true, 39 | globals: { 40 | "vue-demi": "VueDemi", 41 | }, 42 | }, 43 | ], 44 | }; 45 | rollOpts.push(rollObj); 46 | 47 | rollOpts.push({ 48 | input: obj.path + '/index.ts', 49 | plugins: [dts()], 50 | output: { 51 | file: obj.path + '/dist/index.d.ts', 52 | format: "es", 53 | }, 54 | }) 55 | }) 56 | 57 | export default defineConfig(rollOpts) 58 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES5", 4 | "module": "ESNext", 5 | "strict": true, 6 | "jsx": "preserve", 7 | "importHelpers": true, 8 | "moduleResolution": "node", 9 | "removeComments": true, 10 | "skipLibCheck": false, 11 | "allowJs": true, 12 | "esModuleInterop": true, 13 | "allowSyntheticDefaultImports": true, 14 | "sourceMap": true, 15 | "baseUrl": ".", 16 | "lib": ["ESNext", "DOM", "DOM.Iterable"] 17 | }, 18 | "include": [ 19 | "packages/**/*" 20 | , "docs", "dist" ], 21 | "exclude": [ 22 | "node_modules", 23 | "packages/exampleV3", 24 | "packages/exampleV2", 25 | "**/dist",] 26 | } --------------------------------------------------------------------------------