feat: update components

chaxus · Aug 12, 2023 · d49eb6c · d49eb6c
1 parent 586b4de
commit d49eb6c
Show file tree

Hide file tree

Showing 13 changed files with 152 additions and 896 deletions.
diff --git a/packages/docs/package.json b/packages/docs/package.json
@@ -16,7 +16,7 @@
     "vitepress": "1.0.0-alpha.65"
   },
   "dependencies": {
-    "ranui": "workspace:0.1.1-alpha.10",
+    "ranui": "workspace:0.1.1-alpha.12",
     "ranuts": "0.1.0-alpha.5"
   }
 }
diff --git a/packages/docs/src/ranui/index.md b/packages/docs/src/ranui/index.md
@@ -6,14 +6,14 @@
 
 1. 基于`Web Components`开发，能做到跨框架复用，统一所有情况。
 2. 采用`Typescript`开发，有声明和类型文件。
-3. 纯原生手写，基础组件做到无依赖，体积很小。
+3. 纯原生手写，基础组件无依赖。
 4. `MIT`协议
-5. 文档基于`vitepress`搭建，所有组件实例均可交互
+5. 文档基于`vitepress`搭建，所有组件实例均可交互。
 
 ## 项目地址
 
-- `git`地址：`https://github.com/chaxus/ran/tree/main/packages/ranui`，欢迎大家提出各种改进建议，`issue`和`pr`。
-- `npm`地址：`https://www.npmjs.com/package/ranui`
+- `git`：`https://github.com/chaxus/ran/tree/main/packages/ranui`。
+- `npm`：`https://www.npmjs.com/package/ranui`
 
 ![npm地址](../../assets/ranui/ranui-npm.jpg)
 
@@ -74,7 +74,7 @@ import 'ranui'
 import Button from 'ranui'
 ```
 
-## 组件总览
+## 组件概览
 
 - Button
 
@@ -142,6 +142,7 @@ import Button from 'ranui'
    </r-tabs>
 </div>
 
+
 ## 兼容性
 
 - 不支持 IE，其他均有较好支持

diff --git a/packages/docs/src/ranui/preview/index.md b/packages/docs/src/ranui/preview/index.md
@@ -48,4 +48,6 @@
 
 ```html
 <r-preview closeable="false"></r-preview>
-```
+```
+
+
diff --git a/packages/ranui/base.less b/packages/ranui/base.less
@@ -31,7 +31,7 @@
   font-variant: tabular-nums;
   line-height: 1.5715;
   list-style: none;
-  font-feature-settings: 'tnum';
+  font-feature-settings: "tnum";
   position: fixed;
   top: 8px;
   left: 0;
@@ -59,9 +59,21 @@
   height: 100vh;
   background-color: rgba(0, 0, 0, 0.45);
   z-index: 1081;
+  .r-preview-loading {
+    position: absolute;
+    top: 30vh;
+    left: 50vw;
+    transform: translateX(-50%);
+    display: flex;
+    flex-flow: column;
+    align-items: center;
+    &-text {
+      color: #fff;
+      font-size: 16px;
+    }
+  }
   .r-preview-options {
     width: 100%;
-    background: rgba(0, 0, 0, 0.1);
     pointer-events: auto;
     display: flex;
     flex-flow: row-reverse nowrap;
@@ -74,36 +86,43 @@
       cursor: pointer;
       transition: all 0.3s;
       user-select: none;
-      width: 25px;
-      height: 25px;
-      background: url('./assets/icons/close.svg') no-repeat center center;
+      width: 40px;
+      height: 40px;
+      background: url("./assets/icons/close-circle-fill.svg") no-repeat center
+        center;
       background-size: contain;
     }
   }
   .r-preview-contain {
+    max-width: 100vw;
     display: flex;
     flex-flow: column nowrap;
     align-items: center;
     justify-content: center;
     .r-preview-context {
       width: 100%;
-      height: calc(100vh - 44px);
+      height: calc(100vh - 68px);
+      display: flex;
+      flex-flow: column nowrap;
+      justify-content: flex-start;
+      align-items: center;
       overflow: auto;
+      // excel css
       .r-preview-excel-main {
         height: 100%;
         .x-spreadsheet {
           font-size: 13px;
           line-height: normal;
           user-select: none;
           -moz-user-select: none;
-          font-family: 'Lato', 'Source Sans Pro', Roboto, Helvetica, Arial,
+          font-family: "Lato", "Source Sans Pro", Roboto, Helvetica, Arial,
             sans-serif;
           box-sizing: content-box;
           background: #fff;
           -webkit-font-smoothing: antialiased;
         }
         .x-spreadsheet textarea {
-          font: 400 13px Arial, 'Lato', 'Source Sans Pro', Roboto, Helvetica,
+          font: 400 13px Arial, "Lato", "Source Sans Pro", Roboto, Helvetica,
             sans-serif;
         }
         .x-spreadsheet-sheet {
@@ -128,7 +147,7 @@
           position: absolute;
           left: calc(50% - 4px);
           top: -4px;
-          content: '';
+          content: "";
           width: 8px;
           height: 8px;
           background: inherit;
@@ -370,7 +389,7 @@
           resize: none;
           text-align: start;
           overflow-y: hidden;
-          font: 400 13px Arial, 'Lato', 'Source Sans Pro', Roboto, Helvetica,
+          font: 400 13px Arial, "Lato", "Source Sans Pro", Roboto, Helvetica,
             sans-serif;
           color: inherit;
           white-space: normal;
@@ -426,7 +445,7 @@
         }
         .x-spreadsheet-item.state:before,
         .x-spreadsheet-header.state:before {
-          content: '';
+          content: "";
           position: absolute;
           width: 10px;
           height: 10px;
@@ -680,7 +699,7 @@
           color: rgba(0, 0, 0, 0.6);
           background: #e0e1e2;
           text-decoration: none;
-          font-family: 'Lato', 'proxima-nova', 'Helvetica Neue', Arial,
+          font-family: "Lato", "proxima-nova", "Helvetica Neue", Arial,
             sans-serif;
           outline: none;
           vertical-align: baseline;
@@ -829,7 +848,7 @@
           line-height: 1.25em;
           min-width: 360px;
           color: rgba(0, 0, 0, 0.87);
-          font-family: 'Lato', 'Source Sans Pro', Roboto, Helvetica, Arial,
+          font-family: "Lato", "Source Sans Pro", Roboto, Helvetica, Arial,
             sans-serif;
           border-radius: 4px;
           border: 1px solid rgba(0, 0, 0, 0.1);
@@ -868,6 +887,11 @@
           display: none;
         }
       }
+      // docx css
+      .docx-wrapper {
+        background: none;
+      }
+      // pptx css
       section {
         width: 100%;
         height: 690px;

diff --git a/packages/ranui/components/message/index.less b/packages/ranui/components/message/index.less
@@ -38,57 +38,4 @@
       }
     }
   }
-}
-
-@keyframes MessageMoveIn {
-  0% {
-    padding: 0;
-    transform: translateY(-100%);
-    opacity: 0;
-  }
-  100% {
-    padding: 8px;
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-@keyframes MessageMoveOut {
-  0% {
-    max-height: 150px;
-    padding: 8px;
-    opacity: 1;
-  }
-  100% {
-    max-height: 0;
-    padding: 0;
-    opacity: 0;
-  }
-}
-.ranui-message {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-  color: #000000d9;
-  font-size: 14px;
-  font-variant: tabular-nums;
-  line-height: 1.5715;
-  list-style: none;
-  font-feature-settings: 'tnum';
-  position: fixed;
-  top: 8px;
-  left: 0;
-  z-index: 1010;
-  width: 100%;
-  pointer-events: none;
-
-  .message-in {
-    animation-name: MessageMoveIn;
-    animation-duration: 0.3s;
-    animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
-  }
-  .message-leave {
-    animation-name: MessageMoveOut;
-    animation-duration: 0.3s;
-    animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86);
-  }
-}
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -48,4 +48,6 @@ @@
     ```html
     <r-preview closeable="false"></r-preview>
-    ```
+    ```