frappe-ui 1.0.0-beta.2 → 1.0.0-beta.4

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 (113) hide show
  1. package/package.json +30 -4
  2. package/src/components/Button/Button.api.md +37 -32
  3. package/src/components/Button/Button.cy.ts +1 -1
  4. package/src/components/Button/Button.vue +303 -284
  5. package/src/components/Button/stories/Icons.vue +8 -1
  6. package/src/components/Button/stories/Sizes.vue +1 -2
  7. package/src/components/Button/stories/Themes.vue +0 -2
  8. package/src/components/Button/types.ts +38 -32
  9. package/src/components/KeyboardShortcut.vue +3 -7
  10. package/src/components/LoadingIndicator.vue +13 -22
  11. package/src/components/LoadingText.vue +3 -13
  12. package/src/components/Spinner/Spinner.api.md +32 -0
  13. package/src/components/Spinner/Spinner.cy.ts +87 -0
  14. package/src/components/Spinner/Spinner.md +21 -0
  15. package/src/components/Spinner/Spinner.vue +168 -0
  16. package/src/components/Spinner/index.ts +2 -0
  17. package/src/components/Spinner/stories/InContext.vue +49 -0
  18. package/src/components/Spinner/stories/Sizes.vue +12 -0
  19. package/src/components/Spinner/stories/Themes.vue +10 -0
  20. package/src/components/Spinner/stories/Track.vue +12 -0
  21. package/src/components/Spinner/types.ts +14 -0
  22. package/src/components/TextEditor/extensions/iframe/iframe-extension.ts +62 -19
  23. package/src/components/Tooltip/Tooltip.cy.ts +48 -0
  24. package/src/components/Tooltip/Tooltip.md +6 -0
  25. package/src/components/Tooltip/Tooltip.vue +19 -4
  26. package/src/components/Tooltip/TooltipProvider.vue +53 -0
  27. package/src/components/Tooltip/index.ts +1 -0
  28. package/src/components/Tooltip/stories/Group.vue +22 -0
  29. package/src/index.ts +3 -1
  30. package/src/molecules/editor/EditorTableMenu.vue +216 -0
  31. package/src/molecules/editor/MenuItems.vue +64 -52
  32. package/src/molecules/editor/commands.ts +3 -2
  33. package/src/molecules/editor/components/EditorDropZone.vue +105 -0
  34. package/src/molecules/editor/components/EditorPopover.vue +89 -0
  35. package/src/molecules/editor/components/MediaNodeView.vue +156 -49
  36. package/src/molecules/editor/components/MediaResizeHandles.vue +36 -0
  37. package/src/molecules/editor/components/MediaToolbar.vue +107 -53
  38. package/src/molecules/editor/components/TableContextMenu.vue +87 -0
  39. package/src/molecules/editor/components/UploadProgressIndicator.vue +33 -0
  40. package/src/molecules/editor/components/VideoControls.vue +208 -0
  41. package/src/molecules/editor/components/font-color/ColorSwatchGrid.vue +3 -5
  42. package/src/molecules/editor/components/font-color/fontColorController.ts +28 -23
  43. package/src/molecules/editor/components/media-node-view-controller.ts +4 -4
  44. package/src/molecules/editor/components/media-node-view-utils.test.ts +0 -13
  45. package/src/molecules/editor/components/media-node-view-utils.ts +0 -10
  46. package/src/molecules/editor/components/table-color/tableCellColorController.ts +80 -0
  47. package/src/molecules/editor/composables/useEditorFileDrop.ts +117 -0
  48. package/src/molecules/editor/composables/useFloatingPopup.ts +46 -2
  49. package/src/molecules/editor/composables/useNodeViewResize.test.ts +60 -11
  50. package/src/molecules/editor/composables/useNodeViewResize.ts +80 -21
  51. package/src/molecules/editor/composables/useTableCellColorState.ts +78 -0
  52. package/src/molecules/editor/composables/useWindowFileDragging.ts +68 -0
  53. package/src/molecules/editor/extensions/code-block/CodeBlockComponent.css +6 -26
  54. package/src/molecules/editor/extensions/code-block/CodeBlockComponent.vue +107 -22
  55. package/src/molecules/editor/extensions/content-paste/content-paste-extension.ts +5 -3
  56. package/src/molecules/editor/extensions/iframe/IframeInsertDialog.vue +31 -4
  57. package/src/molecules/editor/extensions/iframe/IframeNodeView.vue +54 -48
  58. package/src/molecules/editor/extensions/iframe/iframe-allowlist.ts +33 -4
  59. package/src/molecules/editor/extensions/iframe/iframe-commands.ts +49 -5
  60. package/src/molecules/editor/extensions/iframe/iframe-embed-utils.ts +30 -0
  61. package/src/molecules/editor/extensions/iframe/iframe-extension.ts +4 -4
  62. package/src/molecules/editor/extensions/iframe/iframeInsertDialogController.ts +12 -1
  63. package/src/molecules/editor/extensions/iframe/index.ts +4 -4
  64. package/src/molecules/editor/extensions/iframe/useIframeDialog.ts +25 -13
  65. package/src/molecules/editor/extensions/image/image-extension.ts +29 -11
  66. package/src/molecules/editor/extensions/image-group/ImageGroupGrid.vue +27 -11
  67. package/src/molecules/editor/extensions/image-group/ImageGroupGridCell.vue +55 -11
  68. package/src/molecules/editor/extensions/image-group/ImageGroupNodeView.vue +64 -31
  69. package/src/molecules/editor/extensions/image-group/ImageGroupUploadDialog.vue +81 -37
  70. package/src/molecules/editor/extensions/image-group/image-group-extension.ts +4 -3
  71. package/src/molecules/editor/extensions/image-group/useImageGroupDialog.ts +116 -17
  72. package/src/molecules/editor/extensions/link/LinkEditorPopup.vue +214 -71
  73. package/src/molecules/editor/extensions/link/link-commands.ts +24 -3
  74. package/src/molecules/editor/extensions/link/link-extension.ts +2 -2
  75. package/src/molecules/editor/extensions/link/link-popup-controller.ts +46 -2
  76. package/src/molecules/editor/extensions/link/link-shortcut-plugin.ts +7 -2
  77. package/src/molecules/editor/extensions/media-drop/media-drop-extension.ts +136 -0
  78. package/src/molecules/editor/extensions/shared/media-dimensions.ts +36 -3
  79. package/src/molecules/editor/extensions/shared/media-node-ops.ts +17 -0
  80. package/src/molecules/editor/extensions/shared/media-plugin.test.ts +60 -0
  81. package/src/molecules/editor/extensions/shared/media-plugin.ts +7 -37
  82. package/src/molecules/editor/extensions/shared/media-upload-engine.test.ts +39 -2
  83. package/src/molecules/editor/extensions/shared/media-upload-engine.ts +104 -10
  84. package/src/molecules/editor/extensions/shared/media-upload-state.ts +55 -0
  85. package/src/molecules/editor/extensions/shared/media-upload-types.ts +52 -1
  86. package/src/molecules/editor/extensions/shared/suggestion-helpers.ts +20 -0
  87. package/src/molecules/editor/extensions/shared/suggestion-types.ts +7 -0
  88. package/src/molecules/editor/extensions/shared/upload-types.ts +1 -0
  89. package/src/molecules/editor/extensions/slash-commands/slash-commands-extension.test.ts +38 -0
  90. package/src/molecules/editor/extensions/slash-commands/slash-commands-extension.ts +109 -55
  91. package/src/molecules/editor/extensions/suggestion/SuggestionList.vue +62 -22
  92. package/src/molecules/editor/extensions/suggestion/SuggestionListItem.vue +1 -1
  93. package/src/molecules/editor/extensions/suggestion/createSuggestionExtension.ts +4 -0
  94. package/src/molecules/editor/extensions/table/table-cell-color.ts +113 -0
  95. package/src/molecules/editor/extensions/table/table-navigation.ts +352 -0
  96. package/src/molecules/editor/extensions/table/table-selection-overlay.ts +114 -0
  97. package/src/molecules/editor/extensions/video/video-extension.ts +72 -5
  98. package/src/molecules/editor/extensions.ts +145 -7
  99. package/src/molecules/editor/index.ts +7 -0
  100. package/src/molecules/editor/kits.test.ts +12 -1
  101. package/src/molecules/editor/kits.ts +46 -33
  102. package/src/molecules/editor/menu.test.ts +3 -1
  103. package/src/molecules/editor/menu.ts +112 -0
  104. package/src/molecules/editor/style.css +77 -2
  105. package/src/molecules/editor/useEditor.test.ts +4 -0
  106. package/src/molecules/editor/useEditor.ts +7 -3
  107. package/src/utils/config.ts +4 -1
  108. package/src/utils/dialog.cy.ts +7 -7
  109. package/src/utils/fileSize.ts +36 -0
  110. package/src/utils/fileUploadHandler.ts +49 -5
  111. package/src/utils/plugin.js +19 -0
  112. package/src/utils/useFileUpload.ts +68 -22
  113. package/src/components/Spinner.vue +0 -3
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "frappe-ui",
3
- "version": "1.0.0-beta.2",
3
+ "version": "1.0.0-beta.4",
4
4
  "description": "A set of components and utilities for rapid UI development",
5
5
  "type": "module",
6
6
  "sideEffects": false,
@@ -17,8 +17,8 @@
17
17
  "test:cypress:coverage": "cross-env COVERAGE=true cypress run --component",
18
18
  "coverage": "yarn test:coverage && yarn test:cypress:coverage && yarn coverage:merge",
19
19
  "coverage:merge": "tsx .github/scripts/merge-coverage.ts",
20
- "type-check": "vue-tsc --noEmit",
21
- "type-check:tsc": "tsc --noEmit",
20
+ "type-check": "vue-tsc --noEmit -p tsconfig.app.json",
21
+ "type-check:tsc": "tsc --noEmit -p tsconfig.app.json",
22
22
  "format": "prettier -w ./src",
23
23
  "bump-and-release": "yarn test && git pull --rebase origin main && yarn run release-patch",
24
24
  "release-patch": "yarn version --patch && git push && git push --tags",
@@ -99,28 +99,38 @@
99
99
  "@tailwindcss/line-clamp": "^0.4.4",
100
100
  "@tailwindcss/typography": "^0.5.16",
101
101
  "@tiptap/core": "^3.11.0",
102
+ "@tiptap/extension-blockquote": "3.11.0",
103
+ "@tiptap/extension-bold": "3.11.0",
102
104
  "@tiptap/extension-bubble-menu": "^3.11.0",
103
105
  "@tiptap/extension-code": "^3.11.0",
104
106
  "@tiptap/extension-code-block": "^3.11.0",
105
107
  "@tiptap/extension-code-block-lowlight": "^3.11.0",
106
108
  "@tiptap/extension-color": "^3.11.0",
109
+ "@tiptap/extension-document": "3.11.0",
110
+ "@tiptap/extension-hard-break": "3.11.0",
107
111
  "@tiptap/extension-heading": "^3.11.0",
108
112
  "@tiptap/extension-highlight": "^3.11.0",
113
+ "@tiptap/extension-horizontal-rule": "3.11.0",
109
114
  "@tiptap/extension-image": "^3.11.0",
115
+ "@tiptap/extension-italic": "3.11.0",
110
116
  "@tiptap/extension-link": "^3.11.0",
111
117
  "@tiptap/extension-list": "^3.11.0",
112
118
  "@tiptap/extension-mention": "^3.11.0",
113
119
  "@tiptap/extension-node-range": "^3.11.0",
114
120
  "@tiptap/extension-placeholder": "^3.11.0",
121
+ "@tiptap/extension-paragraph": "3.11.0",
122
+ "@tiptap/extension-strike": "3.11.0",
115
123
  "@tiptap/extension-table": "^3.11.0",
116
124
  "@tiptap/extension-task-item": "^3.11.0",
117
125
  "@tiptap/extension-task-list": "^3.11.0",
126
+ "@tiptap/extension-text": "3.11.0",
118
127
  "@tiptap/extension-text-align": "^3.11.0",
119
128
  "@tiptap/extension-text-style": "^3.11.0",
120
129
  "@tiptap/extension-typography": "^3.11.0",
130
+ "@tiptap/extension-underline": "3.11.0",
121
131
  "@tiptap/extensions": "^3.11.0",
122
132
  "@tiptap/pm": "^3.11.0",
123
- "@tiptap/starter-kit": "^3.11.0",
133
+ "@tiptap/starter-kit": "3.11.0",
124
134
  "@tiptap/suggestion": "^3.11.0",
125
135
  "@tiptap/vue-3": "^3.11.0",
126
136
  "@vueuse/core": "^10.4.1",
@@ -182,6 +192,22 @@
182
192
  "prosemirror-state": "1.4.3",
183
193
  "prosemirror-view": "1.40.0",
184
194
  "prosemirror-transform": "1.10.4",
195
+ "@tiptap/extension-blockquote": "3.11.0",
196
+ "@tiptap/extension-bold": "3.11.0",
197
+ "@tiptap/extension-bullet-list": "3.11.0",
198
+ "@tiptap/extension-document": "3.11.0",
199
+ "@tiptap/extension-dropcursor": "3.11.0",
200
+ "@tiptap/extension-gapcursor": "3.11.0",
201
+ "@tiptap/extension-hard-break": "3.11.0",
202
+ "@tiptap/extension-horizontal-rule": "3.11.0",
203
+ "@tiptap/extension-italic": "3.11.0",
204
+ "@tiptap/extension-list-item": "3.11.0",
205
+ "@tiptap/extension-list-keymap": "3.11.0",
206
+ "@tiptap/extension-ordered-list": "3.11.0",
207
+ "@tiptap/extension-paragraph": "3.11.0",
208
+ "@tiptap/extension-strike": "3.11.0",
209
+ "@tiptap/extension-text": "3.11.0",
210
+ "@tiptap/extension-underline": "3.11.0",
185
211
  "defu": "^6.1.5",
186
212
  "esbuild": "^0.25.0",
187
213
  "lodash": "^4.18.0",
@@ -10,27 +10,42 @@
10
10
  description: 'Visual color theme of the button',
11
11
  required: false,
12
12
  type: 'Theme',
13
- default: '"gray"'
14
- },
15
- {
16
- name: 'size',
17
- description: 'Controls the button size',
18
- required: false,
19
- type: 'Size',
20
- default: '"sm"'
13
+ default: '\'gray\''
21
14
  },
22
15
  {
23
16
  name: 'variant',
24
17
  description: 'Visual style of the button',
25
18
  required: false,
26
19
  type: 'Variant',
27
- default: '"subtle"'
20
+ default: '\'subtle\''
21
+ },
22
+ {
23
+ name: 'type',
24
+ description: 'Native button type',
25
+ required: false,
26
+ type: '"button" | "submit" | "reset"',
27
+ default: '\'button\''
28
28
  },
29
29
  {
30
30
  name: 'label',
31
31
  description: 'Text label displayed inside the button',
32
32
  required: false,
33
- type: 'string'
33
+ type: 'string',
34
+ default: 'undefined'
35
+ },
36
+ {
37
+ name: 'loading',
38
+ description: 'Shows a loading state and disables interaction',
39
+ required: false,
40
+ type: 'boolean',
41
+ default: 'false'
42
+ },
43
+ {
44
+ name: 'size',
45
+ description: 'Controls the button size',
46
+ required: false,
47
+ type: 'Size',
48
+ default: '\'sm\''
34
49
  },
35
50
  {
36
51
  name: 'icon',
@@ -54,20 +69,15 @@
54
69
  name: 'tooltip',
55
70
  description: 'Tooltip text shown on hover',
56
71
  required: false,
57
- type: 'string'
58
- },
59
- {
60
- name: 'loading',
61
- description: 'Shows a loading state and disables interaction',
62
- required: false,
63
- type: 'boolean',
64
- default: 'false'
72
+ type: 'string',
73
+ default: 'undefined'
65
74
  },
66
75
  {
67
76
  name: 'loadingText',
68
77
  description: 'Text shown while the button is loading',
69
78
  required: false,
70
- type: 'string'
79
+ type: 'string',
80
+ default: 'undefined'
71
81
  },
72
82
  {
73
83
  name: 'disabled',
@@ -80,20 +90,15 @@
80
90
  name: 'route',
81
91
  description: 'Router destination when used as a link',
82
92
  required: false,
83
- type: 'string | kt | Tt'
93
+ type: 'string | kt | Tt',
94
+ default: 'undefined'
84
95
  },
85
96
  {
86
97
  name: 'link',
87
98
  description: 'External link URL',
88
99
  required: false,
89
- type: 'string'
90
- },
91
- {
92
- name: 'type',
93
- description: 'Native button type',
94
- required: false,
95
- type: '"button" | "submit" | "reset"',
96
- default: '"button"'
100
+ type: 'string',
101
+ default: 'undefined'
97
102
  }
98
103
  ]
99
104
 
@@ -101,22 +106,22 @@
101
106
  {
102
107
  name: 'prefix',
103
108
  description: 'Content shown before the button label (left icon / custom content)',
104
- type: 'any'
109
+ type: '[void]'
105
110
  },
106
111
  {
107
112
  name: 'icon',
108
113
  description: 'Icon-only content for icon buttons',
109
- type: 'any'
114
+ type: '[void]'
110
115
  },
111
116
  {
112
117
  name: 'default',
113
118
  description: 'Main button content (overrides `label`)',
114
- type: 'any'
119
+ type: '[void]'
115
120
  },
116
121
  {
117
122
  name: 'suffix',
118
123
  description: 'Content shown after the button label (right icon / custom content)',
119
- type: 'any'
124
+ type: '[void]'
120
125
  }
121
126
  ]
122
127
  </script>
@@ -57,7 +57,7 @@ describe('<Button />', () => {
57
57
  })
58
58
  cy.get('button').should('be.disabled')
59
59
  cy.get('button').should('contain.text', 'Processing...')
60
- cy.get('svg').should('exist') // Loading Spinner
60
+ cy.get('[role="status"]').should('exist') // Loading Spinner
61
61
  })
62
62
 
63
63
  it('handles prefix and suffix slots (replacing deprecated icon props)', () => {