@bagelink/vue 0.0.398 → 0.0.400

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/components/form/inputs/RichText.vue.d.ts.map +1 -1
  2. package/dist/index.cjs +2662 -22
  3. package/dist/index.mjs +2662 -22
  4. package/dist/style.css +57 -0
  5. package/package.json +5 -1
  6. package/src/components/form/inputs/RichText.vue +89 -1
package/dist/style.css CHANGED
@@ -1736,6 +1736,63 @@ img.preview[data-v-0dbacaa0] {
1736
1736
  margin-bottom: 0.125rem;
1737
1737
  border-radius: var(--input-border-radius);
1738
1738
  }
1739
+ .tiptap {
1740
+ table {
1741
+ border-collapse: collapse;
1742
+ table-layout: fixed;
1743
+ width: 100%;
1744
+ margin: 0;
1745
+ overflow: hidden;
1746
+ td,
1747
+ th {
1748
+ min-width: 1em;
1749
+ border: 2px solid #ced4da;
1750
+ padding: 3px 5px;
1751
+ vertical-align: top;
1752
+ box-sizing: border-box;
1753
+ position: relative;
1754
+ > * {
1755
+ margin-bottom: 0;
1756
+ }
1757
+ }
1758
+ th {
1759
+ font-weight: bold;
1760
+ text-align: left;
1761
+ background-color: #f1f3f5;
1762
+ }
1763
+ .selectedCell:after {
1764
+ z-index: 2;
1765
+ position: absolute;
1766
+ content: '';
1767
+ left: 0;
1768
+ right: 0;
1769
+ top: 0;
1770
+ bottom: 0;
1771
+ background: rgba(200, 200, 255, 0.4);
1772
+ pointer-events: none;
1773
+ }
1774
+ .column-resize-handle {
1775
+ position: absolute;
1776
+ right: -2px;
1777
+ top: 0;
1778
+ bottom: -2px;
1779
+ width: 4px;
1780
+ background-color: #adf;
1781
+ pointer-events: none;
1782
+ }
1783
+ p {
1784
+ margin: 0;
1785
+ }
1786
+ }
1787
+ }
1788
+ .tableWrapper {
1789
+ padding: 1rem 0;
1790
+ overflow-x: auto;
1791
+ }
1792
+ .resize-cursor {
1793
+ cursor: ew-resize;
1794
+ cursor: col-resize;
1795
+ }
1739
1796
 
1740
1797
  .chart-line {
1741
1798
  width: 100%;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@bagelink/vue",
3
3
  "type": "module",
4
- "version": "0.0.398",
4
+ "version": "0.0.400",
5
5
  "description": "Bagel core sdk packages",
6
6
  "author": {
7
7
  "name": "Neveh Allon",
@@ -63,6 +63,10 @@
63
63
  "@tiptap/starter-kit": "^2.2.4",
64
64
  "@tiptap/extension-image": "^2.2.4",
65
65
  "@tiptap/extension-youtube": "^2.2.4",
66
+ "@tiptap/extension-table": "^2.2.4",
67
+ "@tiptap/extension-table-row": "^2.2.4",
68
+ "@tiptap/extension-table-header": "^2.2.4",
69
+ "@tiptap/extension-table-cell": "^2.2.4",
66
70
  "@tiptap/vue-3": "^2.2.4",
67
71
  "vue": "*",
68
72
  "vue-draggable-next": "^2.2.1",
package/src/components/form/inputs/RichText.vue CHANGED
@@ -29,6 +29,10 @@ import StarterKit from '@tiptap/starter-kit';
29
29
  import { Editor, EditorContent } from '@tiptap/vue-3';
30
30
  import Image from '@tiptap/extension-image';
31
31
  import YouTube from '@tiptap/extension-youtube';
32
+ import Table from '@tiptap/extension-table';
33
+ import TableRow from '@tiptap/extension-table-row';
34
+ import TableCell from '@tiptap/extension-table-cell';
35
+ import TableHeader from '@tiptap/extension-table-header';
32
36
  import type { MaterialIcons } from '@bagelink/vue';
33
37
  // import $el from './FileUploadURL.vue';
34
38
  const { txtField } = bagelFormUtils;
@@ -199,13 +203,31 @@ const config: {
199
203
  icon: 'redo',
200
204
  disabled: () => !editor?.can().chain().focus().redo().run(),
201
205
  },
206
+ {
207
+ name: 'Table',
208
+ command: () =>
209
+ editor
210
+ .chain()
211
+ .focus()
212
+ .insertTable({ rows: 3, cols: 3, withHeaderRow: true })
213
+ .run(),
214
+ icon: 'table',
215
+ },
202
216
  ];
203
217
 
204
218
  const emit = defineEmits(['update:modelValue']);
205
219
 
206
220
  function initEditor() {
207
221
  editor = new Editor({
208
- extensions: [StarterKit, Image, YouTube],
222
+ extensions: [
223
+ StarterKit,
224
+ Image,
225
+ YouTube,
226
+ Table,
227
+ TableRow,
228
+ TableCell,
229
+ TableHeader,
230
+ ],
209
231
  content: props.modelValue,
210
232
  onUpdate: ({ editor }) => emit('update:modelValue', editor.getHTML()),
211
233
  });
@@ -309,4 +331,70 @@ onBeforeUnmount(() => editor?.destroy());
309
331
  margin-bottom: 0.125rem;
310
332
  border-radius: var(--input-border-radius);
311
333
  }
334
+
335
+ .tiptap {
336
+ table {
337
+ border-collapse: collapse;
338
+ table-layout: fixed;
339
+ width: 100%;
340
+ margin: 0;
341
+ overflow: hidden;
342
+
343
+ td,
344
+ th {
345
+ min-width: 1em;
346
+ border: 2px solid #ced4da;
347
+ padding: 3px 5px;
348
+ vertical-align: top;
349
+ box-sizing: border-box;
350
+ position: relative;
351
+
352
+ > * {
353
+ margin-bottom: 0;
354
+ }
355
+ }
356
+
357
+ th {
358
+ font-weight: bold;
359
+ text-align: left;
360
+ background-color: #f1f3f5;
361
+ }
362
+
363
+ .selectedCell:after {
364
+ z-index: 2;
365
+ position: absolute;
366
+ content: '';
367
+ left: 0;
368
+ right: 0;
369
+ top: 0;
370
+ bottom: 0;
371
+ background: rgba(200, 200, 255, 0.4);
372
+ pointer-events: none;
373
+ }
374
+
375
+ .column-resize-handle {
376
+ position: absolute;
377
+ right: -2px;
378
+ top: 0;
379
+ bottom: -2px;
380
+ width: 4px;
381
+ background-color: #adf;
382
+ pointer-events: none;
383
+ }
384
+
385
+ p {
386
+ margin: 0;
387
+ }
388
+ }
389
+ }
390
+
391
+ .tableWrapper {
392
+ padding: 1rem 0;
393
+ overflow-x: auto;
394
+ }
395
+
396
+ .resize-cursor {
397
+ cursor: ew-resize;
398
+ cursor: col-resize;
399
+ }
312
400
  </style>