@budibase/bbui 1.4.0 → 1.4.2

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 (154) hide show
  1. package/LICENSE +375 -0
  2. package/README.md +19 -17
  3. package/dist/bbui.es.js +14 -0
  4. package/dist/bbui.es.js.map +1 -0
  5. package/package.json +71 -26
  6. package/src/ActionButton/ActionButton.svelte +102 -0
  7. package/src/ActionGroup/ActionGroup.svelte +26 -0
  8. package/src/ActionMenu/ActionMenu.svelte +44 -0
  9. package/src/Actions/ClickOutside.svench.svx +30 -0
  10. package/src/Actions/PositionDropdown.svench.svx +81 -0
  11. package/src/Actions/autoresize_textarea.js +14 -0
  12. package/src/Actions/click_outside.js +18 -0
  13. package/src/Actions/position_dropdown.js +75 -0
  14. package/src/Avatar/Avatar.svelte +62 -0
  15. package/src/Badge/Badge.svelte +29 -0
  16. package/src/Banner/Banner.svelte +72 -0
  17. package/src/Banner/BannerDisplay.svelte +41 -0
  18. package/src/Button/Button.svelte +114 -0
  19. package/src/Button/Button.svench +138 -0
  20. package/src/ButtonGroup/ButtonGroup.svelte +30 -0
  21. package/src/ClearButton/ClearButton.svelte +19 -0
  22. package/src/ColorPicker/ColorPicker.svelte +297 -0
  23. package/src/DetailSummary/DetailSummary.svelte +83 -0
  24. package/src/Divider/Divider.svelte +28 -0
  25. package/src/Drawer/Drawer.svelte +113 -0
  26. package/src/Drawer/Drawer.svench +42 -0
  27. package/src/Drawer/DrawerContent.svelte +46 -0
  28. package/src/Form/Checkbox.svelte +23 -0
  29. package/src/Form/Combobox.svelte +45 -0
  30. package/src/Form/Core/Checkbox.svelte +69 -0
  31. package/src/Form/Core/CheckboxGroup.svelte +68 -0
  32. package/src/Form/Core/Combobox.svelte +142 -0
  33. package/src/Form/Core/DatePicker.svelte +257 -0
  34. package/src/Form/Core/Dropzone.svelte +450 -0
  35. package/src/Form/Core/InputDropdown.svelte +228 -0
  36. package/src/Form/Core/Multiselect.svelte +90 -0
  37. package/src/Form/Core/Picker.svelte +259 -0
  38. package/src/Form/Core/PickerDropdown.svelte +436 -0
  39. package/src/Form/Core/RadioGroup.svelte +48 -0
  40. package/src/Form/Core/RichTextField.svelte +42 -0
  41. package/src/Form/Core/Search.svelte +105 -0
  42. package/src/Form/Core/Select.svelte +75 -0
  43. package/src/Form/Core/Slider.svelte +86 -0
  44. package/src/Form/Core/Stepper.svelte +172 -0
  45. package/src/Form/Core/Switch.svelte +37 -0
  46. package/src/Form/Core/TextArea.svelte +78 -0
  47. package/src/Form/Core/TextField.svelte +119 -0
  48. package/src/Form/Core/index.js +15 -0
  49. package/src/Form/DatePicker.svelte +39 -0
  50. package/src/Form/Dropzone.svelte +42 -0
  51. package/src/Form/Field.svelte +42 -0
  52. package/src/Form/FieldLabel.svelte +32 -0
  53. package/src/Form/Input.svelte +40 -45
  54. package/src/Form/InputDropdown.svelte +55 -0
  55. package/src/Form/Multiselect.svelte +40 -0
  56. package/src/Form/PickerDropdown.svelte +134 -0
  57. package/src/Form/RadioGroup.svelte +42 -0
  58. package/src/Form/RichTextField.svelte +36 -0
  59. package/src/Form/Search.svelte +36 -0
  60. package/src/Form/Select.svelte +48 -43
  61. package/src/Form/Slider.svelte +24 -0
  62. package/src/Form/Stepper.svelte +45 -0
  63. package/src/Form/TextArea.svelte +29 -44
  64. package/src/Form/Toggle.svelte +23 -0
  65. package/src/Icon/Icon.svelte +91 -0
  66. package/src/IconPicker/IconPicker.svelte +177 -0
  67. package/src/IconSideNav/IconSideNav.svelte +14 -0
  68. package/src/IconSideNav/IconSideNavItem.svelte +56 -0
  69. package/src/InlineAlert/InlineAlert.svelte +60 -0
  70. package/src/Label/Label.svelte +29 -0
  71. package/src/Layout/Layout.svelte +94 -0
  72. package/src/Layout/Page.svelte +32 -0
  73. package/src/Link/Link.svelte +24 -0
  74. package/src/List/List.svelte +28 -0
  75. package/src/List/ListItem.svelte +98 -0
  76. package/src/Markdown/MarkdownEditor.svelte +60 -0
  77. package/src/Markdown/MarkdownViewer.svelte +70 -0
  78. package/src/Markdown/SpectrumMDE.svelte +184 -0
  79. package/src/Menu/Item.svelte +96 -0
  80. package/src/Menu/Menu.svelte +7 -0
  81. package/src/Menu/Menu.svench +19 -0
  82. package/src/Menu/Section.svelte +10 -0
  83. package/src/Menu/Separator.svelte +1 -0
  84. package/src/Modal/Content.svelte +6 -0
  85. package/src/Modal/CustomContent.svelte +38 -0
  86. package/src/Modal/Modal.svelte +165 -0
  87. package/src/Modal/Modal.svench +117 -0
  88. package/src/Modal/ModalContent.svelte +190 -0
  89. package/src/Modal/QuizModal.svelte +54 -0
  90. package/src/Notification/Notification.svelte +70 -0
  91. package/src/Notification/NotificationDisplay.svelte +43 -0
  92. package/src/Pagination/Pagination.svelte +57 -0
  93. package/src/Popover/Popover.svelte +78 -0
  94. package/src/Popover/Popover.svench +121 -0
  95. package/src/ProgressBar/ProgressBar.svelte +67 -0
  96. package/src/ProgressCircle/ProgressCircle.svelte +62 -0
  97. package/src/SideNavigation/Item.svelte +61 -0
  98. package/src/SideNavigation/Navigation.svelte +12 -0
  99. package/src/StatusLight/StatusLight.svelte +80 -0
  100. package/src/Stores/Notifications.svench.svx +78 -0
  101. package/src/Stores/banner.js +65 -0
  102. package/src/Stores/notifications.js +84 -0
  103. package/src/Table/ArrayRenderer.svelte +17 -0
  104. package/src/Table/AttachmentRenderer.svelte +67 -0
  105. package/src/Table/BoldRenderer.svelte +15 -0
  106. package/src/Table/BooleanRenderer.svelte +42 -0
  107. package/src/Table/CellRenderer.svelte +69 -0
  108. package/src/Table/CodeRenderer.svelte +14 -0
  109. package/src/Table/DateTimeRenderer.svelte +29 -0
  110. package/src/Table/InternalRenderer.svelte +24 -0
  111. package/src/Table/RelationshipRenderer.svelte +40 -0
  112. package/src/Table/SelectEditRenderer.svelte +28 -0
  113. package/src/Table/StringRenderer.svelte +14 -0
  114. package/src/Table/Table.svelte +635 -0
  115. package/src/Table/index.js +1 -0
  116. package/src/Tabs/Tab.svelte +88 -0
  117. package/src/Tabs/Tabs.svelte +130 -0
  118. package/src/Tags/Tag.svelte +43 -0
  119. package/src/Tags/Tags.svelte +7 -0
  120. package/src/Tooltip/Tooltip.svelte +34 -0
  121. package/src/Tooltip/TooltipWrapper.svelte +60 -0
  122. package/src/TreeView/Item.svelte +41 -0
  123. package/src/TreeView/Tree.svelte +16 -0
  124. package/src/Typography/Body.svelte +21 -0
  125. package/src/Typography/Code.svelte +10 -0
  126. package/src/Typography/Detail.svelte +19 -0
  127. package/src/Typography/Heading.svelte +17 -0
  128. package/src/bbui.css +96 -0
  129. package/src/context.js +3 -0
  130. package/src/helpers.js +134 -0
  131. package/src/index.js +98 -11
  132. package/src/spectrum-icons-rollup.js +31 -0
  133. package/src/spectrum-icons-vite.js +31 -0
  134. package/dist/bundle.css +0 -7
  135. package/dist/bundle.css.map +0 -20
  136. package/dist/index.js +0 -1100
  137. package/dist/index.mjs +0 -1086
  138. package/src/Branding/Budibase-logo.svelte +0 -68
  139. package/src/Branding/Logo.svelte +0 -16
  140. package/src/Branding/Logo.svench +0 -8
  141. package/src/Form/Button.svelte +0 -131
  142. package/src/Form/Button.svench +0 -49
  143. package/src/Form/Input.svench +0 -8
  144. package/src/Form/Select.svench +0 -8
  145. package/src/Form/TextArea.svench +0 -8
  146. package/src/Links/Home.svelte +0 -49
  147. package/src/Links/Home.svench +0 -19
  148. package/src/List/Items/DetailSummary.svelte +0 -66
  149. package/src/List/Items/DetailSummary.svench +0 -15
  150. package/src/Switcher/Switcher.svelte +0 -39
  151. package/src/Switcher/Switcher.svench +0 -25
  152. package/src/actions/autoresize_textarea.js +0 -14
  153. package/src/icons/Contribution.svelte +0 -14
  154. package/src/index.svench.svx +0 -35
package/src/List/ListItem.svelte ADDED
@@ -0,0 +1,98 @@
1
+ <script>
2
+ import Body from "../Typography/Body.svelte"
3
+ import Icon from "../Icon/Icon.svelte"
4
+ import Label from "../Label/Label.svelte"
5
+ import Avatar from "../Avatar/Avatar.svelte"
6
+
7
+ export let icon = null
8
+ export let iconBackground = null
9
+ export let avatar = false
10
+ export let title = null
11
+ export let subtitle = null
12
+ export let hoverable = false
13
+
14
+ $: initials = avatar ? title?.[0] : null
15
+ </script>
16
+
17
+ <div class="list-item" class:hoverable on:click>
18
+ <div class="left">
19
+ {#if icon}
20
+ <div class="icon" style="background: {iconBackground || `transparent`};">
21
+ <Icon name={icon} size="S" color={iconBackground ? "white" : null} />
22
+ </div>
23
+ {/if}
24
+ {#if avatar}
25
+ <Avatar {initials} />
26
+ {/if}
27
+ {#if title}
28
+ <Body>{title}</Body>
29
+ {/if}
30
+ {#if subtitle}
31
+ <Label>{subtitle}</Label>
32
+ {/if}
33
+ </div>
34
+ <div class="right">
35
+ <slot />
36
+ </div>
37
+ </div>
38
+
39
+ <style>
40
+ .list-item {
41
+ padding: 0 16px;
42
+ height: 56px;
43
+ background: var(--spectrum-global-color-gray-50);
44
+ display: flex;
45
+ flex-direction: row;
46
+ justify-content: space-between;
47
+ border: 1px solid var(--spectrum-global-color-gray-300);
48
+ transition: background 130ms ease-out;
49
+ }
50
+ .list-item:not(:first-child) {
51
+ border-top: none;
52
+ }
53
+ .list-item:first-child {
54
+ border-top-left-radius: 4px;
55
+ border-top-right-radius: 4px;
56
+ }
57
+ .list-item:last-child {
58
+ border-bottom-left-radius: 4px;
59
+ border-bottom-right-radius: 4px;
60
+ }
61
+ .hoverable:hover {
62
+ cursor: pointer;
63
+ background: var(--spectrum-global-color-gray-75);
64
+ }
65
+ .left,
66
+ .right {
67
+ display: flex;
68
+ flex-direction: row;
69
+ align-items: center;
70
+ gap: var(--spacing-xl);
71
+ }
72
+ .left {
73
+ width: 0;
74
+ flex: 1 1 auto;
75
+ }
76
+ .right {
77
+ flex: 0 0 auto;
78
+ }
79
+ .list-item :global(.spectrum-Icon),
80
+ .list-item :global(.spectrum-Avatar) {
81
+ flex: 0 0 auto;
82
+ }
83
+ .list-item :global(.spectrum-Body) {
84
+ color: var(--spectrum-global-color-gray-900);
85
+ }
86
+ .list-item :global(.spectrum-Body) {
87
+ white-space: nowrap;
88
+ overflow: hidden;
89
+ text-overflow: ellipsis;
90
+ }
91
+ .icon {
92
+ width: var(--spectrum-alias-avatar-size-400);
93
+ height: var(--spectrum-alias-avatar-size-400);
94
+ display: grid;
95
+ place-items: center;
96
+ border-radius: 50%;
97
+ }
98
+ </style>
package/src/Markdown/MarkdownEditor.svelte ADDED
@@ -0,0 +1,60 @@
1
+ <script>
2
+ import SpectrumMDE from "./SpectrumMDE.svelte"
3
+ import { createEventDispatcher } from "svelte"
4
+
5
+ export let value = null
6
+ export let height = null
7
+ export let placeholder = null
8
+ export let id = null
9
+ export let fullScreenOffset = 0
10
+ export let disabled = false
11
+ export let easyMDEOptions
12
+
13
+ const dispatch = createEventDispatcher()
14
+
15
+ let latestValue
16
+ let mde
17
+
18
+ // Ensure the value is updated if the value prop changes outside the editor's
19
+ // control
20
+ $: checkValue(value)
21
+ $: mde?.codemirror.on("change", debouncedUpdate)
22
+
23
+ const checkValue = val => {
24
+ if (mde && val !== latestValue) {
25
+ mde.value(val)
26
+ }
27
+ }
28
+
29
+ const debounce = (fn, interval) => {
30
+ let timeout
31
+ return () => {
32
+ clearTimeout(timeout)
33
+ timeout = setTimeout(fn, interval)
34
+ }
35
+ }
36
+
37
+ const update = () => {
38
+ latestValue = mde.value()
39
+ dispatch("change", latestValue)
40
+ }
41
+
42
+ // Debounce the update function to avoid spamming it constantly
43
+ const debouncedUpdate = debounce(update, 250)
44
+ </script>
45
+
46
+ {#key height}
47
+ <SpectrumMDE
48
+ bind:mde
49
+ scroll={true}
50
+ {height}
51
+ {id}
52
+ {fullScreenOffset}
53
+ {disabled}
54
+ easyMDEOptions={{
55
+ initialValue: value,
56
+ placeholder,
57
+ ...easyMDEOptions,
58
+ }}
59
+ />
60
+ {/key}
package/src/Markdown/MarkdownViewer.svelte ADDED
@@ -0,0 +1,70 @@
1
+ <script>
2
+ import SpectrumMDE from "./SpectrumMDE.svelte"
3
+
4
+ export let value
5
+ export let height
6
+
7
+ let mde
8
+
9
+ // Keep the value up to date
10
+ $: mde && mde.value(value || "")
11
+ $: {
12
+ if (mde && !mde.isPreviewActive()) {
13
+ mde.togglePreview()
14
+ }
15
+ }
16
+ </script>
17
+
18
+ <div class="markdown-viewer" style="height:{height};">
19
+ <SpectrumMDE
20
+ bind:mde
21
+ scroll={false}
22
+ easyMDEOptions={{
23
+ initialValue: value,
24
+ toolbar: false,
25
+ }}
26
+ />
27
+ </div>
28
+
29
+ <style>
30
+ .markdown-viewer {
31
+ overflow: auto;
32
+ }
33
+ /* Remove padding, borders and background colors */
34
+ .markdown-viewer :global(.editor-preview) {
35
+ padding: 0;
36
+ border: none;
37
+ background: transparent;
38
+ }
39
+ .markdown-viewer :global(.CodeMirror) {
40
+ border: none;
41
+ background: transparent;
42
+ padding: 0;
43
+ }
44
+ .markdown-viewer :global(.EasyMDEContainer) {
45
+ background: transparent;
46
+ }
47
+ /* Hide the actual code editor */
48
+ .markdown-viewer :global(.CodeMirror-scroll) {
49
+ display: none;
50
+ }
51
+ /*Hide the scrollbar*/
52
+ .markdown-viewer :global(.CodeMirror-vscrollbar) {
53
+ display: none !important;
54
+ }
55
+ /*Position relatively so we only consume whatever space we need */
56
+ .markdown-viewer :global(.editor-preview-full) {
57
+ position: relative;
58
+ }
59
+ /* Remove margin on the first and last components to fully trim the preview */
60
+ .markdown-viewer :global(.editor-preview-full > :first-child) {
61
+ margin-top: 0;
62
+ }
63
+ .markdown-viewer :global(.editor-preview-full > :last-child) {
64
+ margin-bottom: 0;
65
+ }
66
+ /* Code blocks in preview */
67
+ .markdown-viewer :global(.editor-preview-full pre) {
68
+ background: var(--spectrum-global-color-gray-200);
69
+ }
70
+ </style>
package/src/Markdown/SpectrumMDE.svelte ADDED
@@ -0,0 +1,184 @@
1
+ <script>
2
+ import EasyMDE from "easymde"
3
+ import "easymde/dist/easymde.min.css"
4
+ import { onMount } from "svelte"
5
+
6
+ export let height = null
7
+ export let scroll = true
8
+ export let easyMDEOptions = null
9
+ export let mde = null
10
+ export let id = null
11
+ export let fullScreenOffset = null
12
+ export let disabled = false
13
+
14
+ let element
15
+
16
+ onMount(() => {
17
+ height = height || "200px"
18
+ mde = new EasyMDE({
19
+ element,
20
+ spellChecker: false,
21
+ status: false,
22
+ unorderedListStyle: "-",
23
+ maxHeight: scroll ? height : undefined,
24
+ minHeight: scroll ? undefined : height,
25
+ ...easyMDEOptions,
26
+ })
27
+
28
+ // Revert the editor when we unmount
29
+ return () => {
30
+ mde.toTextArea()
31
+ }
32
+ })
33
+
34
+ $: styleString = getStyleString(fullScreenOffset)
35
+
36
+ const getStyleString = offset => {
37
+ let string = ""
38
+ string += `--fullscreen-offset-x:${offset?.x || "0px"};`
39
+ string += `--fullscreen-offset-y:${offset?.y || "0px"};`
40
+ return string
41
+ }
42
+ </script>
43
+
44
+ <div class:disabled style={styleString}>
45
+ <textarea disabled {id} bind:this={element} />
46
+ </div>
47
+
48
+ <style>
49
+ /* Disabled styles */
50
+ .disabled :global(textarea) {
51
+ display: none;
52
+ }
53
+ .disabled :global(.CodeMirror-cursor) {
54
+ display: none;
55
+ }
56
+ .disabled :global(.EasyMDEContainer) {
57
+ pointer-events: none;
58
+ }
59
+ .disabled :global(.editor-toolbar button i) {
60
+ color: var(--spectrum-global-color-gray-400);
61
+ }
62
+ .disabled :global(.CodeMirror) {
63
+ color: var(--spectrum-global-color-gray-600);
64
+ }
65
+
66
+ /* Toolbar container */
67
+ :global(.EasyMDEContainer .editor-toolbar) {
68
+ background: var(--spectrum-global-color-gray-50);
69
+ border-top: 1px solid var(--spectrum-alias-border-color);
70
+ border-left: 1px solid var(--spectrum-alias-border-color);
71
+ border-right: 1px solid var(--spectrum-alias-border-color);
72
+ }
73
+ /* Main code mirror instance and default color */
74
+ :global(.EasyMDEContainer .CodeMirror) {
75
+ border: 1px solid var(--spectrum-alias-border-color);
76
+ background: var(--spectrum-global-color-gray-50);
77
+ color: var(--spectrum-alias-text-color);
78
+ }
79
+ /* Toolbar button active state */
80
+ :global(.EasyMDEContainer .editor-toolbar button.active) {
81
+ background: var(--spectrum-global-color-gray-200);
82
+ border-color: var(--spectrum-global-color-gray-400);
83
+ }
84
+ /* Toolbar button hover state */
85
+ :global(.EasyMDEContainer .editor-toolbar button:hover) {
86
+ background: var(--spectrum-global-color-gray-200);
87
+ border-color: var(--spectrum-global-color-gray-400);
88
+ }
89
+ /* Toolbar button color */
90
+ :global(.EasyMDEContainer .editor-toolbar button i) {
91
+ color: var(--spectrum-global-color-gray-800);
92
+ }
93
+ /* Separator between toolbar buttons*/
94
+ :global(.EasyMDEContainer .editor-toolbar i.separator) {
95
+ border-color: var(--spectrum-global-color-gray-300);
96
+ }
97
+ /* Cursor */
98
+ :global(.EasyMDEContainer .CodeMirror-cursor) {
99
+ border-color: var(--spectrum-alias-text-color);
100
+ }
101
+ /* Text selections */
102
+ :global(.EasyMDEContainer .CodeMirror-selectedtext) {
103
+ background: var(--spectrum-global-color-gray-400) !important;
104
+ }
105
+ /* Background of lines containing selected text */
106
+ :global(.EasyMDEContainer .CodeMirror-selected) {
107
+ background: var(--spectrum-global-color-gray-400) !important;
108
+ }
109
+ /* Color of text for images and links */
110
+ :global(.EasyMDEContainer .cm-s-easymde .cm-link) {
111
+ color: var(--spectrum-global-color-gray-600);
112
+ }
113
+ /* Color of URL for images and links */
114
+ :global(.EasyMDEContainer .cm-s-easymde .cm-url) {
115
+ color: var(--spectrum-global-color-gray-500);
116
+ }
117
+ /* Full preview window */
118
+ :global(.EasyMDEContainer .editor-preview) {
119
+ background: var(--spectrum-global-color-gray-50);
120
+ }
121
+ /* Side by side preview window */
122
+ :global(.EasyMDEContainer .editor-preview) {
123
+ border: 1px solid var(--spectrum-alias-border-color);
124
+ }
125
+ /* Code blocks in editor */
126
+ :global(.EasyMDEContainer .cm-s-easymde .cm-comment) {
127
+ background: var(--spectrum-global-color-gray-100);
128
+ }
129
+ /* Code blocks in preview */
130
+ :global(.EasyMDEContainer pre) {
131
+ background: var(--spectrum-global-color-gray-100);
132
+ padding: 4px;
133
+ border-radius: 4px;
134
+ }
135
+ :global(.EasyMDEContainer code) {
136
+ color: #e83e8c;
137
+ }
138
+ :global(.EasyMDEContainer pre code) {
139
+ color: var(--spectrum-alias-text-color);
140
+ }
141
+ /* Block quotes */
142
+ :global(.EasyMDEContainer blockquote) {
143
+ border-left: 4px solid var(--spectrum-global-color-gray-400);
144
+ color: var(--spectrum-global-color-gray-700);
145
+ margin-left: 0;
146
+ padding-left: 20px;
147
+ }
148
+ /* HR's */
149
+ :global(.EasyMDEContainer hr) {
150
+ background-color: var(--spectrum-global-color-gray-300);
151
+ border: none;
152
+ height: 2px;
153
+ }
154
+ /* Tables */
155
+ :global(.EasyMDEContainer td, .EasyMDEContainer th) {
156
+ border-color: var(--spectrum-alias-border-color) !important;
157
+ }
158
+ /* Links */
159
+ :global(.EasyMDEContainer a) {
160
+ color: var(--primaryColor);
161
+ }
162
+ :global(.EasyMDEContainer a:hover) {
163
+ color: var(--primaryColorHover);
164
+ }
165
+ /* Allow full screen offset */
166
+ :global(.EasyMDEContainer .editor-toolbar.fullscreen) {
167
+ left: var(--fullscreen-offset-x);
168
+ top: var(--fullscreen-offset-y);
169
+ }
170
+ :global(.EasyMDEContainer .CodeMirror-fullscreen) {
171
+ left: var(--fullscreen-offset-x);
172
+ top: calc(50px + var(--fullscreen-offset-y));
173
+ }
174
+
175
+ :global(.EasyMDEContainer .CodeMirror-fullscreen.CodeMirror-sided) {
176
+ width: calc((100% - var(--fullscreen-offset-x)) / 2) !important;
177
+ }
178
+
179
+ :global(.EasyMDEContainer .editor-preview-side) {
180
+ left: calc(50% + (var(--fullscreen-offset-x) / 2));
181
+ top: calc(50px + var(--fullscreen-offset-y));
182
+ width: calc((100% - var(--fullscreen-offset-x)) / 2) !important;
183
+ }
184
+ </style>
package/src/Menu/Item.svelte ADDED
@@ -0,0 +1,96 @@
1
+ <script>
2
+ import { createEventDispatcher, getContext } from "svelte"
3
+ import Icon from "../Icon/Icon.svelte"
4
+
5
+ const dispatch = createEventDispatcher()
6
+ const actionMenu = getContext("actionMenu")
7
+
8
+ export let dataCy
9
+ export let icon = undefined
10
+ export let disabled = undefined
11
+ export let noClose = false
12
+ export let keyBind = undefined
13
+
14
+ $: keys = getKeys(keyBind)
15
+
16
+ const getKeys = keyBind => {
17
+ let keys = keyBind?.split("+") || []
18
+ for (let i = 0; i < keys.length; i++) {
19
+ if (
20
+ keys[i].toLowerCase() === "ctrl" &&
21
+ navigator.platform.startsWith("Mac")
22
+ ) {
23
+ keys[i] = "⌘"
24
+ }
25
+ }
26
+ return keys
27
+ }
28
+
29
+ const onClick = () => {
30
+ if (actionMenu && !noClose) {
31
+ actionMenu.hide()
32
+ }
33
+ dispatch("click")
34
+ }
35
+ </script>
36
+
37
+ <li
38
+ data-cy={dataCy}
39
+ on:click|preventDefault={disabled ? null : onClick}
40
+ class="spectrum-Menu-item"
41
+ class:is-disabled={disabled}
42
+ role="menuitem"
43
+ tabindex="0"
44
+ >
45
+ {#if icon}
46
+ <div class="icon">
47
+ <Icon name={icon} size="S" />
48
+ </div>
49
+ {/if}
50
+ <span class="spectrum-Menu-itemLabel"><slot /></span>
51
+ {#if keys?.length}
52
+ <div class="keys">
53
+ {#each keys as key}
54
+ <div class="key">
55
+ {#if key.startsWith("!")}
56
+ <Icon size="XS" name={key.split("!")[1]} />
57
+ {:else}
58
+ {key}
59
+ {/if}
60
+ </div>
61
+ {/each}
62
+ </div>
63
+ {/if}
64
+ </li>
65
+
66
+ <style>
67
+ .icon {
68
+ align-self: center;
69
+ margin-right: var(--spacing-s);
70
+ }
71
+ .keys {
72
+ margin-left: 30px;
73
+ display: flex;
74
+ flex-direction: row;
75
+ justify-content: flex-end;
76
+ align-items: center;
77
+ gap: 4px;
78
+ }
79
+ .key {
80
+ color: var(--spectrum-global-color-gray-900);
81
+ padding: 2px 4px;
82
+ font-size: 12px;
83
+ font-weight: 600;
84
+ background-color: var(--spectrum-global-color-gray-300);
85
+ border-radius: 4px;
86
+ min-width: 12px;
87
+ height: 16px;
88
+ text-align: center;
89
+ margin: -1px 0;
90
+ display: grid;
91
+ place-items: center;
92
+ }
93
+ .is-disabled .key {
94
+ color: var(--spectrum-global-color-gray-600);
95
+ }
96
+ </style>
package/src/Menu/Menu.svelte ADDED
@@ -0,0 +1,7 @@
1
+ <script>
2
+ import "@spectrum-css/menu/dist/index-vars.css"
3
+ </script>
4
+
5
+ <ul class="spectrum-Menu" role="menu">
6
+ <slot />
7
+ </ul>
package/src/Menu/Menu.svench ADDED
@@ -0,0 +1,19 @@
1
+ <script>
2
+ import Menu from './Menu.svelte'
3
+ import Separator from './Separator.svelte'
4
+ import Section from './Section.svelte'
5
+ import Item from './Item.svelte'
6
+ </script>
7
+
8
+ <Menu>
9
+ <Section heading="Section heading">
10
+ <Item>Some Item 1</Item>
11
+ <Item>Some Item 2</Item>
12
+ <Item>Some Item 3</Item>
13
+ </Section>
14
+ <Separator />
15
+ <Section heading="Section heading">
16
+ <Item icon="SaveFloppy">Save</Item>
17
+ <Item disabled icon="DataDownload">Download</Item>
18
+ </Section>
19
+ </Menu>
package/src/Menu/Section.svelte ADDED
@@ -0,0 +1,10 @@
1
+ <script>
2
+ export let heading
3
+ </script>
4
+
5
+ <li role="presentation">
6
+ <span class="spectrum-Menu-sectionHeading">{heading}</span>
7
+ <ul class="spectrum-Menu" role="group">
8
+ <slot />
9
+ </ul>
10
+ </li>
package/src/Menu/Separator.svelte ADDED
@@ -0,0 +1 @@
1
+ <li class="spectrum-Menu-divider" role="separator" />
package/src/Modal/Content.svelte ADDED
@@ -0,0 +1,6 @@
1
+ <script>
2
+ import Input from "../Form/Input.svelte"
3
+ let value = ""
4
+ </script>
5
+
6
+ <Input label="Your Name" bind:value />
package/src/Modal/CustomContent.svelte ADDED
@@ -0,0 +1,38 @@
1
+ <script>
2
+ import { getContext } from "svelte"
3
+ import Context from "../context"
4
+
5
+ const { hide } = getContext(Context.Modal)
6
+
7
+ let count = 0
8
+ const clicks = 5
9
+ $: if (count === clicks) hide()
10
+ $: remaining = clicks - count
11
+
12
+ function increment() {
13
+ count++
14
+ }
15
+ </script>
16
+
17
+ <div on:click={increment}>
18
+ Click me
19
+ {remaining}
20
+ more time{remaining === 1 ? "" : "s"}
21
+ to close this modal!
22
+ </div>
23
+
24
+ <style>
25
+ div {
26
+ padding: 40px;
27
+ background-color: var(--purple);
28
+ color: white;
29
+ font-family: var(--font-sans);
30
+ font-weight: bold;
31
+ text-align: center;
32
+ user-select: none;
33
+ font-size: 20px;
34
+ }
35
+ div:hover {
36
+ cursor: pointer;
37
+ }
38
+ </style>