dpzvc-ui 1.0.0 → 1.1.0

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "dpzvc-ui",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Vue组件库",
   "main": "dist/dpzvc.js",
   "scripts": {
     "init": "webpack --progress --config webpack.dev.config.js",
-    "dev": "webpack-dev-server   --inline --hot --compress --history-api-fallback  --config webpack.dev.config.js",
+    "dev": "webpack serve --config webpack.dev.config.js --open",
     "build:style": "gulp --gulpfile build-style.js",
     "build:dev": "webpack --config webpack.dist.dev.config.js",
-    "build:prod": "webpack -p --config webpack.dist.prod.config.js",
+    "build:prod": "webpack --config webpack.dist.prod.config.js",
     "build": "npm run build:style && npm run build:dev && npm run build:prod",
-    "dist": "webpack --progress --hide-modules --config webpack.prod.config.js"
+    "dist": "webpack --progress --config webpack.prod.config.js"
   },
   "repository": {
     "type": "git",
@@ -26,29 +26,30 @@
   "dependencies": {
     "china-area-data": "^3.0.0",
     "core-js": "^2.4.1",
-    "deepmerge": "^1.3.1",
-    "vue": "^2.3.2"
+    "deepmerge": "^1.3.1"
   },
   "devDependencies": {
+    "@babel/core": "^7.28.5",
+    "@babel/plugin-transform-runtime": "^7.28.5",
+    "@babel/preset-env": "^7.28.5",
+    "@babel/runtime": "^7.28.4",
     "autoprefixer": "^10.4.23",
     "autoprefixer-loader": "^2.0.0",
     "babel": "^6.23.0",
-    "babel-core": "^6.25.0",
-    "babel-loader": "^6.2.4",
+    "babel-core": "^6.26.3",
+    "babel-loader": "^8.4.1",
     "babel-plugin-transform-object-rest-spread": "^6.23.0",
-    "babel-plugin-transform-runtime": "^6.12.0",
-    "babel-preset-es2015": "^6.9.0",
+    "babel-plugin-transform-runtime": "^6.23.0",
+    "babel-preset-es2015": "^6.24.1",
     "babel-preset-latest": "^6.24.1",
     "babel-preset-stage-0": "^6.24.1",
-    "babel-runtime": "^6.23.0",
+    "babel-runtime": "^6.26.0",
     "cross-env": "^3.1.4",
-    "css-loader": "^0.23.1",
+    "css-loader": "^6.11.0",
     "eslint": "^3.12.2",
     "eslint-plugin-html": "^1.7.0",
     "exif-js": "^2.2.1",
-    "extract-text-webpack-plugin": "^2.1.2",
     "file-loader": "^0.8.5",
-    "friendly-errors-webpack-plugin": "^1.6.1",
     "function-bind": "^1.1.0",
     "gh-pages": "^6.3.0",
     "gulp": "^4.0.2",
@@ -58,23 +59,27 @@
     "gulp-postcss": "^10.0.0",
     "gulp-rename": "^2.1.0",
     "html-loader": "^0.3.0",
-    "html-webpack-plugin": "^2.28.0",
+    "html-webpack-plugin": "^5.6.5",
     "less": "^4.5.1",
-    "less-loader": "^2.2.3",
+    "less-loader": "^11.1.4",
     "lolex": "^1.5.2",
-    "postcss-loader": "^2.0.9",
-    "style-loader": "^0.13.1",
-    "url-loader": "^0.5.7",
-    "vue": "^2.2.1",
+    "mini-css-extract-plugin": "^2.9.4",
+    "postcss": "^8.5.6",
+    "postcss-loader": "^6.2.1",
+    "style-loader": "^3.3.4",
+    "terser-webpack-plugin": "^4.2.3",
+    "url-loader": "^0.5.9",
+    "vue": "^2.7.16",
     "vue-hot-reload-api": "^1.3.3",
     "vue-html-loader": "^1.2.3",
-    "vue-loader": "^11.0.0",
-    "vue-router": "^2.2.1",
-    "vue-style-loader": "^1.0.0",
-    "vue-template-compiler": "^2.2.1",
-    "webpack": "^2.2.1",
-    "webpack-dev-server": "^2.4.1",
-    "webpack-merge": "^3.0.0"
+    "vue-loader": "^15.11.1",
+    "vue-router": "^3.6.5",
+    "vue-style-loader": "^4.1.3",
+    "vue-template-compiler": "^2.7.16",
+    "webpack": "^5.104.1",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.2",
+    "webpack-merge": "^5.10.0"
   },
   "author": "yishide",
   "license": "MIT",

package/postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: [
+    require('autoprefixer')()
+  ]
+}

package/src/components/app.vue

@@ -1,5 +1,5 @@
 
-<style rel="stylesheet/less" lang="less">
+<style lang="less">
     // @import '../styles/common.css';
 
     // @import '../../src/styles/index';

package/src/components/upload/upload.vue

@@ -10,7 +10,8 @@
 <script>
 
     import EXIF from 'exif-js'
-    import MegaPixImage from '../../lib/MegaPixImage'
+    // import MegaPixImage from '../../lib/MegaPixImage'
+    import * as MegaPixImage from '../../lib/MegaPixImage';
     import { JPEG } from '../../utils/util'
     const prefixCls = 'dpzvc-upload';
     export default {

package/src/config/config.js

@@ -1,5 +1,5 @@
 /**
- * Created by lcfevr on 16/7/18.
+ * Created by yishide on 16/7/18.
  */
 
 

package/src/index.js

@@ -2,7 +2,7 @@
  * Created by admin on 2017/5/15.
  */
 
-import VButton from '@/button'
+import VButton from './components/button'
 import CheckBox from './components/checkBox'
 import Header from './components/Header'
 import Message from './components/message'
@@ -15,7 +15,7 @@ import Prompt from './components/prompt'
 import SlideBar from './components/slideBar'
 import TextBar from './components/Text'
 import Upload from './components/upload'
-import ActionSheet from '@/action-sheet'
+import ActionSheet from './components/action-sheet'
 import SwitchBar from './components/switchbar'
 import Rater from './components/rater'
 import Spinner from './components/spinner'
@@ -36,7 +36,7 @@ const dpzvc = {
     CheckBoxGroup:CheckBox.group,
     Radio,
     RadioGroup:Radio.group,
-    Header,
+    DpHeader:Header,
     Message,
     Modal,
     Prompt,
@@ -54,7 +54,7 @@ const dpzvc = {
     LoadMore,
     Popup,
     Indicator,
-    Progress,
+    DpProgress:Progress,
     ToTop,
     Cell,
     CellSwipe,
@@ -80,4 +80,5 @@ if (typeof window !== 'undefined' && window.Vue) {
     install(window.Vue);
 }
 
-module.exports = Object.assign(dpzvc, {install});
+const exportObj = Object.assign(dpzvc, {install});
+export default exportObj;

package/src/lib/MegaPixImage.js

@@ -1,29 +1,30 @@
-(function() {
+// MegaPixImage.js
+(function (global, factory) {
+    if (typeof module === 'object' && typeof module.exports === 'object') {
+        module.exports = factory(); // CommonJS
+    } else if (typeof define === 'function' && define.amd) {
+        define([], factory); // AMD
+    } else {
+        global.MegaPixImage = factory(); // Browser global
+    }
+}(typeof window !== 'undefined' ? window : this, function () {
 
-    /**
-     * Detect subsampling in loaded image.
-     * In iOS, larger images than 2M pixels may be subsampled in rendering.
-     */
+    // -------------------------
+    // Helper functions
+    // -------------------------
     function detectSubsampling(img) {
         var iw = img.naturalWidth, ih = img.naturalHeight;
-        if (iw * ih > 1024 * 1024) { // subsampling may happen over megapixel image
+        if (iw * ih > 1024 * 1024) {
             var canvas = document.createElement('canvas');
             canvas.width = canvas.height = 1;
             var ctx = canvas.getContext('2d');
             ctx.drawImage(img, -iw + 1, 0);
-            // subsampled image becomes half smaller in rendering size.
-            // check alpha channel value to confirm image is covering edge pixel or not.
-            // if alpha value is 0 image is not covering, hence subsampled.
             return ctx.getImageData(0, 0, 1, 1).data[3] === 0;
         } else {
             return false;
         }
     }
 
-    /**
-     * Detecting vertical squash in loaded image.
-     * Fixes a bug which squash image vertically while drawing into canvas for some images.
-     */
     function detectVerticalSquash(img, iw, ih) {
         var canvas = document.createElement('canvas');
         canvas.width = 1;
@@ -31,142 +32,78 @@
         var ctx = canvas.getContext('2d');
         ctx.drawImage(img, 0, 0);
         var data = ctx.getImageData(0, 0, 1, ih).data;
-        // search image edge pixel position in case it is squashed vertically.
-        var sy = 0;
-        var ey = ih;
-        var py = ih;
+        var sy = 0, ey = ih, py = ih;
         while (py > sy) {
             var alpha = data[(py - 1) * 4 + 3];
-            if (alpha === 0) {
-                ey = py;
-            } else {
-                sy = py;
-            }
+            if (alpha === 0) { ey = py; } else { sy = py; }
             py = (ey + sy) >> 1;
         }
-        var ratio = (py / ih);
-        return (ratio===0)?1:ratio;
+        var ratio = py / ih;
+        return (ratio === 0) ? 1 : ratio;
     }
 
-    /**
-     * Rendering image element (with resizing) and get its data URL
-     */
     function renderImageToDataURL(img, options, doSquash) {
         var canvas = document.createElement('canvas');
         renderImageToCanvas(img, canvas, options, doSquash);
         return canvas.toDataURL("image/jpeg", options.quality || 0.8);
     }
 
-    /**
-     * Rendering image element (with resizing) into the canvas element
-     */
     function renderImageToCanvas(img, canvas, options, doSquash) {
         var iw = img.naturalWidth, ih = img.naturalHeight;
-        if (!(iw+ih)) return;
+        if (!(iw + ih)) return;
         var width = options.width, height = options.height;
         var ctx = canvas.getContext('2d');
         ctx.save();
         transformCoordinate(canvas, ctx, width, height, options.orientation);
         var subsampled = detectSubsampling(img);
-        if (subsampled) {
-            iw /= 2;
-            ih /= 2;
-        }
-        var d = 1024; // size of tiling canvas
+        if (subsampled) { iw /= 2; ih /= 2; }
+        var d = 1024;
         var tmpCanvas = document.createElement('canvas');
         tmpCanvas.width = tmpCanvas.height = d;
         var tmpCtx = tmpCanvas.getContext('2d');
         var vertSquashRatio = doSquash ? detectVerticalSquash(img, iw, ih) : 1;
         var dw = Math.ceil(d * width / iw);
         var dh = Math.ceil(d * height / ih / vertSquashRatio);
-        var sy = 0;
-        var dy = 0;
+        var sy = 0, dy = 0;
         while (sy < ih) {
-            var sx = 0;
-            var dx = 0;
+            var sx = 0, dx = 0;
             while (sx < iw) {
                 tmpCtx.clearRect(0, 0, d, d);
                 tmpCtx.drawImage(img, -sx, -sy);
                 ctx.drawImage(tmpCanvas, 0, 0, d, d, dx, dy, dw, dh);
-                sx += d;
-                dx += dw;
+                sx += d; dx += dw;
             }
-            sy += d;
-            dy += dh;
+            sy += d; dy += dh;
         }
         ctx.restore();
         tmpCanvas = tmpCtx = null;
     }
 
-    /**
-     * Transform canvas coordination according to specified frame size and orientation
-     * Orientation value is from EXIF tag
-     */
     function transformCoordinate(canvas, ctx, width, height, orientation) {
         switch (orientation) {
-            case 5:
-            case 6:
-            case 7:
-            case 8:
-                canvas.width = height;
-                canvas.height = width;
-                break;
-            default:
-                canvas.width = width;
-                canvas.height = height;
+            case 5: case 6: case 7: case 8: canvas.width = height; canvas.height = width; break;
+            default: canvas.width = width; canvas.height = height;
         }
         switch (orientation) {
-            case 2:
-                // horizontal flip
-                ctx.translate(width, 0);
-                ctx.scale(-1, 1);
-                break;
-            case 3:
-                // 180 rotate left
-                ctx.translate(width, height);
-                ctx.rotate(Math.PI);
-                break;
-            case 4:
-                // vertical flip
-                ctx.translate(0, height);
-                ctx.scale(1, -1);
-                break;
-            case 5:
-                // vertical flip + 90 rotate right
-                ctx.rotate(0.5 * Math.PI);
-                ctx.scale(1, -1);
-                break;
-            case 6:
-                // 90 rotate right
-                ctx.rotate(0.5 * Math.PI);
-                ctx.translate(0, -height);
-                break;
-            case 7:
-                // horizontal flip + 90 rotate right
-                ctx.rotate(0.5 * Math.PI);
-                ctx.translate(width, -height);
-                ctx.scale(-1, 1);
-                break;
-            case 8:
-                // 90 rotate left
-                ctx.rotate(-0.5 * Math.PI);
-                ctx.translate(-width, 0);
-                break;
-            default:
-                break;
+            case 2: ctx.translate(width, 0); ctx.scale(-1, 1); break;
+            case 3: ctx.translate(width, height); ctx.rotate(Math.PI); break;
+            case 4: ctx.translate(0, height); ctx.scale(1, -1); break;
+            case 5: ctx.rotate(0.5 * Math.PI); ctx.scale(1, -1); break;
+            case 6: ctx.rotate(0.5 * Math.PI); ctx.translate(0, -height); break;
+            case 7: ctx.rotate(0.5 * Math.PI); ctx.translate(width, -height); ctx.scale(-1, 1); break;
+            case 8: ctx.rotate(-0.5 * Math.PI); ctx.translate(-width, 0); break;
         }
     }
 
     var URL = window.URL && window.URL.createObjectURL ? window.URL :
-        window.webkitURL && window.webkitURL.createObjectURL ? window.webkitURL :
-            null;
+        window.webkitURL && window.webkitURL.createObjectURL ? window.webkitURL : null;
 
-    /**
-     * MegaPixImage class
-     */
+    // -------------------------
+    // MegaPixImage class
+    // -------------------------
     function MegaPixImage(srcImage) {
         if (window.Blob && srcImage instanceof Blob) {
-            if (!URL) { throw Error("No createObjectURL function found to create blob url"); }
+            if (!URL) { throw Error("No createObjectURL function found"); }
             var img = new Image();
             img.src = URL.createObjectURL(srcImage);
             this.blob = srcImage;
@@ -174,13 +111,11 @@
         }
         if (!srcImage.naturalWidth && !srcImage.naturalHeight) {
             var _this = this;
-            srcImage.onload = srcImage.onerror = function() {
+            srcImage.onload = srcImage.onerror = function () {
                 var listeners = _this.imageLoadListeners;
                 if (listeners) {
                     _this.imageLoadListeners = null;
-                    for (var i=0, len=listeners.length; i<len; i++) {
-                        listeners[i]();
-                    }
+                    for (var i = 0; i < listeners.length; i++) { listeners[i](); }
                 }
             };
             this.imageLoadListeners = [];
@@ -188,13 +123,10 @@
         this.srcImage = srcImage;
     }
 
-    /**
-     * Rendering megapix image into specified target element
-     */
-    MegaPixImage.prototype.render = function(target, options, callback) {
+    MegaPixImage.prototype.render = function (target, options, callback) {
         if (this.imageLoadListeners) {
             var _this = this;
-            this.imageLoadListeners.push(function() { _this.render(target, options, callback); });
+            this.imageLoadListeners.push(function () { _this.render(target, options, callback); });
             return;
         }
         options = options || {};
@@ -202,52 +134,25 @@
             width = options.width, height = options.height,
             maxWidth = options.maxWidth, maxHeight = options.maxHeight,
             doSquash = !this.blob || this.blob.type === 'image/jpeg';
-        if (width && !height) {
-            height = (imgHeight * width / imgWidth) << 0;
-        } else if (height && !width) {
-            width = (imgWidth * height / imgHeight) << 0;
-        } else {
-            width = imgWidth;
-            height = imgHeight;
-        }
-        if (maxWidth && width > maxWidth) {
-            width = maxWidth;
-            height = (imgHeight * width / imgWidth) << 0;
-        }
-        if (maxHeight && height > maxHeight) {
-            height = maxHeight;
-            width = (imgWidth * height / imgHeight) << 0;
-        }
-        var opt = { width : width, height : height };
+        if (width && !height) { height = (imgHeight * width / imgWidth) << 0; }
+        else if (height && !width) { width = (imgWidth * height / imgHeight) << 0; }
+        else { width = imgWidth; height = imgHeight; }
+        if (maxWidth && width > maxWidth) { width = maxWidth; height = (imgHeight * width / imgWidth) << 0; }
+        if (maxHeight && height > maxHeight) { height = maxHeight; width = (imgWidth * height / imgHeight) << 0; }
+        var opt = { width: width, height: height };
         for (var k in options) opt[k] = options[k];
 
         var tagName = target.tagName.toLowerCase();
-        if (tagName === 'img') {
-            target.src = renderImageToDataURL(this.srcImage, opt, doSquash);
-        } else if (tagName === 'canvas') {
-            renderImageToCanvas(this.srcImage, target, opt, doSquash);
-        }
-        if (typeof this.onrender === 'function') {
-            this.onrender(target);
-        }
-        if (callback) {
-            callback();
-        }
-        if (this.blob) {
-            this.blob = null;
-            URL.revokeObjectURL(this.srcImage.src);
-        }
+        if (tagName === 'img') { target.src = renderImageToDataURL(this.srcImage, opt, doSquash); }
+        else if (tagName === 'canvas') { renderImageToCanvas(this.srcImage, target, opt, doSquash); }
+        if (typeof this.onrender === 'function') { this.onrender(target); }
+        if (callback) { callback(); }
+        if (this.blob) { this.blob = null; URL.revokeObjectURL(this.srcImage.src); }
     };
 
-    /**
-     * Export class to global
-     */
-    if (typeof define === 'function' && define.amd) {
-        define([], function() { return MegaPixImage; }); // for AMD loader
-    } else if (typeof exports === 'object') {
-        module.exports = MegaPixImage; // for CommonJS
-    } else {
-        this.MegaPixImage = MegaPixImage;
-    }
+    // -------------------------
+    // Export as ESM default
+    // -------------------------
+    return MegaPixImage;
 
-})();
+}));

package/src/main.js

@@ -1,76 +1,34 @@
-/**
- * Created by yishide .
- */
 import Vue from 'vue';
 import VueRouter from 'vue-router';
 import App from './components/app.vue';
 import Routers from './router';
+import Config from './config/config';
+import dpzvc from './index';
 
-import Config from './config/config'
-// import Modal from './components/modal/index'
-// import Prompt from './components/prompt/index'
-
-
-// import Message from './components/message/index'
-
-import dpzvc from './index'
-
-Vue.use(dpzvc)
-
-
-    // var log = console.log;
-    // console.log = function () {
-    //     var args = Array.from(arguments);
-    //     args = args.map(arg => {
-    //         try {
-    //             return JSON.parse(JSON.stringify(arg));
-    //         } catch (e) {
-    //             return arg;
-    //         }
-    //     });
-    //
-    //     log.apply(console, args);
-    // };
-    //
-    // window.vConsole = require('./vconsole.min');
-    // require('./vconsole-resources.min');
-    // require('./vconsole-sources.min');
-
+// 安装自定义组件库
+Vue.use(dpzvc);
 
 Vue.use(VueRouter);
-// Vue.use(VueTouch);
-
-
-// 开启debug模式
-
 
+// 配置全局变量
 Vue.prototype.$Config = Config;
 
+// 创建全局事件总线
+window.EventBus = new Vue();
 
-let EventBus = new Vue();
 // 路由配置
-let router = new VueRouter({
-
-    history: process.env.NODE_ENV != 'production',
-    routes:Routers
+const router = new VueRouter({
+  mode: process.env.NODE_ENV !== 'production' ? 'hash' : 'hash', // VueRouter 3 兼容写法
+  routes: Routers
 });
 
-
-router.beforeEach((to,from,next) => {
-    // let title = to.meta.title || Config.doc_title;
-    // setPageTitle(title);
-    window.scrollTo(0, 0);
-    next();
+router.beforeEach((to, from, next) => {
+  window.scrollTo(0, 0);
+  next();
 });
-
-router.afterEach(() => {
-
-});
-
-window.EventBus = new Vue();
-
+// 根实例
 new Vue({
-    el: '#app',
-    router: router,
-    render: h => h(App)
-})
+  el: '#app',
+  router,
+  render: h => h(App)
+});