frappe-ui 0.0.49 → 0.0.52

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "0.0.49",
+  "version": "0.0.52",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.js",
   "scripts": {
@@ -26,6 +26,10 @@
     "@tiptap/extension-link": "^2.0.0-beta.43",
     "@tiptap/extension-mention": "^2.0.0-beta.102",
     "@tiptap/extension-placeholder": "^2.0.0-beta.53",
+    "@tiptap/extension-table": "^2.0.0-beta.54",
+    "@tiptap/extension-table-cell": "^2.0.0-beta.23",
+    "@tiptap/extension-table-header": "^2.0.0-beta.25",
+    "@tiptap/extension-table-row": "^2.0.0-beta.22",
     "@tiptap/extension-text-align": "^2.0.0-beta.31",
     "@tiptap/starter-kit": "^2.0.0-beta.191",
     "@tiptap/vue-3": "^2.0.0-beta.96",

package/src/components/Dialog.vue

@@ -10,7 +10,7 @@
       @close="open = false"
     >
       <div
-        class="flex items-end justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0"
+        class="flex flex-col items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center"
       >
         <TransitionChild
           as="template"
@@ -26,13 +26,6 @@
           />
         </TransitionChild>
 
-        <!-- This element is to trick the browser into centering the modal contents. -->
-        <span
-          class="hidden sm:inline-block sm:align-middle sm:h-screen"
-          aria-hidden="true"
-        >
-          &#8203;
-        </span>
         <TransitionChild
           as="template"
           enter="ease-out duration-300"
@@ -43,7 +36,7 @@
           leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
         >
           <div
-            class="inline-block overflow-hidden text-left align-bottom transition-all transform bg-white rounded-lg shadow-xl sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
+            class="inline-block w-full max-w-lg my-8 overflow-hidden text-left align-middle transition-all transform bg-white rounded-lg shadow-xl"
           >
             <slot name="body">
               <slot name="body-main">
@@ -71,7 +64,7 @@
                         aria-hidden="true"
                       />
                     </div>
-                    <div class="flex-1 text-center sm:text-left">
+                    <div class="flex-1">
                       <DialogTitle as="header">
                         <slot name="body-title">
                           <h3

package/src/components/TextEditor/Menu.vue

@@ -6,23 +6,36 @@
           class="border-l w-[2px] h-4"
           v-if="button.type === 'separator'"
         ></div>
-        <div v-else-if="button.map">
+        <div class="shrink-0" v-else-if="button.map">
           <Popover>
             <template #target="{ togglePopover }">
               <button
                 class="px-2 py-1 text-base font-medium text-gray-800 transition-colors rounded hover:bg-gray-100"
                 @click="togglePopover"
+                :set="
+                  (activeBtn =
+                    button.find((b) => b.isActive(editor)) || button[0])
+                "
               >
-                {{
-                  (button.find((b) => b.isActive(editor)) || button[0]).label
-                }}
+                <component
+                  v-if="activeBtn.icon"
+                  :is="activeBtn.icon"
+                  class="w-4 h-4"
+                />
+                <span v-else>
+                  {{ activeBtn.label }}
+                </span>
               </button>
             </template>
             <template #body="{ close }">
               <ul class="p-1 bg-white border rounded shadow-md">
-                <li class="w-full" v-for="option in button">
+                <li
+                  class="w-full"
+                  v-for="option in button"
+                  v-show="option.isDisabled ? !option.isDisabled(editor) : true"
+                >
                   <button
-                    class="w-full px-2 py-1 text-base rounded hover:bg-gray-50"
+                    class="w-full px-2 py-1 text-base text-left rounded hover:bg-gray-50"
                     @click="
                       () => {
                         onClick(option)

package/src/components/TextEditor/TextEditor.vue

@@ -15,7 +15,7 @@
 
     <Menu
       v-if="fixedMenuButtons"
-      class="w-full border border-gray-200 rounded-t-lg"
+      class="w-full overflow-x-auto border border-gray-200 rounded-t-lg"
       :editor="editor"
       :buttons="fixedMenuButtons"
     />
@@ -49,6 +49,10 @@ import { Editor, EditorContent, BubbleMenu, FloatingMenu } from '@tiptap/vue-3'
 import StarterKit from '@tiptap/starter-kit'
 import Placeholder from '@tiptap/extension-placeholder'
 import TextAlign from '@tiptap/extension-text-align'
+import Table from '@tiptap/extension-table'
+import TableCell from '@tiptap/extension-table-cell'
+import TableHeader from '@tiptap/extension-table-header'
+import TableRow from '@tiptap/extension-table-row'
 import Image from './image-extension'
 import Link from '@tiptap/extension-link'
 import configureMention from './mention'
@@ -142,6 +146,12 @@ export default {
         StarterKit.configure({
           ...this.starterkitOptions,
         }),
+        Table.configure({
+          resizable: true,
+        }),
+        TableRow,
+        TableHeader,
+        TableCell,
         TextAlign.configure({
           types: ['heading', 'paragraph'],
         }),
@@ -197,6 +207,21 @@ export default {
           'Blockquote',
           'Code',
           'Horizontal Rule',
+          [
+            'InsertTable',
+            'AddColumnBefore',
+            'AddColumnAfter',
+            'DeleteColumn',
+            'AddRowBefore',
+            'AddRowAfter',
+            'DeleteRow',
+            'MergeCells',
+            'SplitCell',
+            'ToggleHeaderColumn',
+            'ToggleHeaderRow',
+            'ToggleHeaderCell',
+            'DeleteTable',
+          ],
           'Separator',
           'Undo',
           'Redo',
@@ -251,7 +276,10 @@ export default {
     editorProps() {
       return {
         attributes: {
-          class: normalizeClass(['prose prose-p:my-1', this.editorClass]),
+          class: normalizeClass([
+            'prose prose-p:my-1 prose-table:table-fixed prose-td:p-2 prose-th:p-2 prose-td:border prose-th:border prose-td:border-gray-300 prose-th:border-gray-300 prose-td:relative prose-th:relative prose-th:bg-gray-100',
+            this.editorClass,
+          ]),
         },
       }
     },
@@ -269,6 +297,7 @@ function createEditorButton(option) {
 }
 </script>
 <style>
+/* Placeholder */
 .ProseMirror:not(.ProseMirror-focused) p.is-editor-empty:first-child::before {
   content: attr(data-placeholder);
   float: left;
@@ -276,8 +305,44 @@ function createEditorButton(option) {
   pointer-events: none;
   height: 0;
 }
+
+/* Mentions */
 .mention {
   font-weight: 600;
   box-decoration-break: clone;
 }
+
+/* Table styles */
+.prose table p {
+  margin: 0;
+}
+
+/* Prosemirror specific table styles */
+.ProseMirror table .selectedCell:after {
+  z-index: 2;
+  position: absolute;
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  pointer-events: none;
+  background: theme('colors.blue.200');
+  opacity: 0.3;
+}
+
+.ProseMirror table .column-resize-handle {
+  position: absolute;
+  right: -1px;
+  top: 0;
+  bottom: -2px;
+  width: 4px;
+  background-color: theme('colors.blue.200');
+  pointer-events: none;
+}
+
+.resize-cursor {
+  cursor: ew-resize;
+  cursor: col-resize;
+}
 </style>

package/src/components/TextEditor/commands.js

@@ -20,6 +20,7 @@ import Image from './icons/image-add-line.vue'
 import ArrowGoBack from './icons/arrow-go-back-line.vue'
 import ArrowGoForward from './icons/arrow-go-forward-line.vue'
 import Separator from './icons/separator.vue'
+import Table from './icons/table-2.vue'
 
 export default {
   Paragraph: {
@@ -164,6 +165,89 @@ export default {
     action: (editor) => editor.chain().focus().redo().run(),
     isActive: (editor) => false,
   },
+  InsertTable: {
+    label: 'Insert Table',
+    icon: Table,
+    action: (editor) =>
+      editor
+        .chain()
+        .focus()
+        .insertTable({ rows: 3, cols: 3, withHeaderRow: true })
+        .run(),
+    isActive: (editor) => false,
+  },
+  AddColumnBefore: {
+    label: 'Add Column Before',
+    action: (editor) => editor.chain().focus().addColumnBefore().run(),
+    isActive: (editor) => false,
+    isDisabled: (editor) => !editor.can().addColumnBefore(),
+  },
+  AddColumnAfter: {
+    label: 'Add Column After',
+    action: (editor) => editor.chain().focus().addColumnAfter().run(),
+    isActive: (editor) => false,
+    isDisabled: (editor) => !editor.can().addColumnAfter(),
+  },
+  DeleteColumn: {
+    label: 'Delete Column',
+    action: (editor) => editor.chain().focus().deleteColumn().run(),
+    isActive: (editor) => false,
+    isDisabled: (editor) => !editor.can().deleteColumn(),
+  },
+  AddRowBefore: {
+    label: 'Add Row Before',
+    action: (editor) => editor.chain().focus().addRowBefore().run(),
+    isActive: (editor) => false,
+    isDisabled: (editor) => !editor.can().addRowBefore(),
+  },
+  AddRowAfter: {
+    label: 'Add Row After',
+    action: (editor) => editor.chain().focus().addRowAfter().run(),
+    isActive: (editor) => false,
+    isDisabled: (editor) => !editor.can().addRowAfter(),
+  },
+  DeleteRow: {
+    label: 'Delete Row',
+    action: (editor) => editor.chain().focus().deleteRow().run(),
+    isActive: (editor) => false,
+    isDisabled: (editor) => !editor.can().deleteRow(),
+  },
+  DeleteTable: {
+    label: 'Delete Table',
+    action: (editor) => editor.chain().focus().deleteTable().run(),
+    isActive: (editor) => false,
+    isDisabled: (editor) => !editor.can().deleteTable(),
+  },
+  MergeCells: {
+    label: 'Merge Cells',
+    action: (editor) => editor.chain().focus().mergeCells().run(),
+    isActive: (editor) => false,
+    isDisabled: (editor) => !editor.can().mergeCells(),
+  },
+  SplitCell: {
+    label: 'Split Cell',
+    action: (editor) => editor.chain().focus().splitCell().run(),
+    isActive: (editor) => false,
+    isDisabled: (editor) => !editor.can().splitCell(),
+  },
+  ToggleHeaderColumn: {
+    label: 'Toggle Header Column',
+    action: (editor) => editor.chain().focus().toggleHeaderColumn().run(),
+    isActive: (editor) => false,
+    isDisabled: (editor) => !editor.can().toggleHeaderColumn(),
+  },
+  ToggleHeaderRow: {
+    label: 'Toggle Header Row',
+    action: (editor) => editor.chain().focus().toggleHeaderRow().run(),
+    isActive: (editor) => false,
+    isDisabled: (editor) => !editor.can().toggleHeaderRow(),
+  },
+  ToggleHeaderCell: {
+    label: 'Toggle Header Cell',
+    action: (editor) => editor.chain().focus().toggleHeaderCell().run(),
+    isActive: (editor) => false,
+    isDisabled: (editor) => !editor.can().toggleHeaderCell(),
+  },
   Separator: {
     type: 'separator',
   },