@_nu/css-dialog - npm Package Compare versions

Comparing version 0.1.3 to 0.1.4

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+## [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))
+
+
+
+
+
 ## [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)
@@ -8,0 +19,0 @@

lib/index.css

@@ -0,3 +1,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[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}
+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_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}

package.json

 {
   "name": "@_nu/css-dialog",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "NU 「 no-ui 」 组件库系统 nu-system「 弹窗组件 」",
@@ -33,6 +33,3 @@ "author": "yfe-team",
   },
-  "dependencies": {
-    "@_nu/css-modal": "^0.0.6"
-  },
-  "gitHead": "61dee0cf05370ca48c9c1420b4c57e3e2913f2fe"
+  "gitHead": "49757f41252deacde7561271eedadb509c6ecf3d"
 }

README.md

@@ -25,4 +25,7 @@ # css-dialog
 @_nu/css-dialog/lib
-├── index.css        // 核心代码
+├── index.css       // 核心代码 dialog.css +  mask.css + modal.css
 └── skins
+    ├── dialog.css  // dialog
+    ├── mask.css    // 遮罩
+    ├── modal.css   // 弹层
     ├── top.css     // 居上显示
@@ -37,9 +40,2 @@ ├── right.css   // 居右显示
 
-## 子组件
-
-| 选择器             |         功能 |
-| :----------------- | -----------: |
-| `.nu_dialog`       |     弹窗主体 |
-| `.nu_dialog_close` | 弹窗关闭按钮 |
-
 ## API
@@ -51,5 +47,5 @@
     <dialog role="dialog" tabindex="-1" class="nu_modal">
-        <button title="mask" class="nu_mask"></button>
+        <button title="mask" aria-label="mask" class="nu_mask"></button>
         <section class="nu_dialog">
-            <button id="close" title="close" class="nu_dialog_close">&times;</button>
+            <button id="close" title="close" aria-label="close" class="nu_dialog_close">&times;</button>
             <!-- here put the content -->
@@ -65,2 +61,6 @@ </section>
 | :----------------------------- | -----------------: |
+| `.nu_dialog`                   |           弹窗主体 |
+| `.nu_dialog_close`             |           关闭按钮 |
+| `.nu_modal`                    |               弹层 |
+| `.nu_mask`                     |               遮罩 |
 | `.nu_modal[open] .nu_dialog`   | 控制弹窗的显示隐藏 |
@@ -78,12 +78,10 @@ | `.nu_modal._top .nu_dialog`    |           弹窗居上 |
 ```css
-.nu_dialog_wrap {
-  display: block;
-}
+
 .nu_dialog {
   transform: translate(0, 50px);
 }
-.nu_dialog_wrap {
+.nu_modal {
   transition: opacity 200ms, visibility 200ms;
 }
-.nu_dialog_wrap[open] {
+.nu_modal[open] {
   transition: opacity 200ms;
@@ -93,10 +91,2 @@ }
 
-## Do less but can be more
-
-可以看到我们这里的弹窗组件只做了特别少的事情，甚至看起来什么都没有做。
-
-而这也正是我们 nu-system 区别于其它 UI 组件库的地方。
-
-我们更希望提供的是一个规范，这样才能在不同的项目中定制属于自己的 UI 。
-
 ## Logic Only
@@ -107,3 +97,3 @@
 
-## Npm CDN
+## jsdelivr CDN
 
@@ -110,0 +100,0 @@ ```HTML

New alerts

Trivial Package

Supply chain risk

Packages less than 10 lines of code are easily copied into your own project and may not warrant the additional supply chain risk of an external dependency.

Found 1 instance in 1 package

Fixed alerts

Trivial Package

Supply chain risk

Packages less than 10 lines of code are easily copied into your own project and may not warrant the additional supply chain risk of an external dependency.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

7589

8.71%

Dependency count

0

-100%

Lines of code

8

300%

Worsened metrics

Number of lines in readme file

101

-9.01%

Dependency changes

• - Removed

  @_nu/css-modal@^0.0.6

• - Removed

  @_nu/css-modal@0.0.6
  (transitive)