Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@opentiny/vue-modal

Package Overview
Dependencies
Maintainers
1
Versions
65
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@opentiny/vue-modal - npm Package Compare versions

Comparing version 3.1.0-alpha.0 to 3.5.0-alpha.0

index.d.ts

77

lib/index.js

@@ -6,3 +6,2 @@ import { $prefix, setup, h, setupComponent, createComponent } from '@opentiny/vue-common';

import { iconHelpSolid, iconInfoSolid, iconSuccess, iconWarning, iconError, iconLoading, iconMinscreenLeft, iconFullscreenLeft, iconClose } from '@opentiny/vue-icon';
import '@opentiny/vue-theme/modal/index.css';

@@ -82,7 +81,7 @@ function ownKeys(object, enumerableOnly) {

STATUS_MAPPING_CLASSS: {
INFO: 'tiny-grid-svg__info',
SUCCESS: 'tiny-grid-svg__success',
WARNING: 'tiny-grid-svg__warning',
ERROR: 'tiny-grid-svg__error',
LOADING: 'tiny-grid-svg__refresh roll'
INFO: 'tiny-modal-svg__info',
SUCCESS: 'tiny-modal-svg__success',
WARNING: 'tiny-modal-svg__warning',
ERROR: 'tiny-modal-svg__error',
LOADING: 'tiny-modal-svg__refresh roll'
}

@@ -203,4 +202,4 @@ };

status = this.status,
showHeader = this.showHeader,
showFooter = this.showFooter,
showHeader = this.showHeader;
var showFooter = this.showFooter,
title = this.title,

@@ -229,3 +228,3 @@ message = this.message,

return h('div', {
class: ['tiny-grid-modal__wrapper', "type__".concat(type), (_ref = {}, _defineProperty(_ref, "size__".concat(vSize), vSize), _defineProperty(_ref, "status__".concat(status), typeof status === 'string'), _defineProperty(_ref, "is__animat", animat), _defineProperty(_ref, "lock__scroll", lockScroll), _defineProperty(_ref, "lock__view", lockView), _defineProperty(_ref, "is__mask", mask), _defineProperty(_ref, "is__maximize", zoomLocat), _defineProperty(_ref, "is__visible", contentVisible), _defineProperty(_ref, "active", visible), _ref)],
class: ['tiny-modal', 'tiny-modal__wrapper', "type__".concat(type), (_ref = {}, _defineProperty(_ref, "size__".concat(vSize), vSize), _defineProperty(_ref, "status__".concat(status), typeof status === 'string'), _defineProperty(_ref, "is__animat", animat), _defineProperty(_ref, "lock__scroll", lockScroll), _defineProperty(_ref, "lock__view", lockView), _defineProperty(_ref, "is__mask", mask), _defineProperty(_ref, "is__maximize", zoomLocat), _defineProperty(_ref, "is__visible", contentVisible), _defineProperty(_ref, "active", visible), _ref)],
style: {

@@ -239,6 +238,6 @@ zIndex: this.state.modalZindex,

}, [h('div', {
class: 'tiny-grid-modal__box',
class: 'tiny-modal__box',
ref: 'modalBox'
}, [showHeader ? h('div', {
class: 'tiny-grid-modal__header',
class: 'tiny-modal__header',
on: {

@@ -248,11 +247,11 @@ mousedown: this.mousedownEvent

}, [status ? h('div', {
class: 'tiny-grid-modal__status-wrapper'
class: 'tiny-modal__status-wrapper'
}, [typeof status === 'string' ? h(STATUS_MAPPING_COMPINENT[status.toUpperCase()], {
class: [constants.STATUS_MAPPING_CLASSS[status.toUpperCase()]]
}) : h(status, {
class: ['tiny-grid-modal__status-icon']
class: ['tiny-modal__status-icon']
})]) : null, h('span', {
class: 'tiny-grid-modal__title'
class: 'tiny-modal__title'
}, title || t('ui.alert.title')), resize ? h(zoomLocat ? iconMinscreenLeft() : iconFullscreenLeft(), {
class: ['tiny-grid-modal__zoom-btn', 'trigger__btn'],
class: ['tiny-modal__zoom-btn', 'trigger__btn'],
on: {

@@ -262,3 +261,3 @@ click: this.toggleZoomEvent

}) : null, h(iconClose(), {
class: ['tiny-grid-modal__close-btn', 'trigger__btn'],
class: ['tiny-modal__close-btn', 'trigger__btn'],
on: {

@@ -268,17 +267,17 @@ click: this.closeEvent

})]) : null, h('div', {
class: 'tiny-grid-modal__body'
class: 'tiny-modal__body'
}, [isMsg && status ? h('div', {
class: 'tiny-grid-modal__status-wrapper'
class: 'tiny-modal__status-wrapper'
}, [typeof status === 'string' ? h(STATUS_MAPPING_COMPINENT[status.toUpperCase()], {
class: [constants.STATUS_MAPPING_CLASSS[status.toUpperCase()]]
}) : h(status, {
class: ['tiny-grid-modal__status-icon']
class: ['tiny-modal__status-icon']
})]) : null, h('div', {
class: 'tiny-grid-modal__content'
class: 'tiny-modal__content'
}, defaultSlot ? defaultSlot.call(this, {
$modal: this
}, h) : [h('div', {
class: 'tiny-grid-modal__text'
class: 'tiny-modal__text'
}, typeof message === 'function' ? message.call(this, h) : message)])]), showFooter ? h('div', {
class: 'tiny-grid-modal__footer'
class: 'tiny-modal__footer'
}, footerSlot ? footerSlot.call(this, {

@@ -299,3 +298,3 @@ $modal: this,

}, t('ui.button.cancel')) : null]) : null, !isMsg && resize ? h('span', {
class: 'tiny-grid-modal__resize'
class: 'tiny-modal__resize'
}, ['wl', 'wr', 'swst', 'sest', 'st', 'swlb', 'selb', 'sb'].map(function (type) {

@@ -315,3 +314,33 @@ return h('span', {

script.version = '3.1.0-alpha.0';
function styleInject(css, ref) {
if ( ref === void 0 ) ref = {};
var insertAt = ref.insertAt;
if (!css || typeof document === 'undefined') { return; }
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (insertAt === 'top') {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
var css_248z = ".tiny-modal{--ti-modal-font-size:var(--ti-common-font-size-base);--ti-modal-text-color:var(--ti-base-color-info-normal);--ti-modal-font-family:Helvetica,Arial,'Microsoft YaHei',sans-serif;--ti-modal-primary-icon-color:var(--ti-common-color-prompt);--ti-modal-success-icon-color:var(--ti-common-color-success);--ti-modal-error-icon-color:var(--ti-common-color-error);--ti-modal-warning-icon-color:var(--ti-common-color-warn);--ti-modal-loading-icon-color:var(--ti-common-color-prompt);--ti-modal-alert-font-size:22px;--ti-modal-header-font-size:var(--ti-common-font-size-3);--ti-modal-header-text-color:var(--ti-common-color-text-primary);--ti-modal-header-font-weight:var(--ti-base-font-weight-bold);--ti-modal-header-padding-top:32px;--ti-modal-header-padding-horizontal:32px;--ti-modal-header-padding-bottom:12px;--ti-modal-body-padding-top:0;--ti-modal-body-padding-horizontal:32px;--ti-modal-body-padding-bottom:0;--ti-modal-footer-padding-top:28px;--ti-modal-footer-padding-horizontal:32px;--ti-modal-footer-padding-bottom:32px;--ti-modal-footer-btn-border-radius:var(--ti-common-border-radius-normal);--ti-modal-close-btn-font-size:var(--ti-common-font-size-1);--ti-modal-close-btn-top:13px;--ti-modal-close-btn-scale:scale(1, 1);--ti-modal-close-btn-padding-horizontal-vertical:0;--ti-modal-small-btn-font-size:var(--ti-common-font-size-2);--ti-modal-box-background-color:var(--ti-base-color-light);--ti-modal-btn-text-color:var(--ti-base-color-common-5);--ti-modal-box-shadow:var(--ti-common-shadow-4-down);--ti-modal-box-border-radius:var(--ti-common-border-radius-normal);--ti-modal-border-color:rgba(0, 0, 0, 0.2);--ti-modal-close-btn-background-color-hover:var(--ti-base-color-light);--ti-modal-footer-default-display-button:inline-block;--ti-modal-box-width:400px}.tiny-modal__wrapper{display:none;position:fixed;top:0;left:0;width:100%;height:100%;font-size:var(--ti-modal-font-size);color:var(--ti-modal-text-color);font-family:var(--ti-modal-font-family, Helvetica, Arial, 'Microsoft YaHei', sans-serif);-webkit-transition:top .4s;transition:top .4s}.tiny-modal__wrapper.active{display:block}.tiny-modal__wrapper.is__visible.is__mask:before{background-color:rgba(0,0,0,.3)}.tiny-modal__wrapper.is__visible.type__message .tiny-modal__box{-webkit-transform:translateY(0);transform:translateY(0)}.tiny-modal__wrapper.is__visible:not(.type__message) .tiny-modal__box:not(.is__drag){top:15vh;-webkit-transition:top 0s ease-in,opacity .4s ease-in;transition:top 0s ease-in,opacity .4s ease-in}.tiny-modal__wrapper.is__visible .tiny-modal__box{opacity:1;visibility:visible}.tiny-modal__wrapper:not(.lock__view){pointer-events:none}.tiny-modal__wrapper.lock__scroll{overflow:hidden}.tiny-modal__wrapper:not(.lock__scroll){overflow:auto}.tiny-modal__wrapper:not(.type__message) .tiny-modal__text{font-size:var(--ti-common-font-size-base);color:var(--ti-common-color-text-secondary);line-height:var(--ti-common-line-height-number)}.tiny-modal__wrapper.is__mask:before,.tiny-modal__wrapper.lock__view:before{content:'';position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;pointer-events:auto}.tiny-modal__wrapper.is__animat.is__mask:before{-webkit-transition:background-color,.2s,ease-in-out;transition:background-color,.2s,ease-in-out}.tiny-modal__wrapper.is__animat.type__message .tiny-modal__box:not(.is__drag){-webkit-transition:all,.2s,ease-out;transition:all,.2s,ease-out}.tiny-modal__wrapper.size__mini,.tiny-modal__wrapper.size__small{font-size:var(--ti-modal-font-size)}.tiny-modal__wrapper.size__mini .tiny-modal__box,.tiny-modal__wrapper.size__small .tiny-modal__box{padding:6px 0}.tiny-modal__wrapper.size__mini .tiny-modal__body,.tiny-modal__wrapper.size__small .tiny-modal__body{padding:4px 14px 10px 14px}.tiny-modal__wrapper.size__mini .tiny-modal__footer,.tiny-modal__wrapper.size__small .tiny-modal__footer{padding:4px 14px 8px 14px}.tiny-modal__wrapper.size__mini .tiny-modal__header,.tiny-modal__wrapper.size__small .tiny-modal__header{font-size:var(--ti-modal-header-font-size);padding:6px 30px 8px 14px}.tiny-modal__wrapper.size__mini .tiny-modal__close-btn,.tiny-modal__wrapper.size__mini .tiny-modal__zoom-btn,.tiny-modal__wrapper.size__small .tiny-modal__close-btn,.tiny-modal__wrapper.size__small .tiny-modal__zoom-btn{font-size:var(--ti-modal-small-btn-font-size);top:10px}.tiny-modal__wrapper.type__alert .tiny-modal__body,.tiny-modal__wrapper.type__confirm .tiny-modal__body,.tiny-modal__wrapper.type__message .tiny-modal__body{white-space:normal;word-break:break-word}.tiny-modal__wrapper.type__message{text-align:center}.tiny-modal__wrapper.type__message .tiny-modal__box{display:inline-block;padding:24px;margin-top:0;width:auto;-webkit-box-shadow:0 0 8px 0 rgba(0,0,0,.1);box-shadow:0 0 8px 0 rgba(0,0,0,.1);-webkit-transform:translateY(-10%);transform:translateY(-10%)}.tiny-modal__wrapper.type__message .tiny-modal__box .tiny-modal__body:after{content:'';display:block;clear:both;height:0;overflow:hidden;visibility:hidden}.tiny-modal__wrapper.type__message .tiny-modal__box .tiny-modal__content{max-width:800px;float:left}.tiny-modal__wrapper.type__message .tiny-modal__status-wrapper{font-size:var(--ti-modal-small-btn-font-size);padding-right:10px}.tiny-modal__wrapper.type__alert .tiny-modal__box,.tiny-modal__wrapper.type__confirm .tiny-modal__box,.tiny-modal__wrapper.type__modal .tiny-modal__box{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:absolute;left:50%;top:0;-webkit-box-shadow:var(--ti-modal-box-shadow);box-shadow:var(--ti-modal-box-shadow);border:1px solid var(--ti-modal-border-color)}.tiny-modal__wrapper.type__alert .tiny-modal__box .tiny-modal__header,.tiny-modal__wrapper.type__confirm .tiny-modal__box .tiny-modal__header,.tiny-modal__wrapper.type__modal .tiny-modal__box .tiny-modal__header{cursor:move}.tiny-modal__wrapper.type__modal .tiny-modal__body{overflow:auto}.tiny-modal__wrapper.type__modal .tiny-modal__body .tiny-modal__content{overflow:auto}.tiny-modal__wrapper.type__alert .tiny-modal__status-wrapper,.tiny-modal__wrapper.type__confirm .tiny-modal__status-wrapper{font-size:var(--ti-modal-alert-font-size);padding:0 10px 0 2px}.tiny-modal__wrapper.status__info .tiny-modal__status-wrapper{fill:var(--ti-modal-primary-icon-color)}.tiny-modal__wrapper.status__question .tiny-modal__status-wrapper,.tiny-modal__wrapper.status__warning .tiny-modal__status-wrapper{fill:var(--ti-modal-warning-icon-color)}.tiny-modal__wrapper.status__success .tiny-modal__status-wrapper{fill:var(--ti-modal-success-icon-color)}.tiny-modal__wrapper.status__error .tiny-modal__status-wrapper{fill:var(--ti-modal-error-icon-color)}.tiny-modal__wrapper.status__loading .tiny-modal__status-wrapper{fill:var(--ti-modal-loading-icon-color)}.tiny-modal__wrapper.is__maximize .tiny-modal__box .tiny-modal__header{cursor:default}.tiny-modal__wrapper.is__maximize .tiny-modal__resize .sb-resize,.tiny-modal__wrapper.is__maximize .tiny-modal__resize .selb-resize,.tiny-modal__wrapper.is__maximize .tiny-modal__resize .sest-resize,.tiny-modal__wrapper.is__maximize .tiny-modal__resize .st-resize,.tiny-modal__wrapper.is__maximize .tiny-modal__resize .swlb-resize,.tiny-modal__wrapper.is__maximize .tiny-modal__resize .swst-resize,.tiny-modal__wrapper.is__maximize .tiny-modal__resize .wl-resize,.tiny-modal__wrapper.is__maximize .tiny-modal__resize .wr-resize{display:none}.tiny-modal__box{width:var(--ti-modal-box-width);background-color:var(--ti-modal-box-background-color);border-radius:var(--ti-modal-box-border-radius);font-size:var(--ti-modal-header-font-size);-webkit-box-shadow:var(--ti-common-shadow-4-down);box-shadow:var(--ti-common-shadow-4-down);text-align:left;pointer-events:auto;visibility:hidden;opacity:0}.tiny-modal__box.is__drag{cursor:move}.tiny-modal__box.is__drag .tiny-modal__body:after,.tiny-modal__box.is__drag .tiny-modal__footer:after{content:'';position:absolute;top:0;left:0;width:100%;height:100%}.tiny-modal__box.is__drag .tiny-modal__body{overflow:hidden}.tiny-modal__box.is__drag .tiny-modal__body .tiny-modal__content{overflow:hidden}.tiny-modal__status-wrapper{-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.tiny-modal__status-icon{font-style:normal}.tiny-modal__content{width:100%;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.tiny-modal__body,.tiny-modal__footer,.tiny-modal__header{position:relative}.tiny-modal__body{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;padding:var(--ti-modal-body-padding-top) var(--ti-modal-body-padding-horizontal) var(--ti-modal-body-padding-bottom)}.tiny-modal__header{-ms-flex-negative:0;flex-shrink:0;color:var(--ti-modal-header-text-color);font-size:var(--ti-modal-header-font-size);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-weight:var(--ti-modal-header-font-weight);border-bottom:none;padding:var(--ti-modal-header-padding-top) var(--ti-modal-header-padding-horizontal) var(--ti-modal-header-padding-bottom);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.tiny-modal__close-btn,.tiny-modal__zoom-btn{font-size:var(--ti-modal-close-btn-font-size);position:absolute;right:24px;top:var(--ti-modal-close-btn-top);z-index:1;fill:var(--ti-modal-btn-text-color);-webkit-transform:var(--ti-modal-close-btn-scale);transform:var(--ti-modal-close-btn-scale);cursor:pointer;padding:var(--ti-modal-close-btn-padding-horizontal-vertical);border-radius:4px}.tiny-modal__close-btn:hover,.tiny-modal__zoom-btn:hover{fill:var(--ti-modal-btn-text-color);background-color:var(--ti-modal-close-btn-background-color-hover)}.tiny-modal__zoom-btn{right:44px;border-color:#c0c4cc}.tiny-modal__zoom-btn:hover{border-color:#606266}.tiny-modal__footer{-ms-flex-negative:0;flex-shrink:0;text-align:center;padding:var(--ti-modal-footer-padding-top) var(--ti-modal-footer-padding-horizontal) var(--ti-modal-footer-padding-bottom)}.tiny-modal__footer .tiny-button{border-radius:var(--ti-modal-footer-btn-border-radius)}.tiny-modal__footer .tiny-button--default{display:var(--ti-modal-footer-default-display-button)}.tiny-modal__resize .sb-resize,.tiny-modal__resize .selb-resize,.tiny-modal__resize .sest-resize,.tiny-modal__resize .st-resize,.tiny-modal__resize .swlb-resize,.tiny-modal__resize .swst-resize,.tiny-modal__resize .wl-resize,.tiny-modal__resize .wr-resize{position:absolute;z-index:100}.tiny-modal__resize .wl-resize,.tiny-modal__resize .wr-resize{width:8px;height:100%;top:0;cursor:w-resize}.tiny-modal__resize .wl-resize{left:-3px}.tiny-modal__resize .wr-resize{right:-3px}.tiny-modal__resize .selb-resize,.tiny-modal__resize .sest-resize,.tiny-modal__resize .swlb-resize,.tiny-modal__resize .swst-resize{width:10px;height:10px;z-index:101}.tiny-modal__resize .sest-resize,.tiny-modal__resize .swst-resize{top:-8px}.tiny-modal__resize .selb-resize,.tiny-modal__resize .swlb-resize{bottom:-8px}.tiny-modal__resize .sest-resize,.tiny-modal__resize .swlb-resize{cursor:sw-resize}.tiny-modal__resize .selb-resize,.tiny-modal__resize .swst-resize{cursor:se-resize}.tiny-modal__resize .swlb-resize,.tiny-modal__resize .swst-resize{left:-8px}.tiny-modal__resize .selb-resize,.tiny-modal__resize .sest-resize{right:-8px}.tiny-modal__resize .sb-resize,.tiny-modal__resize .st-resize{width:100%;height:8px;left:0;cursor:s-resize}.tiny-modal__resize .st-resize{top:-3px}.tiny-modal__resize .sb-resize{bottom:-3px}@-webkit-keyframes modal-fade-in{0%{-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0);opacity:0}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}@keyframes modal-fade-in{0%{-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0);opacity:0}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}@-webkit-keyframes modal-fade-out{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}100%{-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0);opacity:0}}@keyframes modal-fade-out{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}100%{-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0);opacity:0}}@keyframes modal-fade-in{0%{-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0);opacity:0}100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}}@keyframes modal-fade-out{0%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}100%{-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0);opacity:0}}";
styleInject(css_248z);
script.version = '3.5.0-alpha.0';
script.model = {

@@ -318,0 +347,0 @@ prop: 'modelValue',

{
"name": "@opentiny/vue-modal",
"version": "3.1.0-alpha.0",
"version": "3.5.0-alpha.0",
"description": "",

@@ -12,12 +12,13 @@ "main": "lib/index.js",

"dependencies": {
"@opentiny/vue-renderless": "~3.1.0-alpha.0",
"@opentiny/vue-common": "~3.1.0-alpha.0",
"@opentiny/vue-button": "~3.1.0-alpha.0",
"@opentiny/vue-locale": "~3.1.0-alpha.0",
"@opentiny/vue-icon": "~3.1.0-alpha.0",
"@opentiny/vue-theme": "~3.1.0-alpha.0",
"@opentiny/vue-theme-mobile": "~3.1.0-alpha.0"
"@opentiny/vue-renderless": "~3.5.0",
"@opentiny/vue-common": "~3.5.0-alpha.0",
"@opentiny/vue-button": "~3.5.0-alpha.0",
"@opentiny/vue-locale": "~3.5.0-alpha.0",
"@opentiny/vue-icon": "~3.5.0-alpha.0",
"@opentiny/vue-theme": "~3.5.0",
"@opentiny/vue-theme-mobile": "~3.5.0"
},
"license": "MIT",
"types": "index.d.ts",
"sideEffects": false
}
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc