@web-utils/component 1.0.0

package/README.md

@@ -0,0 +1,3 @@
+# WebUtils
+
+WebUtils for common use.

package/dist/index.js

@@ -0,0 +1 @@
+const O="1.0.0";var E=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"empty-view",style:{fontSize:e.fontSize,height:e.height}},[e._t("default",function(){return[e._v(e._s(e.emptyTips))]})],2)},T=[],ne="";function f(e,t,n,a,r,l,_,w){var s=typeof e=="function"?e.options:e;t&&(s.render=t,s.staticRenderFns=n,s._compiled=!0),a&&(s.functional=!0),l&&(s._scopeId="data-v-"+l);var o;if(_?(o=function(i){i=i||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,!i&&typeof __VUE_SSR_CONTEXT__!="undefined"&&(i=__VUE_SSR_CONTEXT__),r&&r.call(this,i),i&&i._registeredComponents&&i._registeredComponents.add(_)},s._ssrRegister=o):r&&(o=w?function(){r.call(this,(s.functional?this.parent:this).$root.$options.shadowRoot)}:r),o)if(s.functional){s._injectStyles=o;var C=s.render;s.render=function(F,d){return o.call(d),C(F,d)}}else{var v=s.beforeCreate;s.beforeCreate=v?[].concat(v,o):[o]}return{exports:e,options:s}}const I={name:"EmptyView",props:{emptyTips:{type:String,default:"\u6682\u65E0\u6570\u636E"},fontSize:{type:String,default:"20px"},height:{type:String,default:"100%"}}},m={};var b=f(I,E,T,!1,R,null,null,null);function R(e){for(let t in m)this[t]=m[t]}var u=function(){return b.exports}();u.install=function(e){e.component(u.name,u)};var P=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"flex-scroller-wrapper"},[n("div",{class:["flex-scroller",{"flex-column":e.flexColumn,"flex-row":e.flexRow,"content-scroll":e.contentScroll},e.contentClass]},[e._t("default")],2)])},V=[],se="";const N={name:"FlexScroller",props:{flexColumn:Boolean,flexRow:Boolean,contentClass:String,contentScroll:{type:Boolean,default:!0}}},g={};var W=f(N,P,V,!1,H,null,null,null);function H(e){for(let t in g)this[t]=g[t]}var c=function(){return W.exports}();c.install=function(e){e.component(c.name,c)};var A=function(){var e=this,t=e.$createElement;return e._self._c,e._m(0)},B=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticClass:"not-implement"},[n("div",[n("i",{staticClass:"fa fa-wrench"}),e._v(" \u5EFA\u8BBE\u4E2D... ")])])}],re="";const U={name:"NotImplement"},$={};var X=f(U,A,B,!1,j,"f91d5e80",null,null);function j(e){for(let t in $)this[t]=$[t]}var p=function(){return X.exports}();p.install=function(e){e.component(p.name,p)};function k(e,t){for(let n=0;n<t.length;n++)if(e===t[n])return!0;return!1}const x=function(){return document.addEventListener?function(e,t,n){e&&t&&n&&e.addEventListener(t,n,!1)}:function(e,t,n){e&&t&&n&&e.attachEvent(`on${t}`,n)}}(),S=function(){return document.removeEventListener?function(e,t,n){e&&t&&e.removeEventListener(t,n,!1)}:function(e,t,n){e&&t&&e.detachEvent(`on${t}`,n)}}();var L=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{class:e.classes},[e.showIcon?n("div",{class:e.barConClasses},e._m(0),0):e._e()])},Y=[function(){var e=this,t=e.$createElement,n=e._self._c||t;return e._l(8,function(a){return n("i",{key:`trigger-${a}`,class:`${e.prefix}-bar`})})}],ie="";const q={name:"Trigger",props:{mode:String,showIcon:Boolean,line:{type:Boolean,default:!0}},data(){return{prefix:"egd-split-trigger"}},computed:{isVertical(){return this.mode==="vertical"},classes(){return[this.prefix,this.line?this.isVertical?` ${this.prefix}-vertical-line`:`${this.prefix}-horizontal-line`:"",this.isVertical?`${this.prefix}-vertical`:`${this.prefix}-horizontal`]},barConClasses(){return[`${this.prefix}-bar-con`,this.isVertical?"vertical":"horizontal"]}}},y={};var D=f(q,L,Y,!1,G,null,null,null);function G(e){for(let t in y)this[t]=y[t]}var J=function(){return D.exports}(),K=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{ref:"outerWrapper",class:e.wrapperClasses},[e.isHorizontal?n("div",{class:`${e.prefix}-horizontal`},[n("div",{class:[`${e.prefix}-pane`,"left-pane"],style:{right:`${e.anotherOffset}%`}},[e._t("left")],2),n("div",{class:`${e.prefix}-trigger-con`,style:{left:`calc(${e.offset}% + ${e.triggerSize/2}px)`,width:`${e.triggerSize}px`},on:{mousedown:e.handleMousedown}},[e._t("trigger",function(){return[n("Trigger",{attrs:{mode:"vertical"}})]})],2),n("div",{class:[`${e.prefix}-pane`,"right-pane"],style:{left:`calc(${e.offset}% + ${e.triggerSize}px)`}},[e._t("right")],2)]):n("div",{class:`${e.prefix}-vertical`},[n("div",{class:[`${e.prefix}-pane`,"top-pane"],style:{bottom:`${e.anotherOffset}%`}},[e._t("top")],2),n("div",{class:`${e.prefix}-trigger-con`,style:{top:`calc(${e.offset}% + ${e.triggerSize/2}px)`,height:`${e.triggerSize}px`},on:{mousedown:e.handleMousedown}},[e._t("trigger",function(){return[n("Trigger",{attrs:{mode:"horizontal"}})]})],2),n("div",{class:[`${e.prefix}-pane`,"bottom-pane"],style:{top:`calc(${e.offset}% + ${e.triggerSize}px)`}},[e._t("bottom")],2)])])},Q=[],oe="";const Z={name:"SplitPane",components:{Trigger:J},props:{value:{type:[Number,String],default:.5},mode:{validator(e){return k(e,["horizontal","vertical"])},default:"horizontal"},triggerSize:{type:Number,default:6},min:{type:[Number,String],default:"40px"},max:{type:[Number,String],default:"40px"}},data(){return{prefix:"egd-split",offset:0,oldOffset:0,isMoving:!1}},computed:{wrapperClasses(){return[`${this.prefix}-wrapper`,this.isMoving?"no-select":""]},isHorizontal(){return this.mode==="horizontal"},anotherOffset(){return 100-this.offset},valueIsPx(){return typeof this.value=="string"},offsetSize(){return this.isHorizontal?"offsetWidth":"offsetHeight"},computedMin(){return this.getComputedThresholdValue("min")},computedMax(){return this.getComputedThresholdValue("max")}},watch:{value(){this.offset=(this.valueIsPx?this.px2percent(this.value,this.$refs.outerWrapper[this.offsetSize]):this.value)*1e4/100}},mounted(){this.$nextTick(()=>{this.offset=(this.valueIsPx?this.px2percent(this.value,this.$refs.outerWrapper[this.offsetSize]):this.value)*1e4/100})},methods:{px2percent(e,t){return parseFloat(e)/parseFloat(t)},getComputedThresholdValue(e){const t=this.$refs.outerWrapper[this.offsetSize];return this.valueIsPx?typeof this[e]=="string"?this[e]:t*this[e]:typeof this[e]=="string"?this.px2percent(this[e],t):this[e]},getMin(e,t){return this.valueIsPx?`${Math.min(parseFloat(e),parseFloat(t))}px`:Math.min(e,t)},getMax(e,t){return this.valueIsPx?`${Math.max(parseFloat(e),parseFloat(t))}px`:Math.max(e,t)},getAnotherOffset(e){let t=0;return this.valueIsPx?t=`${this.$refs.outerWrapper[this.offsetSize]-parseFloat(e)}px`:t=1-e,t},handleMove(e){const n=(this.isHorizontal?e.pageX:e.pageY)-this.initOffset,a=this.$refs.outerWrapper[this.offsetSize];let r=this.valueIsPx?`${parseFloat(this.oldOffset)+n}px`:this.px2percent(a*this.oldOffset+n,a);const l=this.getAnotherOffset(r);parseFloat(r)<=parseFloat(this.computedMin)&&(r=this.getMax(r,this.computedMin)),parseFloat(l)<=parseFloat(this.computedMax)&&(r=this.getAnotherOffset(this.getMax(l,this.computedMax))),e.atMin=this.value===this.computedMin,e.atMax=this.valueIsPx?this.getAnotherOffset(this.value)===this.computedMax:this.getAnotherOffset(this.value).toFixed(5)===this.computedMax.toFixed(5),this.$emit("input",r),this.$emit("on-moving",e)},handleUp(){this.isMoving=!1,S(window,"mousemove",this.handleMove),S(window,"mouseup",this.handleUp),this.$emit("on-move-end")},handleMousedown(e){this.initOffset=this.isHorizontal?e.pageX:e.pageY,this.oldOffset=this.value,this.isMoving=!0,x(window,"mousemove",this.handleMove),x(window,"mouseup",this.handleUp),this.$emit("on-move-start")}}},M={};var ee=f(Z,K,Q,!1,te,null,null,null);function te(e){for(let t in M)this[t]=M[t]}var h=function(){return ee.exports}();h.install=function(e){e.component(h.name,h)};function z(e){e.use(u),e.use(c),e.use(p),e.use(h)}export{z as default,z as install,O as version};

package/dist/style.css

@@ -0,0 +1 @@
+.empty-view{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:#909399;font-size:20px;background-color:#fff}.flex-scroller-wrapper{position:relative;flex:1 1 auto}.flex-scroller-wrapper .flex-scroller{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.flex-scroller-wrapper .flex-scroller.content-scroll{overflow:auto}.not-implement[data-v-f91d5e80]{display:flex;align-items:center;justify-content:center;height:100%;color:gray;font-size:3em;text-align:center}.egd-split-wrapper{position:relative;width:100%;height:100%}.egd-split-pane{position:absolute}.egd-split-pane.left-pane,.egd-split-pane.right-pane{top:0;bottom:0}.egd-split-pane.left-pane{left:0}.egd-split-pane.right-pane{right:0}.egd-split-pane.top-pane,.egd-split-pane.bottom-pane{right:0;left:0}.egd-split-pane.top-pane{top:0}.egd-split-pane.bottom-pane{bottom:0}.egd-split-trigger-con{position:absolute;z-index:10;transform:translate(-50%,-50%)}.egd-split-trigger-bar-con{position:absolute;overflow:hidden}.egd-split-trigger-bar-con.vertical{top:50%;left:1px;height:32px;transform:translateY(-50%)}.egd-split-trigger-bar-con.horizontal{top:1px;left:50%;width:32px;transform:translate(-50%)}.egd-split-trigger-vertical{width:6px;height:100%;background:#f8f8f9;box-shadow:0 0 4px #1c243866;cursor:ew-resize}.egd-split-trigger-vertical .egd-split-trigger-bar{float:left;width:4px;height:1px;margin-top:3px;background:rgba(23,35,61,.25)}.egd-split-trigger-horizontal{width:100%;height:6px;background:#f8f8f9;box-shadow:0 0 4px #1c243866;cursor:ns-resize}.egd-split-trigger-horizontal .egd-split-trigger-bar{float:left;width:1px;height:4px;margin-right:3px;background:rgba(23,35,61,.25)}.egd-split-horizontal .egd-split-trigger-con{top:50%;height:100%;border-right:1px solid #d7dae0}.egd-split-vertical .egd-split-trigger-con{left:50%;width:100%;border-bottom:1px solid #d7dae0}.egd-split-trigger-vertical-line,.egd-split-trigger-horizontal-line{background-color:transparent;box-shadow:none}.egd-split-wrapper{position:relative;width:100%;height:100%}.egd-split-pane{position:absolute}.egd-split-pane.left-pane,.egd-split-pane.right-pane{top:0;bottom:0}.egd-split-pane.left-pane{left:0}.egd-split-pane.right-pane{right:0}.egd-split-pane.top-pane,.egd-split-pane.bottom-pane{right:0;left:0}.egd-split-pane.top-pane{top:0}.egd-split-pane.bottom-pane{bottom:0}.egd-split-trigger-con{position:absolute;z-index:10;transform:translate(-50%,-50%)}.egd-split-trigger-bar-con{position:absolute;overflow:hidden}.egd-split-trigger-bar-con.vertical{top:50%;left:1px;height:32px;transform:translateY(-50%)}.egd-split-trigger-bar-con.horizontal{top:1px;left:50%;width:32px;transform:translate(-50%)}.egd-split-trigger-vertical{width:6px;height:100%;background:#f8f8f9;box-shadow:0 0 4px #1c243866;cursor:ew-resize}.egd-split-trigger-vertical .egd-split-trigger-bar{float:left;width:4px;height:1px;margin-top:3px;background:rgba(23,35,61,.25)}.egd-split-trigger-horizontal{width:100%;height:6px;background:#f8f8f9;box-shadow:0 0 4px #1c243866;cursor:ns-resize}.egd-split-trigger-horizontal .egd-split-trigger-bar{float:left;width:1px;height:4px;margin-right:3px;background:rgba(23,35,61,.25)}.egd-split-horizontal .egd-split-trigger-con{top:50%;height:100%;border-right:1px solid #d7dae0}.egd-split-vertical .egd-split-trigger-con{left:50%;width:100%;border-bottom:1px solid #d7dae0}.egd-split-trigger-vertical-line,.egd-split-trigger-horizontal-line{background-color:transparent;box-shadow:none}.egd-split .no-select{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}

package/package.json

@@ -0,0 +1,117 @@
+{
+  "name": "@web-utils/component",
+  "version": "1.0.0",
+  "private": false,
+  "license": "MIT",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "web-types.json"
+  ],
+  "web-types": "web-types.json",
+  "scripts": {
+    "dev": "vite --host",
+    "build": "node scripts/build.js",
+    "serve": "vite preview",
+    "prod": "vite build",
+    "release": "npm run build && npm run pub",
+    "lint": "eslint src/**/*.{js,ts,vue} --fix",
+    "pub": "node scripts/publish.js"
+  },
+  "dependencies": {
+    "dayjs": "^1.10.7",
+    "jsencrypt": "^3.2.1",
+    "lodash": "^4.17.21",
+    "qrcode": "^1.5.0",
+    "resize-observer-polyfill": "^1.5.1",
+    "uuid": "^8.3.2"
+  },
+  "devDependencies": {
+    "@types/lodash": "^4.14.178",
+    "@types/node": "^12.20.37",
+    "@types/qrcode": "^1.4.2",
+    "@types/uuid": "^8.3.4",
+    "@typescript-eslint/eslint-plugin": "^5.12.0",
+    "@typescript-eslint/parser": "^5.12.0",
+    "@vue/eslint-config-typescript": "^10.0.0",
+    "@web-utils/core": "^1.4.6",
+    "element-ui": "^2.15.1",
+    "eslint": "^8.9.0",
+    "eslint-plugin-vue": "^8.4.1",
+    "execa": "^5.0.0",
+    "globby": "^13.1.1",
+    "path-to-regexp": "^6.2.0",
+    "sass": "^1.49.8",
+    "shiki": "^0.10.1",
+    "slash": "^3.0.0",
+    "terser": "^5.12.1",
+    "typescript": "^4.5.5",
+    "vite": "^2.9.5",
+    "vite-plugin-style-import": "^1.4.1",
+    "vite-plugin-vue2": "^2.0.0",
+    "vue": "^2.6.14",
+    "vue-router": "^3.5.3",
+    "vue-template-compiler": "^2.6.14"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "vue/setup-compiler-macros": true
+    },
+    "globals": {},
+    "parser": "vue-eslint-parser",
+    "parserOptions": {
+      "parser": "@typescript-eslint/parser",
+      "sourceType": "module",
+      "ecmaVersion": 2020,
+      "ecmaFeatures": {
+        "jsx": true
+      }
+    },
+    "extends": [
+      "@vue/typescript",
+      "plugin:vue/vue3-recommended"
+    ],
+    "rules": {
+      "vue/no-deprecated-dollar-listeners-api": "off",
+      "vue/multi-word-component-names": "off",
+      "vue/no-deprecated-destroyed-lifecycle": "off",
+      "vue/html-closing-bracket-newline": [
+        "error",
+        {
+          "singleline": "never",
+          "multiline": "never"
+        }
+      ],
+      "vue/max-attributes-per-line": [
+        "error",
+        {
+          "singleline": 1000,
+          "multiline": 1
+        }
+      ],
+      "vue/first-attribute-linebreak": [
+        "error",
+        {
+          "singleline": "ignore",
+          "multiline": "beside"
+        }
+      ],
+      "vue/html-closing-bracket-spacing": [
+        "error",
+        {
+          "startTag": "never",
+          "endTag": "never",
+          "selfClosingTag": "never"
+        }
+      ]
+    }
+  }
+}

package/web-types.json

@@ -0,0 +1,83 @@
+{
+  "$schema": "https://json.schemastore.org/web-types",
+  "framework": "vue",
+  "name": "@web-utils/component",
+  "version": "1.0.0",
+  "contributions": {
+    "html": {
+      "elements": [
+        {
+          "name": "EmptyView",
+          "description": "EmptyView",
+          "attributes": [
+            {
+              "name": "emptyTips",
+              "description": "是否显示返回按钮",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "type": "boolean",
+              "default": "true"
+            },
+            {
+              "name": "fontSize",
+              "description": "是否显示头部",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "icon",
+              "description": "是否显示底部",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "name": "iconSize",
+              "description": "页面标题",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": ""
+            },
+            {
+              "name": "showIcon",
+              "description": "内容样式",
+              "value": {
+                "kind": "expression",
+                "type": "boolean"
+              },
+              "default": ""
+            },
+            {
+              "name": "height",
+              "description": "内容样式",
+              "value": {
+                "kind": "expression",
+                "type": "string"
+              },
+              "default": ""
+            }
+          ],
+          "events": [
+            {
+              "name": "input"
+            }
+          ],
+          "slots": [
+            {
+              "name": "default"
+            }
+          ]
+        }
+      ]
+    }
+  }
+}