@opentiny/vue-modal - npm Package Compare versions

Comparing version 2.11.0 to 2.12.0

index.d.ts

@@ -17,2 +17,3 @@ /**
 export declare const confirm: any;
+export declare const popconfirm: any;
 export default TINYModal;

lib/index.js

@@ -20,2 +20,3 @@ function _extends() {
 import MobileFirstTemplate from "./mobile-first.js";
+import Popconfirm from "@opentiny/vue-popconfirm";
 var template = function template2(mode) {
@@ -101,3 +102,3 @@ if ("pc" === (process.env.TINY_MODE || mode)) {
   maskClosable: Boolean,
-  message: [String, Function, Object],
+  message: [String, Function],
   minHeight: {
@@ -129,3 +130,3 @@ type: [Number, String],
     type: [Number, String],
-    default: 15
+    default: 80
   },
@@ -139,4 +140,2 @@ type: {
   zIndex: [Number, String],
-  tiny_theme: String,
-  mode: null,
   description: String,
@@ -148,2 +147,4 @@ options: Array,
   },
+  confirmContent: String,
+  cancelContent: String,
   position: {
@@ -156,12 +157,14 @@ type: String,
   },
-  modalBoxClass: String,
-  confirmContent: String,
-  cancelContent: String,
+  customClass: String,
   confirmBtnProps: {
     type: Object,
-    default: {}
+    default: function _default8() {
+      return {};
+    }
   },
   cancelBtnProps: {
     type: Object,
-    default: {}
+    default: function _default9() {
+      return {};
+    }
   }
@@ -181,3 +184,3 @@ });
 });
-var version = "2.11.0";
+var version = "2.12.0";
 TINYModal.version = version;
@@ -200,4 +203,12 @@ TINYModal.model = {
           events.hide && events.hide.call(this, params);
-          $modal.beforeUnmouted();
+          if ($modal.beforeUnmouted) {
+            $modal.beforeUnmouted();
+          }
           resolve(params.type);
+        },
+        confirm: function confirm2(params) {
+          events.confirm && events.confirm.call(this, params);
+        },
+        show: function show(params) {
+          events.show && events.show.call(this, params);
         }
@@ -207,6 +218,12 @@ });
         el: document.createElement("div"),
-        propsData: options,
-        component: TINYModal
+        propsData: Object.assign({
+          "tiny_mode": TINYModal.tiny_mode,
+          "tiny_theme": TINYModal.tiny_theme
+        }, options),
+        component: options.componentType === "popconfirm" ? Popconfirm : TINYModal
       });
-      $modal.open();
+      var open = $modal[options.componentType === "popconfirm" ? "show" : "open"];
+      if (open) {
+        open();
+      }
       setTimeout(function() {
@@ -220,19 +237,23 @@ return modalPromise.vm = $modal;
 var modal = Modal;
-var types = ["alert", "confirm", "message"];
-types.forEach(function(type, index) {
-  var defOpts = {
-    showFooter: true
-  };
-  if (index === 2) {
-    defOpts = {
-      mask: false,
-      lockView: false,
-      showHeader: false,
-      showClose: false
-    };
-  }
-  defOpts.type = type;
-  if (index === 1) {
-    defOpts.status = "question";
-  }
+var types = ["alert", "confirm", "message", "popconfirm"];
+var defOpts = {
+  alert: {
+    showFooter: true,
+    type: "alert"
+  },
+  confirm: {
+    showFooter: true,
+    status: "question",
+    type: "confirm"
+  },
+  message: {
+    mask: false,
+    lockView: false,
+    showHeader: false,
+    showClose: false,
+    type: "message"
+  },
+  popconfirm: {}
+};
+types.forEach(function(type) {
   TINYModal[type] = Modal[type] = function(message2, title, options) {
@@ -251,5 +272,6 @@ var opts;
     return modal(_extends({
-      message: message2.toString(),
-      type
-    }, defOpts, opts, options));
+      message: message2.toString()
+    }, defOpts[type], opts, options, {
+      componentType: type
+    }));
   };
@@ -260,2 +282,3 @@ });
 var confirm = Modal.confirm;
+var popconfirm = Modal.popconfirm;
 TINYModal.installed = false;
@@ -278,2 +301,3 @@ setupComponent.TINYModal = {
     root[prefix + "confirm"] = Modal.confirm;
+    root[prefix + "popconfirm"] = Modal.popconfirm;
   }
@@ -289,3 +313,4 @@ };
   TINYModal as default,
-  message
+  message,
+  popconfirm
 };

lib/mobile-first.js

@@ -20,3 +20,3 @@ function _extends() {
 import CheckboxGroup from "@opentiny/vue-checkbox-group";
-import { IconHelpSolid, IconInfoSolid, IconSuccess, IconWarning, IconError, IconLoading, IconInfoCircle, IconSuccessful, IconCueL, IconOperationfaildL, IconMinscreenLeft, IconFullscreenLeft, IconClose } from "@opentiny/vue-icon";
+import { iconHelpSolid, iconInfoSolid, iconSuccess, iconWarning, iconError, iconLoading, iconInfoCircle, iconSuccessful, iconCueL, iconOperationfaildL, iconMinscreenLeft, iconFullscreenLeft, iconClose } from "@opentiny/vue-icon";
 function normalizeComponent(scriptExports, render, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
@@ -80,29 +80,22 @@ var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
 var STATUS_MAPPING_COMPINENT = {
-  QUESTION: IconHelpSolid(mode),
-  INFO: IconInfoSolid(mode),
-  SUCCESS: IconSuccess(mode),
-  WARNING: IconWarning(mode),
-  ERROR: IconError(mode),
-  LOADING: IconLoading(mode)
+  QUESTION: iconHelpSolid(mode),
+  INFO: iconInfoSolid(mode),
+  SUCCESS: iconSuccess(mode),
+  WARNING: iconWarning(mode),
+  ERROR: iconError(mode),
+  LOADING: iconLoading(mode)
 };
 var MOBILE_STATUS_MAPPING_COMPINENT = {
-  INFO: IconInfoCircle(mode),
-  SUCCESS: IconSuccessful(mode),
-  WARNING: IconCueL(mode),
-  ERROR: IconOperationfaildL(mode),
-  LOADING: IconLoading(mode)
+  INFO: iconInfoCircle(mode),
+  SUCCESS: iconSuccessful(mode),
+  WARNING: iconCueL(mode),
+  ERROR: iconOperationfaildL(mode),
+  LOADING: iconLoading(mode)
 };
 var __vue2_script = defineComponent({
-  emits: ["zoom", "update:modelValue", "show", "hide", "custom-mousemove", "custom-mouseup", "custom-mousedown"],
   props: _extends({}, $props, {
-    animat: {
-      type: Boolean,
-      default: function _default() {
-        return true;
-      }
-    },
     beforeClose: Function,
     duration: {
       type: [Number, String],
-      default: function _default2() {
+      default: function _default() {
         return 3e3;
@@ -123,3 +116,3 @@ }
       type: Boolean,
-      default: function _default3() {
+      default: function _default2() {
         return true;
@@ -134,3 +127,3 @@ }
       type: Boolean,
-      default: function _default4() {
+      default: function _default3() {
         return true;
@@ -143,3 +136,3 @@ }
       type: [Number, String],
-      default: function _default5() {
+      default: function _default4() {
         return 200;
@@ -150,3 +143,3 @@ }
       type: [Number, String],
-      default: function _default6() {
+      default: function _default5() {
         return 340;
@@ -175,3 +168,2 @@ }
     },
-    vSize: String,
     width: [Number, String],
@@ -186,4 +178,7 @@ zIndex: [Number, String],
     confirmContent: String,
-    cancelContent: String
+    cancelContent: String,
+    position: String,
+    customClass: String
   }),
+  emits: ["update:modelValue", "show", "close", "confirm", "cancel", "hide", "custom-mousedown", "custom-mouseup", "custom-mousemove"],
   components: {
@@ -212,3 +207,3 @@ Button,
     var _this = this;
-    var state = this.state, slots = this.slots, type = this.type, resize = this.resize, status = this.status, showHeader = this.showHeader, showFooter = this.showFooter, title = this.title, message = this.message, mask = this.mask, t = this.t, description = this.description, options = this.options, showClose = this.showClose, confirmContent = this.confirmContent, cancelContent = this.cancelContent, m = this.m, position = this.position, modalBoxClass = this.modalBoxClass;
+    var state = this.state, slots = this.slots, type = this.type, resize = this.resize, status = this.status, showHeader = this.showHeader, showFooter = this.showFooter, title = this.title, message = this.message, mask = this.mask, t = this.t, description = this.description, options = this.options, showClose = this.showClose, confirmContent = this.confirmContent, cancelContent = this.cancelContent, m = this.m, position = this.position, customClass = this.customClass;
     var zoomLocat = state.zoomLocat, visible = state.visible, contentVisible = state.contentVisible, modalTop = state.modalTop, isMsg = state.isMsg;
@@ -245,2 +240,5 @@ var defaultSlot = slots.default;
       {
+        attrs: {
+          "data-tag": "tiny-footer-bottom"
+        },
         class: "hidden sm:block"
@@ -256,3 +254,3 @@ },
         }
-      }, cancelContent || t("ui.buttonMessage.cancel")) : null, h(Button, {
+      }, cancelContent || t("ui.button.cancel")) : null, h(Button, {
         class: "ml-2 min-w-[theme(spacing.18)]",
@@ -266,3 +264,3 @@ props: {
         }
-      }, confirmContent || t("ui.buttonMessage.confirm"))]
+      }, confirmContent || t("ui.button.confirm"))]
     ), h(
@@ -272,2 +270,5 @@ "div",
       {
+        attrs: {
+          "data-tag": "tiny-footer-bottom"
+        },
         class: "flex sm:hidden text-base justify-center"
@@ -279,3 +280,3 @@ },
           type: "text",
-          buttonClass: "flex-1 text-color-text-secondary active:text-color-text-secondary"
+          customClass: "flex-1 text-color-text-secondary active:text-color-text-secondary"
         },
@@ -291,3 +292,3 @@ on: {
           type: "text",
-          buttonClass: "flex-1 text-color-brand active:text-color-brand"
+          customClass: "flex-1 text-color-brand active:text-color-brand"
         },
@@ -303,4 +304,4 @@ on: {
       },
-      class: ["fixed inset-0 w-full h-full text-sm text-color-text-primary transition-top ease-out duration-300", {
-        'before:content-[""] before:fixed before:inset-0 before:w-full before:h-full before:opacity-30 before:bg-black': mask,
+      class: ["fixed left-0 right-0 top-0 bottom-0 w-full h-full text-sm text-color-text-primary transition-top ease-out duration-300", {
+        'before:content-[""] before:fixed before:left-0 before:right-0 before:top-0 before:bottom-0 before:w-full before:h-full before:bg-color-bg-7': mask,
         "before:pointer-events-none pointer-events-none": !mask,
@@ -323,3 +324,3 @@ "hidden": !contentVisible && !visible
       },
-      class: m("absolute pointer-events-auto box-border", {
+      class: m("absolute pointer-events-auto box-border p-3 sm:p-0", {
         "bottom-0 sm:bottom-auto top-auto w-full flex sm:block max-h-full": !isMsg
@@ -341,7 +342,7 @@ }, {
       }, {
-        "bg-color-icon-primary opacity-80 sm:opacity-100 text-white sm:text-color-text-primary sm:bg-white ": type === "message"
-      }, modalBoxClass)
+        "bg-color-icon-primary opacity-80 sm:opacity-100 text-color-text-inverse sm:text-color-text-primary sm:bg-color-bg-1 ": type === "message"
+      }, customClass)
     }, [h("div", {
       class: ["flex flex-col w-full max-h-full rounded-lg sm:rounded  overflow-hidden", {
-        "shadow-xl bg-white": type !== "message"
+        "shadow-xl bg-color-bg-1": type !== "message"
       }, {
@@ -351,6 +352,9 @@ "h-full": zoomLocat
     }, [[showHeader || type === "message" ? h("div", {
-      class: ["flex text-sm items-center", {
+      attrs: {
+        "data-tag": "tiny-message"
+      },
+      class: ["flex text-sm items-center justify-center sm:justify-start", {
         "px-6 pt-5 sm:pt-6 leading-6": type !== "message"
       }, {
-        "leading-4 sm:leading-5.5 sm:h-auto bg-color-icon-primary text-white sm:text-color-text-primary sm:bg-white": type === "message"
+        "leading-4 sm:leading-5.5 sm:h-auto bg-color-icon-primary text-color-text-inverse sm:text-color-text-primary sm:bg-color-bg-1": type === "message"
       }],
@@ -364,2 +368,5 @@ on: {
       },
+      attrs: {
+        "data-tag": "tiny-status-icon"
+      },
       class: m("hidden sm:inline-block mr-2 fill-current", type === "message" ? "h-4.5 w-4.5 self-start shrink-0 mt-0.5" : "h-6 w-auto", {
@@ -380,3 +387,3 @@ "text-color-success": status === "success"
     })] : null, h("span", {
-      class: ["flex-auto text-base sm:text-sm", {
+      class: ["flex-none sm:flex-auto text-base sm:text-sm w-full flex-1", {
         "truncate font-semibold": type !== "message"
@@ -389,3 +396,3 @@ }, {
       }
-    }, type === "message" ? messageHtml : title || t("ui.alert.title")), resize ? h(zoomLocat ? IconMinscreenLeft(mode) : IconFullscreenLeft(mode), {
+    }, type === "message" ? messageHtml : title || t("ui.alert.title")), resize ? h(zoomLocat ? iconMinscreenLeft(mode) : iconFullscreenLeft(mode), {
       class: "flex-none h-4 w-4 ml-2 cursor-pointer",
@@ -395,7 +402,7 @@ on: {
       }
-    }) : null, showClose ? h(IconClose(mode), {
-      class: ["flex-none cursor-pointer", {
+    }) : null, showClose ? h(iconClose(mode), {
+      class: ["hidden sm:block flex-none cursor-pointer", {
         "h-4 w-4 ml-2": type !== "message"
       }, {
-        "hidden sm:block w-4 h-4 ml-4 self-start sm:mt-0.5 sm:translate-y-px": type === "message"
+        "w-4 h-4 ml-4 self-start sm:mt-0.5 sm:translate-y-px": type === "message"
       }],
@@ -422,2 +429,5 @@ on: {
     }, [optionsComponent]) : null])]) : null, showFooter ? h("div", {
+      attrs: {
+        "data-tag": "tiny-modal-footer"
+      },
       class: "py-2.5 sm:pb-6 sm:pt-0 px-6 border-t-0.5 sm:border-t-0 border-color-border-separator text-center sm:text-right"
@@ -424,0 +434,0 @@ }, footerSlot ? footerSlot.call(this, {

package.json

 {
   "name": "@opentiny/vue-modal",
-  "version": "2.11.0",
+  "version": "2.12.0",
   "description": "",
@@ -10,6 +10,6 @@ "main": "./lib/index.js",
   "dependencies": {
-    "@opentiny/vue-renderless": "~3.11.0",
-    "@opentiny/vue-common": "~2.11.0",
-    "@opentiny/vue-button": "~2.11.0",
-    "@opentiny/vue-locale": "~2.11.0"
+    "@opentiny/vue-renderless": "~3.12.0",
+    "@opentiny/vue-common": "~2.12.0",
+    "@opentiny/vue-button": "~2.12.0",
+    "@opentiny/vue-locale": "~2.12.0"
   },
@@ -16,0 +16,0 @@ "license": "MIT",

src/index.d.ts

@@ -79,3 +79,3 @@ export declare const $constants: {
     maskClosable: BooleanConstructor;
-    message: (ObjectConstructor | StringConstructor | FunctionConstructor)[];
+    message: (StringConstructor | FunctionConstructor)[];
     minHeight: {
@@ -112,4 +112,2 @@ type: (StringConstructor | NumberConstructor)[];
     zIndex: (StringConstructor | NumberConstructor)[];
-    tiny_theme: StringConstructor;
-    mode: null;
     description: StringConstructor;
@@ -121,2 +119,4 @@ options: ArrayConstructor;
     };
+    confirmContent: StringConstructor;
+    cancelContent: StringConstructor;
     position: {
@@ -127,12 +127,10 @@ type: StringConstructor;
     };
-    modalBoxClass: StringConstructor;
-    confirmContent: StringConstructor;
-    cancelContent: StringConstructor;
+    customClass: StringConstructor;
     confirmBtnProps: {
         type: ObjectConstructor;
-        default: {};
+        default: () => {};
     };
     cancelBtnProps: {
         type: ObjectConstructor;
-        default: {};
+        default: () => {};
     };
@@ -143,2 +141,3 @@ tiny_mode: StringConstructor;
     tiny_renderless: FunctionConstructor;
+    tiny_theme: StringConstructor;
     tiny_chart_theme: ObjectConstructor;
@@ -145,0 +144,0 @@ };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

43065

increased by2.96%

Lines of code

1290

increased by2.79%

Dependency changes

• + Added@opentiny/vue-button@2.12.0(transitive)

• + Added@opentiny/vue-common@2.12.0(transitive)

• + Added@opentiny/vue-icon@2.12.0(transitive)

• + Added@opentiny/vue-locale@2.12.0(transitive)

• + Added@opentiny/vue-renderless@3.12.1(transitive)

• + Added@opentiny/vue-theme@3.12.1(transitive)

• + Added@opentiny/vue-theme-mobile@3.12.0(transitive)

• - Removed@opentiny/vue-button@2.11.0(transitive)

• - Removed@opentiny/vue-common@2.11.0(transitive)

• - Removed@opentiny/vue-icon@2.11.0(transitive)

• - Removed@opentiny/vue-locale@2.11.0(transitive)

• - Removed@opentiny/vue-renderless@3.11.8(transitive)

• - Removed@opentiny/vue-theme@3.11.6(transitive)

• - Removed@opentiny/vue-theme-mobile@3.11.1(transitive)

• Updated@opentiny/vue-button@~2.12.0

• Updated@opentiny/vue-common@~2.12.0

• Updated@opentiny/vue-locale@~2.12.0

• Updated@opentiny/vue-renderless@~3.12.0