dpzvc-ui 1.0.0 → 1.2.0

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "dpzvc-ui",
-  "version": "1.0.0",
+  "version": "1.2.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,55 +26,61 @@
   "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",
     "gulp-clean-css": "^4.3.0",
     "gulp-cli": "^2.3.0",
+    "gulp-header": "^2.0.9",
     "gulp-less": "^5.0.0",
     "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

@@ -1,8 +1,10 @@
 /**
- * Created by admin on 2017/5/15.
+ * Created by admin on 2025/12/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 +17,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'
@@ -29,55 +31,119 @@ import CellSwipe from './components/cell-swipe'
 import Badge from './components/badge'
 import Card from './components/card'
 
-const dpzvc = {
-
-    VButton,
-    CheckBox,
-    CheckBoxGroup:CheckBox.group,
-    Radio,
-    RadioGroup:Radio.group,
-    Header,
-    Message,
-    Modal,
-    Prompt,
-    Picker,
-    Swipe,
-    Tab,
-    SlideBar,
-    TextBar,
-    Number:TextBar.Number,
-    Upload,
-    ActionSheet,
-    SwitchBar,
-    Rater,
-    Spinner,
-    LoadMore,
-    Popup,
-    Indicator,
-    Progress,
-    ToTop,
-    Cell,
-    CellSwipe,
-    Badge,
-    Card
-};
-
-const install = (Vue,options)=>{
-
-    Object.keys(dpzvc).forEach((key)=>{
-        Vue.component(key,dpzvc[key])
-    });
-
-
-    Vue.prototype.$Message = Message;
-    Vue.prototype.$Modal = Modal;
-    Vue.prototype.$Prompt = Prompt;
-    Vue.prototype.$Indicator = Indicator
+/* ========= 组件集合（用于全量注册） ========= */
+
+const components = {
+  VButton,
+  CheckBox,
+  CheckBoxGroup: CheckBox.group,
+  Radio,
+  RadioGroup: Radio.group,
+  DpHeader: Header,
+  Picker,
+  Swipe,
+  Tab,
+  SlideBar,
+  TextBar,
+  Number: TextBar.Number,
+  Upload,
+  ActionSheet,
+  SwitchBar,
+  Rater,
+  Spinner,
+  LoadMore,
+  Popup,
+  DpProgress: Progress,
+  ToTop,
+  Cell,
+  CellSwipe,
+  Badge,
+  Card
+}
+
+/* ========= 服务组件 ========= */
+
+const services = {
+  Message,
+  Modal,
+  Prompt,
+  Indicator
+}
+
+/* ========= 给“单个组件”补 install（关键） ========= */
+
+Object.keys(components).forEach(key => {
+  const component = components[key]
+  if (!component.install) {
+    component.install = function (Vue) {
+      Vue.component(key, component)
+    }
+  }
+})
 
+Object.keys(services).forEach(key => {
+  const service = services[key]
+  if (!service.install) {
+    service.install = function (Vue) {
+      Vue.prototype[`$${key}`] = service
+    }
+  }
+})
+
+/* ========= 全量 install ========= */
+
+const install = function (Vue) {
+  if (install.installed) return
+  install.installed = true
+
+  // 注册组件
+  Object.keys(components).forEach(key => {
+    Vue.component(key, components[key])
+  })
+
+  // 注册服务
+  Object.keys(services).forEach(key => {
+    Vue.prototype[`$${key}`] = services[key]
+  })
 }
 
+/* ========= 自动安装（script 方式） ========= */
+
 if (typeof window !== 'undefined' && window.Vue) {
-    install(window.Vue);
+  install(window.Vue)
+}
+
+/* ========= 按需导出 + 默认导出 ========= */
+
+export {
+  VButton,
+  CheckBox,
+  Header,
+  Message,
+  Modal,
+  Prompt,
+  Picker,
+  Radio,
+  Swipe,
+  Tab,
+  SlideBar,
+  TextBar,
+  Upload,
+  ActionSheet,
+  SwitchBar,
+  Rater,
+  Spinner,
+  LoadMore,
+  Popup,
+  Indicator,
+  Progress,
+  ToTop,
+  Cell,
+  CellSwipe,
+  Badge,
+  Card
 }
 
-module.exports = Object.assign(dpzvc, {install});
+export default {
+  install
+}

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;
 
-})();
+}));