Big News: Socket raises $60M Series C at a $1B valuation to secure software supply chains for AI-driven development.Announcement →
Sign In

@_nu/css-dialog

Package Overview
Dependencies
Maintainers
2
Versions
15
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@_nu/css-dialog - npm Package Compare versions

Comparing version
0.1.5
 to
0.1.6
+116
demo/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="../lib/index.css" />
<link rel="stylesheet" href="../lib/skins/top.css" />
<link rel="stylesheet" href="../lib/skins/right.css" />
<link rel="stylesheet" href="../lib/skins/bottom.css" />
<link rel="stylesheet" href="../lib/skins/left.css" />
<link rel="stylesheet" href="../lib/skins/middle.css" />
<style>
body,
html {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 0;
}
.text-area {
padding: 5em 1em;
text-align: center;
}
.btn-show-dialog {
display: inline-block;
font-size: 100%;
padding: 0.5em 1em;
background-color: #4c5fe2;
color: #fff;
border-radius: 2px;
border: none;
cursor: pointer;
margin: 0.5em;
}
</style>
</head>
<body>
<button type="button" onclick="apiModal.show('_top')">
show top dialog
</button>
<button type="button" onclick="apiModal.show('_right')">
show right dialog
</button>
<button type="button" onclick="apiModal.show('_bottom')">
show bottom dialog
</button>
<button type="button" onclick="apiModal.show('_left')">
show left dialog
</button>
<button type="button" onclick="apiModal.show('_middle')">
show middle dialog
</button>
<template id="tplDialog">
<div role="dialog" tabindex="-1" id="dialog" class="nu_modal">
<button
id="mask"
title="mask"
class="nu_mask"
aria-label="mask"
onclick="apiModal.close()"
></button>
<section class="nu_dialog">
<button
id="close"
title="close"
aria-label="close"
class="nu_dialog_close"
onclick="apiModal.close()"
>
&times;
</button>
<h3>title of dialog</h3>
<p>
content of dialog
</p>
</section>
</div>
</template>
<script>
var apiModal = {
show: function (position) {
var domDialog = (function () {
var textDialog = document.getElementById('tplDialog').innerHTML;
var objE = document.createElement('div');
objE.innerHTML = textDialog;
return objE.childNodes[1];
})();
this.domDialog = domDialog;
domDialog.setAttribute('class', 'nu_modal ' + position);
document.body.append(domDialog);
setTimeout(() => {
domDialog.setAttribute('open', true);
}, 16);
},
close: function () {
var _it = this;
_it.domDialog.removeAttribute('open');
setTimeout(function () {
_it.domDialog.remove();
}, 300);
},
};
</script>
</body>
</html>
+11
-28
CHANGELOG.md

@@ -6,57 +6,40 @@ # Change Log

## [0.1.5](https://github.com/nu-system/css-dialog/compare/@_nu/css-dialog@0.1.4...@_nu/css-dialog@0.1.5) (2020-08-17)
## 0.1.6 (2020-08-18)
### Bug Fixes
* build dialog ([5f1172c](https://github.com/nu-system/css-dialog/commit/5f1172cfcd396a04f467737f24d593d46b9e0c7c))
- add csstextarea ([4b822a1](https://github.com/nu-system/react/commit/4b822a1b82ec2e2ca6bdfcdd473c978653573acc))
- update ([c1612cf](https://github.com/nu-system/react/commit/c1612cf29cf1a2db3df2a12c2a899035f19c1f8e))
- 将 css 注入到 react 中 ([a3e4d6a](https://github.com/nu-system/react/commit/a3e4d6a22d345e02f2580b53212f6c063176d8b1))
## [0.1.5](https://github.com/nu-system/css-dialog/compare/@_nu/css-dialog@0.1.4...@_nu/css-dialog@0.1.5) (2020-08-17)
### Bug Fixes
- build dialog ([5f1172c](https://github.com/nu-system/css-dialog/commit/5f1172cfcd396a04f467737f24d593d46b9e0c7c))
## [0.1.4](https://github.com/nu-system/css-dialog/compare/@_nu/css-dialog@0.1.3...@_nu/css-dialog@0.1.4) (2020-08-17)
### Bug Fixes
* 添加dialog ([e0a4b88](https://github.com/nu-system/css-dialog/commit/e0a4b8873d0f46f37746a5f457c0164e9520ca55))
- 添加 dialog ([e0a4b88](https://github.com/nu-system/css-dialog/commit/e0a4b8873d0f46f37746a5f457c0164e9520ca55))
## [0.1.3](https://github.com/nu-system/css-dialog/compare/@_nu/css-dialog@0.1.2...@_nu/css-dialog@0.1.3) (2020-08-16)
### Bug Fixes
* 让 dialog 组件依赖 modal 组件 ([315811e](https://github.com/nu-system/css-dialog/commit/315811ec8b0787b5c08792690f20747bfdb25590))
- 让 dialog 组件依赖 modal 组件 ([315811e](https://github.com/nu-system/css-dialog/commit/315811ec8b0787b5c08792690f20747bfdb25590))
## [0.1.2](https://github.com/nu-system/css-dialog/compare/@_nu/css-dialog@0.1.1...@_nu/css-dialog@0.1.2) (2020-08-16)
### Bug Fixes
* 发布 ([22014cc](https://github.com/nu-system/css-dialog/commit/22014cc0d056833c00f02db9409b19c508ca88f7))
- 发布 ([22014cc](https://github.com/nu-system/css-dialog/commit/22014cc0d056833c00f02db9409b19c508ca88f7))
## [0.1.1](https://github.com/nu-system/css-dialog/compare/@_nu/css-dialog@0.1.0...@_nu/css-dialog@0.1.1) (2020-08-16)
### Bug Fixes
* 修改构建工具 ([3930fa5](https://github.com/nu-system/css-dialog/commit/3930fa508af689207d8d591aab09054b4023948e))
- 修改构建工具 ([3930fa5](https://github.com/nu-system/css-dialog/commit/3930fa508af689207d8d591aab09054b4023948e))
# 0.1.0 (2020-07-04)

@@ -63,0 +46,0 @@ 

+6
-6
lib/index.css

@@ -1,9 +0,9 @@

.nu_modal{position:fixed;top:0;left:0;width:100%;height:100%;display:block;visibility:hidden;border:none 0;padding:0;margin:0;box-sizing:border-box;background-color:transparent}
.nu_modal{position:fixed;top:0;left:0;width:100%;height:100%;display:block;visibility:hidden;border:none 0;padding:0;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:transparent}
.nu_modal[open]{visibility:visible}
.nu_modal{opacity:0;transition:opacity .2s,visibility .2s}
.nu_modal[open]{opacity:1;transition:opacity .2s}
.nu_mask{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.6);z-index:-1;box-sizing:border-box}
.nu_modal{opacity:0;-webkit-transition:opacity .2s,visibility .2s;transition:opacity .2s,visibility .2s}
.nu_modal[open]{opacity:1;-webkit-transition:opacity .2s;transition:opacity .2s}
.nu_mask{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.6);-webkit-box-sizing:border-box;box-sizing:border-box}
button.nu_mask{border:none 0;-webkit-appearance:none;border-radius:0;padding:0}
.nu_dialog{background-color:#fff;position:relative;z-index:1;transition:transform .2s}
.nu_modal[open] .nu_dialog{transform:translate(0,0)}
.nu_dialog{background-color:#fff;position:relative;z-index:1;-webkit-transition:-webkit-transform .2s;transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s,-webkit-transform .2s;-webkit-box-sizing:border-box;box-sizing:border-box}
.nu_modal[open] .nu_dialog{-webkit-transform:translate(0,0);transform:translate(0,0)}
.nu_dialog_close{text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:absolute;top:0;right:0}
+1
-1
lib/skins/bottom.css
._bottom .nu_dialog{position:absolute;left:0;width:100%;bottom:0}
._bottom .nu_dialog{transform:translate(0,50px)}
._bottom .nu_dialog{-webkit-transform:translate(0,50px);transform:translate(0,50px)}
+2
-2
lib/skins/dialog.css

@@ -1,3 +0,3 @@

.nu_dialog{background-color:#fff;position:relative;z-index:1;transition:transform .2s}
.nu_modal[open] .nu_dialog{transform:translate(0,0)}
.nu_dialog{background-color:#fff;position:relative;z-index:1;-webkit-transition:-webkit-transform .2s;transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s,-webkit-transform .2s;-webkit-box-sizing:border-box;box-sizing:border-box}
.nu_modal[open] .nu_dialog{-webkit-transform:translate(0,0);transform:translate(0,0)}
.nu_dialog_close{text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:absolute;top:0;right:0}
+1
-1
lib/skins/left.css
._left .nu_dialog{position:absolute;left:0;top:0;height:100%;width:80%;max-width:400px;bottom:0}
._left .nu_dialog{transform:translate(-50px,0)}
._left .nu_dialog{-webkit-transform:translate(-50px,0);transform:translate(-50px,0)}
+1
-1
lib/skins/mask.css

@@ -1,2 +0,2 @@

.nu_mask{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.6);z-index:-1;box-sizing:border-box}
.nu_mask{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.6);-webkit-box-sizing:border-box;box-sizing:border-box}
button.nu_mask{border:none 0;-webkit-appearance:none;border-radius:0;padding:0}
+2
-2
lib/skins/middle.css

@@ -1,4 +0,4 @@

.nu_modal._middle{box-sizing:border-box;padding-top:16px;padding-bottom:16px;text-align:center;font-size:0}
.nu_modal._middle{-webkit-box-sizing:border-box;box-sizing:border-box;padding-top:16px;padding-bottom:16px;text-align:center;font-size:0}
.nu_modal._middle:after{content:'';height:100%;display:inline-block;width:0;vertical-align:middle;margin-left:-1px}
._middle .nu_dialog{width:90%;max-width:600px;display:inline-block;vertical-align:middle;text-align:left;font-size:16px}
._middle .nu_dialog{transform:translate(0,50px)}
._middle .nu_dialog{-webkit-transform:translate(0,50px);transform:translate(0,50px)}
+3
-3
lib/skins/modal.css

@@ -1,4 +0,4 @@

.nu_modal{position:fixed;top:0;left:0;width:100%;height:100%;display:block;visibility:hidden;border:none 0;padding:0;margin:0;box-sizing:border-box;background-color:transparent}
.nu_modal{position:fixed;top:0;left:0;width:100%;height:100%;display:block;visibility:hidden;border:none 0;padding:0;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:transparent}
.nu_modal[open]{visibility:visible}
.nu_modal{opacity:0;transition:opacity .2s,visibility .2s}
.nu_modal[open]{opacity:1;transition:opacity .2s}
.nu_modal{opacity:0;-webkit-transition:opacity .2s,visibility .2s;transition:opacity .2s,visibility .2s}
.nu_modal[open]{opacity:1;-webkit-transition:opacity .2s;transition:opacity .2s}
+1
-1
lib/skins/right.css
._right .nu_dialog{position:absolute;right:0;top:0;height:100%;width:80%;max-width:400px;bottom:0}
._right .nu_dialog{transform:translate(50px,0)}
._right .nu_dialog{-webkit-transform:translate(50px,0);transform:translate(50px,0)}
+1
-1
lib/skins/top.css
._top .nu_dialog{position:absolute;top:0;left:0;width:100%}
._top .nu_dialog{transform:translate(0,50px)}
._top .nu_dialog{-webkit-transform:translate(0,-50px);transform:translate(0,-50px)}
+6
-6
module/index.module.css

@@ -1,9 +0,9 @@

.nu_modal{position:fixed;top:0;left:0;width:100%;height:100%;display:block;visibility:hidden;border:none 0;padding:0;margin:0;box-sizing:border-box;background-color:transparent}
.nu_modal{position:fixed;top:0;left:0;width:100%;height:100%;display:block;visibility:hidden;border:none 0;padding:0;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:transparent}
.nu_modal[open]{visibility:visible}
.nu_modal{opacity:0;transition:opacity .2s,visibility .2s}
.nu_modal[open]{opacity:1;transition:opacity .2s}
.nu_mask{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.6);z-index:-1;box-sizing:border-box}
.nu_modal{opacity:0;-webkit-transition:opacity .2s,visibility .2s;transition:opacity .2s,visibility .2s}
.nu_modal[open]{opacity:1;-webkit-transition:opacity .2s;transition:opacity .2s}
.nu_mask{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.6);-webkit-box-sizing:border-box;box-sizing:border-box}
button.nu_mask{border:none 0;-webkit-appearance:none;border-radius:0;padding:0}
.nu_dialog{background-color:#fff;position:relative;z-index:1;transition:transform .2s}
.nu_modal[open] .nu_dialog{transform:translate(0,0)}
.nu_dialog{background-color:#fff;position:relative;z-index:1;-webkit-transition:-webkit-transform .2s;transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s,-webkit-transform .2s;-webkit-box-sizing:border-box;box-sizing:border-box}
.nu_modal[open] .nu_dialog{-webkit-transform:translate(0,0);transform:translate(0,0)}
.nu_dialog_close{text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:absolute;top:0;right:0}
+1
-1
module/skins/bottom.module.css
._bottom .nu_dialog{position:absolute;left:0;width:100%;bottom:0}
._bottom .nu_dialog{transform:translate(0,50px)}
._bottom .nu_dialog{-webkit-transform:translate(0,50px);transform:translate(0,50px)}
+2
-2
module/skins/dialog.module.css

@@ -1,3 +0,3 @@

.nu_dialog{background-color:#fff;position:relative;z-index:1;transition:transform .2s}
.nu_modal[open] .nu_dialog{transform:translate(0,0)}
.nu_dialog{background-color:#fff;position:relative;z-index:1;-webkit-transition:-webkit-transform .2s;transition:-webkit-transform .2s;transition:transform .2s;transition:transform .2s,-webkit-transform .2s;-webkit-box-sizing:border-box;box-sizing:border-box}
.nu_modal[open] .nu_dialog{-webkit-transform:translate(0,0);transform:translate(0,0)}
.nu_dialog_close{text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:absolute;top:0;right:0}
+1
-1
module/skins/left.module.css
._left .nu_dialog{position:absolute;left:0;top:0;height:100%;width:80%;max-width:400px;bottom:0}
._left .nu_dialog{transform:translate(-50px,0)}
._left .nu_dialog{-webkit-transform:translate(-50px,0);transform:translate(-50px,0)}
+1
-1
module/skins/mask.module.css

@@ -1,2 +0,2 @@

.nu_mask{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.6);z-index:-1;box-sizing:border-box}
.nu_mask{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.6);-webkit-box-sizing:border-box;box-sizing:border-box}
button.nu_mask{border:none 0;-webkit-appearance:none;border-radius:0;padding:0}
+2
-2
module/skins/middle.module.css

@@ -1,4 +0,4 @@

.nu_modal._middle{box-sizing:border-box;padding-top:16px;padding-bottom:16px;text-align:center;font-size:0}
.nu_modal._middle{-webkit-box-sizing:border-box;box-sizing:border-box;padding-top:16px;padding-bottom:16px;text-align:center;font-size:0}
.nu_modal._middle:after{content:'';height:100%;display:inline-block;width:0;vertical-align:middle;margin-left:-1px}
._middle .nu_dialog{width:90%;max-width:600px;display:inline-block;vertical-align:middle;text-align:left;font-size:16px}
._middle .nu_dialog{transform:translate(0,50px)}
._middle .nu_dialog{-webkit-transform:translate(0,50px);transform:translate(0,50px)}
+3
-3
module/skins/modal.module.css

@@ -1,4 +0,4 @@

.nu_modal{position:fixed;top:0;left:0;width:100%;height:100%;display:block;visibility:hidden;border:none 0;padding:0;margin:0;box-sizing:border-box;background-color:transparent}
.nu_modal{position:fixed;top:0;left:0;width:100%;height:100%;display:block;visibility:hidden;border:none 0;padding:0;margin:0;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:transparent}
.nu_modal[open]{visibility:visible}
.nu_modal{opacity:0;transition:opacity .2s,visibility .2s}
.nu_modal[open]{opacity:1;transition:opacity .2s}
.nu_modal{opacity:0;-webkit-transition:opacity .2s,visibility .2s;transition:opacity .2s,visibility .2s}
.nu_modal[open]{opacity:1;-webkit-transition:opacity .2s;transition:opacity .2s}
+1
-1
module/skins/right.module.css
._right .nu_dialog{position:absolute;right:0;top:0;height:100%;width:80%;max-width:400px;bottom:0}
._right .nu_dialog{transform:translate(50px,0)}
._right .nu_dialog{-webkit-transform:translate(50px,0);transform:translate(50px,0)}
+1
-1
module/skins/top.module.css
._top .nu_dialog{position:absolute;top:0;left:0;width:100%}
._top .nu_dialog{transform:translate(0,50px)}
._top .nu_dialog{-webkit-transform:translate(0,-50px);transform:translate(0,-50px)}
+10
-6
package.json
{
"name": "@_nu/css-dialog",
"version": "0.1.5",
"version": "0.1.6",
"description": "NU 「 no-ui 」 组件库系统 nu-system「 弹窗组件 」",
"author": "yfe-team",
"license": "MIT",
"repository": "git@github.com:nu-system/css-dialog.git",
"bugs": "https://github.com/nu-system/css-dialog/issues",
"repository": "git@github.com:nu-system/react.git",
"bugs": "https://github.com/nu-system/react/issues",
"homepage": "https://nu-system.github.io/css/dialog/",

@@ -15,2 +15,6 @@ "main": "lib/index.css",

},
"browserslist": [
"> 1%",
"last 2 versions"
],
"files": [

@@ -20,3 +24,3 @@ "lib",

"module",
"example"
"demo"
],

@@ -32,5 +36,5 @@ "keywords": [

"start": "gulp",
"build": "rm -rf ./lib && rm -rf ./module && gulp build"
"build": "rm -rf lib && rm -rf ./module && gulp build"
},
"gitHead": "ea422520be59793cfba35133a59e5773c4f7eba0"
"gitHead": "c33e272ec146e44bbb49b2a2a3451791b29ee75f"
}
+1
-0
src/skins/dialog.less

@@ -7,2 +7,3 @@ /* dialog main */

transition: transform 200ms;
box-sizing: border-box;
}

@@ -9,0 +10,0 @@ 

+0
-1
src/skins/mask.less

@@ -8,3 +8,2 @@ .nu_mask {

background-color: rgba(0, 0, 0, 0.6);
z-index: -1;
box-sizing: border-box;

@@ -11,0 +10,0 @@ }

+1
-1
src/skins/top.less

@@ -9,3 +9,3 @@ /*====== 顶部对齐弹窗*/

._top .nu_dialog {
transform: translate(0, 50px);
transform: translate(0, -50px);
}
-116
example/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="../lib/index.css" />
<link rel="stylesheet" href="../lib/skins/top.css" />
<link rel="stylesheet" href="../lib/skins/right.css" />
<link rel="stylesheet" href="../lib/skins/bottom.css" />
<link rel="stylesheet" href="../lib/skins/left.css" />
<link rel="stylesheet" href="../lib/skins/middle.css" />
<style>
body,
html {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: 0;
}
.text-area {
padding: 5em 1em;
text-align: center;
}
.btn-show-dialog {
display: inline-block;
font-size: 100%;
padding: 0.5em 1em;
background-color: #4c5fe2;
color: #fff;
border-radius: 2px;
border: none;
cursor: pointer;
margin: 0.5em;
}
</style>
</head>
<body>
<button type="button" onclick="apiModal.show('_top')">
show top dialog
</button>
<button type="button" onclick="apiModal.show('_right')">
show right dialog
</button>
<button type="button" onclick="apiModal.show('_bottom')">
show bottom dialog
</button>
<button type="button" onclick="apiModal.show('_left')">
show left dialog
</button>
<button type="button" onclick="apiModal.show('_middle')">
show middle dialog
</button>
<template id="tplDialog">
<div role="dialog" tabindex="-1" id="dialog" class="nu_modal">
<button
id="mask"
title="mask"
class="nu_mask"
aria-label="mask"
onclick="apiModal.close()"
></button>
<section class="nu_dialog">
<button
id="close"
title="close"
aria-label="close"
class="nu_dialog_close"
onclick="apiModal.close()"
>
&times;
</button>
<h3>title of dialog</h3>
<p>
content of dialog
</p>
</section>
</div>
</template>
<script>
var apiModal = {
show: function (position) {
var domDialog = (function () {
var textDialog = document.getElementById('tplDialog').innerHTML;
var objE = document.createElement('div');
objE.innerHTML = textDialog;
return objE.childNodes[1];
})();
this.domDialog = domDialog;
domDialog.setAttribute('class', 'nu_modal ' + position);
document.body.append(domDialog);
setTimeout(() => {
domDialog.setAttribute('open', true);
}, 16);
},
close: function () {
var _it = this;
_it.domDialog.removeAttribute('open');
setTimeout(function () {
_it.domDialog.remove();
}, 300);
},
};
</script>
</body>
</html>