@harbour-enterprises/superdoc 1.0.0-alpha.4 → 1.0.0-alpha.6

package/README.md

@@ -2,6 +2,18 @@
 
 A supercharged document viewer and editor
 
+### Development
+```
+npm install
+npm run dev
+
+This will load the Vue 3 app with test data. The main entry points are:
+- main.js (test data)
+- Superdoc.vue
+
+For document editor (prose mirror), please see DocumentEditor.vue
+```
+
 ### Installation
 ``` npm install @harbour-enterprises/superdoc ```
 

package/dist/style.css

@@ -19485,14 +19485,14 @@ body {
   position: relative;
 }
 
-.comment-doc[data-v-e21e7b14] {
+.comment-doc[data-v-1656a63d] {
   background-color: red;
   position: relative;
 }
-.comments-layer[data-v-e21e7b14] {
+.comments-layer[data-v-1656a63d] {
   position: relative;
 }
-.comment-anchor[data-v-e21e7b14] {
+.comment-anchor[data-v-1656a63d] {
   position: absolute;
   cursor: pointer;
   z-index: 3;
@@ -19500,10 +19500,10 @@ body {
   transition: background-color 250ms ease;
   pointer-events: auto;
 }
-.comment-anchor[data-v-e21e7b14]:hover {
+.comment-anchor[data-v-1656a63d]:hover {
   background-color: #FFD70099;
 }
-.comments-container[data-v-e21e7b14] {
+.comments-container[data-v-1656a63d] {
   pointer-events: none;
 }
 
@@ -19555,7 +19555,7 @@ span[data-v-36fffb56] {
 }
 
 
-.comments-dialog[data-v-62d37dc7] {
+.comments-dialog[data-v-4946bb71] {
   position: absolute;
   display: flex;
   flex-direction: column;
@@ -19569,11 +19569,11 @@ span[data-v-36fffb56] {
   box-shadow: 0px 0px 2px 2px rgba(50, 50, 50, 0.15);
   z-index: 5;
 }
-.overflow-menu[data-v-62d37dc7] {
+.overflow-menu[data-v-4946bb71] {
   flex-shrink: 1;
   display: flex;
 }
-.overflow-menu i[data-v-62d37dc7] {
+.overflow-menu i[data-v-4946bb71] {
   width: 20px;
   height: 20px;
   display: flex;
@@ -19585,54 +19585,104 @@ span[data-v-36fffb56] {
   margin-left: 2px;
   cursor: pointer;
 }
-.overflow-menu i[data-v-62d37dc7]:hover {
+.overflow-menu i[data-v-4946bb71]:hover {
   background-color: #DBDBDB;
 }
-.card-section[data-v-62d37dc7] {
+.card-section[data-v-4946bb71] {
   margin: 5px 0;
 }
-.comment-entry[data-v-62d37dc7] {
+.comment-entry[data-v-4946bb71] {
   flex-grow: 1;
 }
-.comment-entry input[data-v-62d37dc7] {
+.comment-entry input[data-v-4946bb71] {
   border-radius: 12px;
   padding: 10px 14px;
   outline: none;
   border: 1px solid #DBDBDB;
   width: 100%;
 }
-.comment-header[data-v-62d37dc7] {
+.comment-header[data-v-4946bb71] {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
-.avatar[data-v-62d37dc7] {
+.avatar[data-v-4946bb71] {
   margin-right: 10px;
 }
-.user-info[data-v-62d37dc7] {
+.user-info[data-v-4946bb71] {
   display: flex;
   flex-direction: column;
   font-size: 12px;
 }
-.user-name[data-v-62d37dc7] {
+.user-name[data-v-4946bb71] {
   font-weight: 600;
 }
-.user-timestamp[data-v-62d37dc7] {
+.user-timestamp[data-v-4946bb71] {
   font-size: 12px;
   color: #999;
 }
-.sd-button[data-v-62d37dc7] {
+.sd-button[data-v-4946bb71] {
   margin-right: 5px;
 }
-.comment[data-v-62d37dc7] {
+.comment[data-v-4946bb71] {
   font-size: 14px;
   margin: 10px 0;
 }
-.conversation-item[data-v-62d37dc7] {
+.conversation-item[data-v-4946bb71] {
   border-bottom: 1px solid #DBDBDB;
   padding-bottom: 10px;
 }
 
+.group-collapsed[data-v-0d0bd15f] {
+  position: relative;
+  display: inline;
+}
+.comments-icon[data-v-0d0bd15f] {
+  font-size: 20px;
+  width: 50px;
+  height: 50px;
+  font-weight: 400;
+  background-color: #E2E9FB;
+  color: #1355FF;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 250ms ease;
+  user-select: none;
+  pointer-events: none;
+}
+.number-bubble[data-v-0d0bd15f] {
+  background-color: #1355FF;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  position: absolute;
+  right: -4px;
+  top: -4px;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+}
+.comments-group[data-v-0d0bd15f] {
+  cursor: pointer;
+  position: absolute;
+  display: flex;
+  position: absolute;
+  border-radius: 12px;
+  transition: background-color 250ms ease;
+}
+.comments-icon[data-v-0d0bd15f]:hover {
+  background-color: #E2E9FB99;
+}
+.expanded[data-v-0d0bd15f] {
+  flex-direction: column;
+  background-color: #EDEDED;
+  z-index: 11;
+}
+
 .text-field[data-v-452996fe] {
     white-space: nowrap;
     height: 100%;
@@ -19681,58 +19731,58 @@ img[data-v-47d1dee5] {
 }
 
 /* Right sidebar drawer */
-.right-sidebar[data-v-4f3423dd] {
+.right-sidebar[data-v-e0890280] {
   width: 320px;
   padding: 10px;
   position: relative;
 }
 
 /* General Styles */
-.box-sizing[data-v-4f3423dd], .layers[data-v-4f3423dd] {
+.box-sizing[data-v-e0890280], .layers[data-v-e0890280] {
   box-sizing: border-box;
 }
-.cursor-pointer[data-v-4f3423dd], .tools i[data-v-4f3423dd], .toolbar-item[data-v-4f3423dd] {
+.cursor-pointer[data-v-e0890280], .tools i[data-v-e0890280], .toolbar-item[data-v-e0890280] {
   cursor: pointer;
 }
-.flex[data-v-4f3423dd] {
+.flex[data-v-e0890280] {
   display: flex;
 }
-.flex-column[data-v-4f3423dd] {
+.flex-column[data-v-e0890280] {
   flex-direction: column;
 }
-.flex-center[data-v-4f3423dd] {
+.flex-center[data-v-e0890280] {
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
 /* Layer Styles */
-.comments-layer[data-v-4f3423dd] {
+.comments-layer[data-v-e0890280] {
   position: absolute;
   top: 0;
   height: 100%;
 }
-.layers[data-v-4f3423dd] {
+.layers[data-v-e0890280] {
   position: relative;
   display: inline-block;
 }
 
 /* Document Styles */
-.docx[data-v-4f3423dd] {
+.docx[data-v-e0890280] {
   border: 1px solid #DFDFDF;
   pointer-events: auto;
 }
-.sub-document[data-v-4f3423dd] {
+.sub-document[data-v-e0890280] {
   position: relative;
 }
 
 /* Toolbar Styles */
-.toolbar[data-v-4f3423dd] {
+.toolbar[data-v-e0890280] {
   height: 25px;
   background-color: #fff;
   margin-bottom: 5px;
 }
-.toolbar-item[data-v-4f3423dd] {
+.toolbar-item[data-v-e0890280] {
   width: 20px;
   height: 20px;
   border-radius: 8px;
@@ -19744,23 +19794,23 @@ img[data-v-47d1dee5] {
   justify-content: center;
   transition: all 250ms ease;
 }
-.toolbar-item[data-v-4f3423dd]:hover {
+.toolbar-item[data-v-e0890280]:hover {
   background-color: #DBDBDB;
 }
 
 /* Tools Styles */
-.tools[data-v-4f3423dd] {
+.tools[data-v-e0890280] {
   position: absolute;
   width: 50px;
   height: 50px;
   background-color: rgba(219, 219, 219, 0.6);
   border-radius: 12px;
-  z-index: 6;
+  z-index: 11;
   display: flex;
   align-items: center;
   justify-content: center;
 }
-.tools i[data-v-4f3423dd] {
+.tools i[data-v-e0890280] {
   font-size: 20px;
   border-radius: 12px;
   border: none;