@vuu-ui/vuu-layout 0.8.34 → 0.8.35

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 (248) hide show
  1. package/package.json +8 -10
  2. package/cjs/Component.js +0 -14
  3. package/cjs/Component.js.map +0 -1
  4. package/cjs/DraggableLayout.css +0 -18
  5. package/cjs/DraggableLayout.js +0 -24
  6. package/cjs/DraggableLayout.js.map +0 -1
  7. package/cjs/dock-layout/DockLayout.css +0 -36
  8. package/cjs/dock-layout/DockLayout.js +0 -27
  9. package/cjs/dock-layout/DockLayout.js.map +0 -1
  10. package/cjs/dock-layout/Drawer.css +0 -159
  11. package/cjs/dock-layout/Drawer.js +0 -87
  12. package/cjs/dock-layout/Drawer.js.map +0 -1
  13. package/cjs/drag-drop/BoxModel.js +0 -422
  14. package/cjs/drag-drop/BoxModel.js.map +0 -1
  15. package/cjs/drag-drop/DragState.js +0 -154
  16. package/cjs/drag-drop/DragState.js.map +0 -1
  17. package/cjs/drag-drop/Draggable.js +0 -192
  18. package/cjs/drag-drop/Draggable.js.map +0 -1
  19. package/cjs/drag-drop/DropMenu.css +0 -71
  20. package/cjs/drag-drop/DropMenu.js +0 -46
  21. package/cjs/drag-drop/DropMenu.js.map +0 -1
  22. package/cjs/drag-drop/DropTarget.js +0 -244
  23. package/cjs/drag-drop/DropTarget.js.map +0 -1
  24. package/cjs/drag-drop/DropTargetRenderer.css +0 -40
  25. package/cjs/drag-drop/DropTargetRenderer.js +0 -233
  26. package/cjs/drag-drop/DropTargetRenderer.js.map +0 -1
  27. package/cjs/flexbox/Flexbox.css +0 -45
  28. package/cjs/flexbox/Flexbox.js +0 -61
  29. package/cjs/flexbox/Flexbox.js.map +0 -1
  30. package/cjs/flexbox/FlexboxLayout.js +0 -30
  31. package/cjs/flexbox/FlexboxLayout.js.map +0 -1
  32. package/cjs/flexbox/FluidGrid.css +0 -134
  33. package/cjs/flexbox/FluidGrid.js +0 -78
  34. package/cjs/flexbox/FluidGrid.js.map +0 -1
  35. package/cjs/flexbox/FluidGridLayout.js +0 -14
  36. package/cjs/flexbox/FluidGridLayout.js.map +0 -1
  37. package/cjs/flexbox/Splitter.css +0 -148
  38. package/cjs/flexbox/Splitter.js +0 -113
  39. package/cjs/flexbox/Splitter.js.map +0 -1
  40. package/cjs/flexbox/flexbox-utils.js +0 -109
  41. package/cjs/flexbox/flexbox-utils.js.map +0 -1
  42. package/cjs/flexbox/useResponsiveSizing.js +0 -62
  43. package/cjs/flexbox/useResponsiveSizing.js.map +0 -1
  44. package/cjs/flexbox/useSplitterResizing.js +0 -209
  45. package/cjs/flexbox/useSplitterResizing.js.map +0 -1
  46. package/cjs/index.js.map +0 -1
  47. package/cjs/layout-action.js +0 -27
  48. package/cjs/layout-action.js.map +0 -1
  49. package/cjs/layout-header/Header.css +0 -9
  50. package/cjs/layout-header/Header.js +0 -122
  51. package/cjs/layout-header/Header.js.map +0 -1
  52. package/cjs/layout-provider/LayoutProvider.js +0 -178
  53. package/cjs/layout-provider/LayoutProvider.js.map +0 -1
  54. package/cjs/layout-provider/LayoutProviderContext.js +0 -14
  55. package/cjs/layout-provider/LayoutProviderContext.js.map +0 -1
  56. package/cjs/layout-provider/useLayoutDragDrop.js +0 -170
  57. package/cjs/layout-provider/useLayoutDragDrop.js.map +0 -1
  58. package/cjs/layout-reducer/flexUtils.js +0 -219
  59. package/cjs/layout-reducer/flexUtils.js.map +0 -1
  60. package/cjs/layout-reducer/insert-layout-element.js +0 -273
  61. package/cjs/layout-reducer/insert-layout-element.js.map +0 -1
  62. package/cjs/layout-reducer/layout-reducer.js +0 -198
  63. package/cjs/layout-reducer/layout-reducer.js.map +0 -1
  64. package/cjs/layout-reducer/layoutTypes.js +0 -41
  65. package/cjs/layout-reducer/layoutTypes.js.map +0 -1
  66. package/cjs/layout-reducer/layoutUtils.js +0 -226
  67. package/cjs/layout-reducer/layoutUtils.js.map +0 -1
  68. package/cjs/layout-reducer/move-layout-element.js +0 -31
  69. package/cjs/layout-reducer/move-layout-element.js.map +0 -1
  70. package/cjs/layout-reducer/remove-layout-element.js +0 -223
  71. package/cjs/layout-reducer/remove-layout-element.js.map +0 -1
  72. package/cjs/layout-reducer/replace-layout-element.js +0 -91
  73. package/cjs/layout-reducer/replace-layout-element.js.map +0 -1
  74. package/cjs/layout-reducer/resize-flex-children.js +0 -61
  75. package/cjs/layout-reducer/resize-flex-children.js.map +0 -1
  76. package/cjs/layout-reducer/wrap-layout-element.js +0 -212
  77. package/cjs/layout-reducer/wrap-layout-element.js.map +0 -1
  78. package/cjs/layout-view/View.css +0 -62
  79. package/cjs/layout-view/View.js +0 -155
  80. package/cjs/layout-view/View.js.map +0 -1
  81. package/cjs/layout-view/useView.js +0 -92
  82. package/cjs/layout-view/useView.js.map +0 -1
  83. package/cjs/layout-view/useViewResize.js +0 -42
  84. package/cjs/layout-view/useViewResize.js.map +0 -1
  85. package/cjs/layout-view-actions/ViewContext.js +0 -16
  86. package/cjs/layout-view-actions/ViewContext.js.map +0 -1
  87. package/cjs/layout-view-actions/useViewActionDispatcher.js +0 -103
  88. package/cjs/layout-view-actions/useViewActionDispatcher.js.map +0 -1
  89. package/cjs/palette/Palette.css +0 -33
  90. package/cjs/palette/Palette.js +0 -118
  91. package/cjs/palette/Palette.js.map +0 -1
  92. package/cjs/placeholder/LayoutStartPanel.css +0 -30
  93. package/cjs/placeholder/LayoutStartPanel.js +0 -51
  94. package/cjs/placeholder/LayoutStartPanel.js.map +0 -1
  95. package/cjs/placeholder/Placeholder.css +0 -17
  96. package/cjs/placeholder/Placeholder.js +0 -25
  97. package/cjs/placeholder/Placeholder.js.map +0 -1
  98. package/cjs/registry/ComponentRegistry.js +0 -27
  99. package/cjs/registry/ComponentRegistry.js.map +0 -1
  100. package/cjs/responsive/breakpoints.js +0 -36
  101. package/cjs/responsive/breakpoints.js.map +0 -1
  102. package/cjs/responsive/use-breakpoints.js +0 -76
  103. package/cjs/responsive/use-breakpoints.js.map +0 -1
  104. package/cjs/responsive/useResizeObserver.js +0 -118
  105. package/cjs/responsive/useResizeObserver.js.map +0 -1
  106. package/cjs/responsive/utils.js +0 -34
  107. package/cjs/responsive/utils.js.map +0 -1
  108. package/cjs/stack/Stack.css +0 -39
  109. package/cjs/stack/Stack.js +0 -139
  110. package/cjs/stack/Stack.js.map +0 -1
  111. package/cjs/stack/StackLayout.js +0 -122
  112. package/cjs/stack/StackLayout.js.map +0 -1
  113. package/cjs/use-persistent-state.js +0 -109
  114. package/cjs/use-persistent-state.js.map +0 -1
  115. package/cjs/utils/pathUtils.js +0 -293
  116. package/cjs/utils/pathUtils.js.map +0 -1
  117. package/cjs/utils/propUtils.js +0 -27
  118. package/cjs/utils/propUtils.js.map +0 -1
  119. package/cjs/utils/refUtils.js +0 -12
  120. package/cjs/utils/refUtils.js.map +0 -1
  121. package/cjs/utils/styleUtils.js +0 -15
  122. package/cjs/utils/styleUtils.js.map +0 -1
  123. package/cjs/utils/typeOf.js +0 -27
  124. package/cjs/utils/typeOf.js.map +0 -1
  125. package/esm/Component.js +0 -12
  126. package/esm/Component.js.map +0 -1
  127. package/esm/DraggableLayout.css +0 -18
  128. package/esm/DraggableLayout.js +0 -22
  129. package/esm/DraggableLayout.js.map +0 -1
  130. package/esm/dock-layout/DockLayout.css +0 -36
  131. package/esm/dock-layout/DockLayout.js +0 -25
  132. package/esm/dock-layout/DockLayout.js.map +0 -1
  133. package/esm/dock-layout/Drawer.css +0 -159
  134. package/esm/dock-layout/Drawer.js +0 -85
  135. package/esm/dock-layout/Drawer.js.map +0 -1
  136. package/esm/drag-drop/BoxModel.js +0 -415
  137. package/esm/drag-drop/BoxModel.js.map +0 -1
  138. package/esm/drag-drop/DragState.js +0 -152
  139. package/esm/drag-drop/DragState.js.map +0 -1
  140. package/esm/drag-drop/Draggable.js +0 -190
  141. package/esm/drag-drop/Draggable.js.map +0 -1
  142. package/esm/drag-drop/DropMenu.css +0 -71
  143. package/esm/drag-drop/DropMenu.js +0 -43
  144. package/esm/drag-drop/DropMenu.js.map +0 -1
  145. package/esm/drag-drop/DropTarget.js +0 -240
  146. package/esm/drag-drop/DropTarget.js.map +0 -1
  147. package/esm/drag-drop/DropTargetRenderer.css +0 -40
  148. package/esm/drag-drop/DropTargetRenderer.js +0 -231
  149. package/esm/drag-drop/DropTargetRenderer.js.map +0 -1
  150. package/esm/flexbox/Flexbox.css +0 -45
  151. package/esm/flexbox/Flexbox.js +0 -59
  152. package/esm/flexbox/Flexbox.js.map +0 -1
  153. package/esm/flexbox/FlexboxLayout.js +0 -28
  154. package/esm/flexbox/FlexboxLayout.js.map +0 -1
  155. package/esm/flexbox/FluidGrid.css +0 -134
  156. package/esm/flexbox/FluidGrid.js +0 -76
  157. package/esm/flexbox/FluidGrid.js.map +0 -1
  158. package/esm/flexbox/FluidGridLayout.js +0 -12
  159. package/esm/flexbox/FluidGridLayout.js.map +0 -1
  160. package/esm/flexbox/Splitter.css +0 -148
  161. package/esm/flexbox/Splitter.js +0 -111
  162. package/esm/flexbox/Splitter.js.map +0 -1
  163. package/esm/flexbox/flexbox-utils.js +0 -103
  164. package/esm/flexbox/flexbox-utils.js.map +0 -1
  165. package/esm/flexbox/useResponsiveSizing.js +0 -60
  166. package/esm/flexbox/useResponsiveSizing.js.map +0 -1
  167. package/esm/flexbox/useSplitterResizing.js +0 -207
  168. package/esm/flexbox/useSplitterResizing.js.map +0 -1
  169. package/esm/index.js +0 -37
  170. package/esm/index.js.map +0 -1
  171. package/esm/layout-action.js +0 -25
  172. package/esm/layout-action.js.map +0 -1
  173. package/esm/layout-header/Header.css +0 -9
  174. package/esm/layout-header/Header.js +0 -120
  175. package/esm/layout-header/Header.js.map +0 -1
  176. package/esm/layout-provider/LayoutProvider.js +0 -172
  177. package/esm/layout-provider/LayoutProvider.js.map +0 -1
  178. package/esm/layout-provider/LayoutProviderContext.js +0 -12
  179. package/esm/layout-provider/LayoutProviderContext.js.map +0 -1
  180. package/esm/layout-provider/useLayoutDragDrop.js +0 -168
  181. package/esm/layout-provider/useLayoutDragDrop.js.map +0 -1
  182. package/esm/layout-reducer/flexUtils.js +0 -210
  183. package/esm/layout-reducer/flexUtils.js.map +0 -1
  184. package/esm/layout-reducer/insert-layout-element.js +0 -269
  185. package/esm/layout-reducer/insert-layout-element.js.map +0 -1
  186. package/esm/layout-reducer/layout-reducer.js +0 -196
  187. package/esm/layout-reducer/layout-reducer.js.map +0 -1
  188. package/esm/layout-reducer/layoutTypes.js +0 -37
  189. package/esm/layout-reducer/layoutTypes.js.map +0 -1
  190. package/esm/layout-reducer/layoutUtils.js +0 -215
  191. package/esm/layout-reducer/layoutUtils.js.map +0 -1
  192. package/esm/layout-reducer/move-layout-element.js +0 -29
  193. package/esm/layout-reducer/move-layout-element.js.map +0 -1
  194. package/esm/layout-reducer/remove-layout-element.js +0 -221
  195. package/esm/layout-reducer/remove-layout-element.js.map +0 -1
  196. package/esm/layout-reducer/replace-layout-element.js +0 -87
  197. package/esm/layout-reducer/replace-layout-element.js.map +0 -1
  198. package/esm/layout-reducer/resize-flex-children.js +0 -58
  199. package/esm/layout-reducer/resize-flex-children.js.map +0 -1
  200. package/esm/layout-reducer/wrap-layout-element.js +0 -210
  201. package/esm/layout-reducer/wrap-layout-element.js.map +0 -1
  202. package/esm/layout-view/View.css +0 -62
  203. package/esm/layout-view/View.js +0 -153
  204. package/esm/layout-view/View.js.map +0 -1
  205. package/esm/layout-view/useView.js +0 -90
  206. package/esm/layout-view/useView.js.map +0 -1
  207. package/esm/layout-view/useViewResize.js +0 -40
  208. package/esm/layout-view/useViewResize.js.map +0 -1
  209. package/esm/layout-view-actions/ViewContext.js +0 -12
  210. package/esm/layout-view-actions/ViewContext.js.map +0 -1
  211. package/esm/layout-view-actions/useViewActionDispatcher.js +0 -101
  212. package/esm/layout-view-actions/useViewActionDispatcher.js.map +0 -1
  213. package/esm/palette/Palette.css +0 -33
  214. package/esm/palette/Palette.js +0 -115
  215. package/esm/palette/Palette.js.map +0 -1
  216. package/esm/placeholder/LayoutStartPanel.css +0 -30
  217. package/esm/placeholder/LayoutStartPanel.js +0 -49
  218. package/esm/placeholder/LayoutStartPanel.js.map +0 -1
  219. package/esm/placeholder/Placeholder.css +0 -17
  220. package/esm/placeholder/Placeholder.js +0 -23
  221. package/esm/placeholder/Placeholder.js.map +0 -1
  222. package/esm/registry/ComponentRegistry.js +0 -21
  223. package/esm/registry/ComponentRegistry.js.map +0 -1
  224. package/esm/responsive/breakpoints.js +0 -33
  225. package/esm/responsive/breakpoints.js.map +0 -1
  226. package/esm/responsive/use-breakpoints.js +0 -74
  227. package/esm/responsive/use-breakpoints.js.map +0 -1
  228. package/esm/responsive/useResizeObserver.js +0 -112
  229. package/esm/responsive/useResizeObserver.js.map +0 -1
  230. package/esm/responsive/utils.js +0 -31
  231. package/esm/responsive/utils.js.map +0 -1
  232. package/esm/stack/Stack.css +0 -39
  233. package/esm/stack/Stack.js +0 -137
  234. package/esm/stack/Stack.js.map +0 -1
  235. package/esm/stack/StackLayout.js +0 -120
  236. package/esm/stack/StackLayout.js.map +0 -1
  237. package/esm/use-persistent-state.js +0 -104
  238. package/esm/use-persistent-state.js.map +0 -1
  239. package/esm/utils/pathUtils.js +0 -280
  240. package/esm/utils/pathUtils.js.map +0 -1
  241. package/esm/utils/propUtils.js +0 -23
  242. package/esm/utils/propUtils.js.map +0 -1
  243. package/esm/utils/refUtils.js +0 -10
  244. package/esm/utils/refUtils.js.map +0 -1
  245. package/esm/utils/styleUtils.js +0 -13
  246. package/esm/utils/styleUtils.js.map +0 -1
  247. package/esm/utils/typeOf.js +0 -23
  248. package/esm/utils/typeOf.js.map +0 -1
@@ -1,42 +0,0 @@
1
- 'use strict';
2
-
3
- var React = require('react');
4
- var useResizeObserver = require('../responsive/useResizeObserver.js');
5
-
6
- const NO_MEASUREMENT = [];
7
- const useViewResize = ({
8
- mainRef,
9
- resize = "responsive",
10
- rootRef
11
- }) => {
12
- const deferResize = resize === "defer";
13
- const mainSize = React.useRef({});
14
- const resizeHandle = React.useRef();
15
- const setMainSize = React.useCallback(() => {
16
- if (mainRef.current) {
17
- mainRef.current.style.height = mainSize.current.height + "px";
18
- mainRef.current.style.width = mainSize.current.width + "px";
19
- }
20
- resizeHandle.current = void 0;
21
- }, [mainRef]);
22
- const onResize = React.useCallback(
23
- ({ height, width }) => {
24
- mainSize.current.height = height;
25
- mainSize.current.width = width;
26
- if (resizeHandle.current !== null) {
27
- clearTimeout(resizeHandle.current);
28
- }
29
- resizeHandle.current = window.setTimeout(setMainSize, 40);
30
- },
31
- [setMainSize]
32
- );
33
- useResizeObserver.useResizeObserver(
34
- rootRef,
35
- deferResize ? useResizeObserver.WidthHeight : NO_MEASUREMENT,
36
- onResize,
37
- deferResize
38
- );
39
- };
40
-
41
- exports.useViewResize = useViewResize;
42
- //# sourceMappingURL=useViewResize.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useViewResize.js","sources":["../../src/layout-view/useViewResize.ts"],"sourcesContent":["import { useResizeObserver, WidthHeight } from \"../responsive\";\nimport { RefObject, useCallback, useRef } from \"react\";\n\nconst NO_MEASUREMENT: string[] = [];\n\ntype size = {\n height?: number;\n width?: number;\n};\n\nexport interface ViewResizeHookProps {\n mainRef: RefObject<HTMLDivElement>;\n resize?: \"defer\" | \"responsive\";\n rootRef: RefObject<HTMLDivElement>;\n}\n\nexport const useViewResize = ({\n mainRef,\n resize = \"responsive\",\n rootRef,\n}: ViewResizeHookProps) => {\n const deferResize = resize === \"defer\";\n\n const mainSize = useRef<size>({});\n const resizeHandle = useRef<number>();\n\n const setMainSize = useCallback(() => {\n if (mainRef.current) {\n mainRef.current.style.height = mainSize.current.height + \"px\";\n mainRef.current.style.width = mainSize.current.width + \"px\";\n }\n resizeHandle.current = undefined;\n }, [mainRef]);\n\n const onResize = useCallback(\n ({ height, width }) => {\n mainSize.current.height = height;\n mainSize.current.width = width;\n if (resizeHandle.current !== null) {\n clearTimeout(resizeHandle.current);\n }\n resizeHandle.current = window.setTimeout(setMainSize, 40);\n },\n [setMainSize]\n );\n\n useResizeObserver(\n rootRef,\n deferResize ? WidthHeight : NO_MEASUREMENT,\n onResize,\n deferResize\n );\n};\n"],"names":["useRef","useCallback","useResizeObserver","WidthHeight"],"mappings":";;;;;AAGA,MAAM,iBAA2B,EAAC,CAAA;AAa3B,MAAM,gBAAgB,CAAC;AAAA,EAC5B,OAAA;AAAA,EACA,MAAS,GAAA,YAAA;AAAA,EACT,OAAA;AACF,CAA2B,KAAA;AACzB,EAAA,MAAM,cAAc,MAAW,KAAA,OAAA,CAAA;AAE/B,EAAM,MAAA,QAAA,GAAWA,YAAa,CAAA,EAAE,CAAA,CAAA;AAChC,EAAA,MAAM,eAAeA,YAAe,EAAA,CAAA;AAEpC,EAAM,MAAA,WAAA,GAAcC,kBAAY,MAAM;AACpC,IAAA,IAAI,QAAQ,OAAS,EAAA;AACnB,MAAA,OAAA,CAAQ,OAAQ,CAAA,KAAA,CAAM,MAAS,GAAA,QAAA,CAAS,QAAQ,MAAS,GAAA,IAAA,CAAA;AACzD,MAAA,OAAA,CAAQ,OAAQ,CAAA,KAAA,CAAM,KAAQ,GAAA,QAAA,CAAS,QAAQ,KAAQ,GAAA,IAAA,CAAA;AAAA,KACzD;AACA,IAAA,YAAA,CAAa,OAAU,GAAA,KAAA,CAAA,CAAA;AAAA,GACzB,EAAG,CAAC,OAAO,CAAC,CAAA,CAAA;AAEZ,EAAA,MAAM,QAAW,GAAAA,iBAAA;AAAA,IACf,CAAC,EAAE,MAAQ,EAAA,KAAA,EAAY,KAAA;AACrB,MAAA,QAAA,CAAS,QAAQ,MAAS,GAAA,MAAA,CAAA;AAC1B,MAAA,QAAA,CAAS,QAAQ,KAAQ,GAAA,KAAA,CAAA;AACzB,MAAI,IAAA,YAAA,CAAa,YAAY,IAAM,EAAA;AACjC,QAAA,YAAA,CAAa,aAAa,OAAO,CAAA,CAAA;AAAA,OACnC;AACA,MAAA,YAAA,CAAa,OAAU,GAAA,MAAA,CAAO,UAAW,CAAA,WAAA,EAAa,EAAE,CAAA,CAAA;AAAA,KAC1D;AAAA,IACA,CAAC,WAAW,CAAA;AAAA,GACd,CAAA;AAEA,EAAAC,mCAAA;AAAA,IACE,OAAA;AAAA,IACA,cAAcC,6BAAc,GAAA,cAAA;AAAA,IAC5B,QAAA;AAAA,IACA,WAAA;AAAA,GACF,CAAA;AACF;;;;"}
@@ -1,16 +0,0 @@
1
- 'use strict';
2
-
3
- var React = require('react');
4
-
5
- const NO_CONTEXT = { dispatch: null };
6
- const ViewContext = React.createContext(NO_CONTEXT);
7
- const useViewDispatch = () => {
8
- const context = React.useContext(ViewContext);
9
- return context?.dispatch ?? null;
10
- };
11
- const useViewContext = () => React.useContext(ViewContext);
12
-
13
- exports.ViewContext = ViewContext;
14
- exports.useViewContext = useViewContext;
15
- exports.useViewDispatch = useViewDispatch;
16
- //# sourceMappingURL=ViewContext.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ViewContext.js","sources":["../../src/layout-view-actions/ViewContext.ts"],"sourcesContent":["import React, { SyntheticEvent, useContext } from \"react\";\nimport { ViewAction } from \"../layout-view/viewTypes\";\n\nexport type QueryReponse = { [key: string]: unknown };\n\nexport type ViewDispatch = <Action extends ViewAction = ViewAction>(\n action: Action,\n evt?: SyntheticEvent\n) => Promise<boolean | QueryReponse | void>;\n\n/**\n * This API is available to any Feature hosted within Vuu (as all Features are wrapped\n * with View component). It offers metadata about the View as well as access to the\n * Vuu persistencew API;\n */\nexport interface ViewContextAPI {\n /**\n * dispatcher for View actions. These are a subset of LayoutActions, specifically for\n * View manipulation\n */\n dispatch?: ViewDispatch | null;\n id?: string;\n load?: (key?: string) => unknown;\n loadSession?: (key?: string) => unknown;\n onConfigChange?: (config: unknown) => void;\n path?: string;\n purge?: (key: string) => void;\n save?: (state: unknown, key: string) => void;\n saveSession?: (state: unknown, key: string) => void;\n setComponentProps: (props: { [key: string]: unknown }) => void;\n title?: string;\n}\n\nconst NO_CONTEXT = { dispatch: null } as ViewContextAPI;\nexport const ViewContext = React.createContext<ViewContextAPI>(NO_CONTEXT);\n\nexport const useViewDispatch = () => {\n const context = useContext(ViewContext);\n return context?.dispatch ?? null;\n};\n\nexport const useViewContext = () => useContext(ViewContext);\n"],"names":["useContext"],"mappings":";;;;AAiCA,MAAM,UAAA,GAAa,EAAE,QAAA,EAAU,IAAK,EAAA,CAAA;AACvB,MAAA,WAAA,GAAc,KAAM,CAAA,aAAA,CAA8B,UAAU,EAAA;AAElE,MAAM,kBAAkB,MAAM;AACnC,EAAM,MAAA,OAAA,GAAUA,iBAAW,WAAW,CAAA,CAAA;AACtC,EAAA,OAAO,SAAS,QAAY,IAAA,IAAA,CAAA;AAC9B,EAAA;AAEa,MAAA,cAAA,GAAiB,MAAMA,gBAAA,CAAW,WAAW;;;;;;"}
@@ -1,103 +0,0 @@
1
- 'use strict';
2
-
3
- var React = require('react');
4
- var LayoutProvider = require('../layout-provider/LayoutProvider.js');
5
- require('../layout-provider/LayoutProviderContext.js');
6
- var usePersistentState = require('../use-persistent-state.js');
7
-
8
- const useViewActionDispatcher = (id, root, viewPath, dropTargets) => {
9
- const { loadSessionState, purgeSessionState, purgeState, saveSessionState } = usePersistentState.usePersistentState();
10
- const [contributions, setContributions] = React.useState(
11
- loadSessionState(id, "contributions") ?? []
12
- );
13
- const dispatchLayoutAction = LayoutProvider.useLayoutProviderDispatch();
14
- const updateContributions = React.useCallback(
15
- (location, content) => {
16
- const updatedContributions = contributions.concat([
17
- { location, content }
18
- ]);
19
- saveSessionState(id, "contributions", updatedContributions);
20
- setContributions(updatedContributions);
21
- },
22
- [contributions, id, saveSessionState]
23
- );
24
- const clearContributions = React.useCallback(() => {
25
- purgeSessionState(id, "contributions");
26
- setContributions([]);
27
- }, [id, purgeSessionState]);
28
- const handleRemove = React.useCallback(() => {
29
- const ds = loadSessionState(id, "data-source");
30
- if (ds) {
31
- ds.unsubscribe();
32
- }
33
- purgeSessionState(id);
34
- purgeState(id);
35
- dispatchLayoutAction({ type: "remove", path: viewPath });
36
- }, [
37
- dispatchLayoutAction,
38
- id,
39
- loadSessionState,
40
- purgeSessionState,
41
- purgeState,
42
- viewPath
43
- ]);
44
- const handleMouseDown = React.useCallback(
45
- async (evt, index, preDragActivity) => {
46
- evt.stopPropagation();
47
- const dragRect = root.current?.getBoundingClientRect();
48
- return new Promise((resolve, reject) => {
49
- dispatchLayoutAction({
50
- type: "drag-start",
51
- evt,
52
- path: index === void 0 ? viewPath : `${viewPath}.${index}`,
53
- dragRect,
54
- preDragActivity,
55
- dropTargets,
56
- resolveDragStart: resolve,
57
- rejectDragStart: reject
58
- });
59
- });
60
- },
61
- [root, dispatchLayoutAction, viewPath, dropTargets]
62
- );
63
- const dispatchAction = React.useCallback(
64
- async (action, evt) => {
65
- const { type } = action;
66
- switch (type) {
67
- case "maximize":
68
- case "minimize":
69
- case "restore":
70
- return dispatchLayoutAction({ type, path: action.path ?? viewPath });
71
- case "remove":
72
- return handleRemove();
73
- case "mousedown":
74
- return handleMouseDown(evt, action.index, action.preDragActivity);
75
- case "add-toolbar-contribution":
76
- return updateContributions(action.location, action.content);
77
- case "remove-toolbar-contribution":
78
- return clearContributions();
79
- case "query":
80
- return dispatchLayoutAction({
81
- type,
82
- path: action.path,
83
- query: action.query
84
- });
85
- default: {
86
- return void 0;
87
- }
88
- }
89
- },
90
- [
91
- dispatchLayoutAction,
92
- viewPath,
93
- handleRemove,
94
- handleMouseDown,
95
- updateContributions,
96
- clearContributions
97
- ]
98
- );
99
- return [dispatchAction, contributions];
100
- };
101
-
102
- exports.useViewActionDispatcher = useViewActionDispatcher;
103
- //# sourceMappingURL=useViewActionDispatcher.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useViewActionDispatcher.js","sources":["../../src/layout-view-actions/useViewActionDispatcher.ts"],"sourcesContent":["import { DataSource } from \"@vuu-ui/vuu-data-types\";\nimport {\n ReactElement,\n RefObject,\n SyntheticEvent,\n useCallback,\n useState,\n} from \"react\";\nimport { useLayoutProviderDispatch } from \"../layout-provider\";\nimport { DragStartAction } from \"../layout-reducer\";\nimport { usePersistentState } from \"../use-persistent-state\";\nimport { QueryReponse, ViewDispatch } from \"./ViewContext\";\nimport { ViewAction } from \"../layout-view/viewTypes\";\n\nexport type ContributionLocation = \"post-title\" | \"pre-title\";\n\nexport type Contribution = {\n index?: number;\n location?: ContributionLocation;\n content: ReactElement;\n};\n\nexport const useViewActionDispatcher = (\n id: string,\n root: RefObject<HTMLDivElement>,\n viewPath?: string,\n dropTargets?: string[]\n): [ViewDispatch, Contribution[] | undefined] => {\n const { loadSessionState, purgeSessionState, purgeState, saveSessionState } =\n usePersistentState();\n\n const [contributions, setContributions] = useState<Contribution[]>(\n loadSessionState(id, \"contributions\") ?? []\n );\n const dispatchLayoutAction = useLayoutProviderDispatch();\n const updateContributions = useCallback(\n (location: ContributionLocation, content: ReactElement) => {\n const updatedContributions = contributions.concat([\n { location, content },\n ]);\n saveSessionState(id, \"contributions\", updatedContributions);\n setContributions(updatedContributions);\n },\n [contributions, id, saveSessionState]\n );\n\n const clearContributions = useCallback(() => {\n purgeSessionState(id, \"contributions\");\n setContributions([]);\n }, [id, purgeSessionState]);\n\n const handleRemove = useCallback(() => {\n const ds = loadSessionState(id, \"data-source\") as DataSource;\n if (ds) {\n ds.unsubscribe();\n }\n purgeSessionState(id);\n purgeState(id);\n dispatchLayoutAction({ type: \"remove\", path: viewPath });\n }, [\n dispatchLayoutAction,\n id,\n loadSessionState,\n purgeSessionState,\n purgeState,\n viewPath,\n ]);\n\n const handleMouseDown = useCallback(\n async (evt, index, preDragActivity): Promise<boolean> => {\n evt.stopPropagation();\n const dragRect = root.current?.getBoundingClientRect();\n return new Promise((resolve, reject) => {\n dispatchLayoutAction({\n type: \"drag-start\",\n evt,\n path: index === undefined ? viewPath : `${viewPath}.${index}`,\n dragRect,\n preDragActivity,\n dropTargets,\n resolveDragStart: resolve,\n rejectDragStart: reject,\n } as DragStartAction);\n });\n },\n [root, dispatchLayoutAction, viewPath, dropTargets]\n );\n\n const dispatchAction = useCallback(\n async <A extends ViewAction = ViewAction>(\n action: A,\n evt?: SyntheticEvent\n ): Promise<boolean | QueryReponse | void> => {\n const { type } = action;\n switch (type) {\n case \"maximize\":\n case \"minimize\":\n case \"restore\":\n return dispatchLayoutAction({ type, path: action.path ?? viewPath });\n case \"remove\":\n return handleRemove();\n case \"mousedown\":\n return handleMouseDown(evt, action.index, action.preDragActivity);\n case \"add-toolbar-contribution\":\n return updateContributions(action.location, action.content);\n case \"remove-toolbar-contribution\":\n return clearContributions();\n case \"query\":\n return dispatchLayoutAction({\n type,\n path: action.path,\n query: action.query,\n });\n return;\n default: {\n return undefined;\n }\n }\n },\n [\n dispatchLayoutAction,\n viewPath,\n handleRemove,\n handleMouseDown,\n updateContributions,\n clearContributions,\n ]\n );\n\n return [dispatchAction, contributions];\n};\n"],"names":["usePersistentState","useState","useLayoutProviderDispatch","useCallback"],"mappings":";;;;;;;AAsBO,MAAM,uBAA0B,GAAA,CACrC,EACA,EAAA,IAAA,EACA,UACA,WAC+C,KAAA;AAC/C,EAAA,MAAM,EAAE,gBAAkB,EAAA,iBAAA,EAAmB,UAAY,EAAA,gBAAA,KACvDA,qCAAmB,EAAA,CAAA;AAErB,EAAM,MAAA,CAAC,aAAe,EAAA,gBAAgB,CAAI,GAAAC,cAAA;AAAA,IACxC,gBAAiB,CAAA,EAAA,EAAI,eAAe,CAAA,IAAK,EAAC;AAAA,GAC5C,CAAA;AACA,EAAA,MAAM,uBAAuBC,wCAA0B,EAAA,CAAA;AACvD,EAAA,MAAM,mBAAsB,GAAAC,iBAAA;AAAA,IAC1B,CAAC,UAAgC,OAA0B,KAAA;AACzD,MAAM,MAAA,oBAAA,GAAuB,cAAc,MAAO,CAAA;AAAA,QAChD,EAAE,UAAU,OAAQ,EAAA;AAAA,OACrB,CAAA,CAAA;AACD,MAAiB,gBAAA,CAAA,EAAA,EAAI,iBAAiB,oBAAoB,CAAA,CAAA;AAC1D,MAAA,gBAAA,CAAiB,oBAAoB,CAAA,CAAA;AAAA,KACvC;AAAA,IACA,CAAC,aAAe,EAAA,EAAA,EAAI,gBAAgB,CAAA;AAAA,GACtC,CAAA;AAEA,EAAM,MAAA,kBAAA,GAAqBA,kBAAY,MAAM;AAC3C,IAAA,iBAAA,CAAkB,IAAI,eAAe,CAAA,CAAA;AACrC,IAAA,gBAAA,CAAiB,EAAE,CAAA,CAAA;AAAA,GAClB,EAAA,CAAC,EAAI,EAAA,iBAAiB,CAAC,CAAA,CAAA;AAE1B,EAAM,MAAA,YAAA,GAAeA,kBAAY,MAAM;AACrC,IAAM,MAAA,EAAA,GAAK,gBAAiB,CAAA,EAAA,EAAI,aAAa,CAAA,CAAA;AAC7C,IAAA,IAAI,EAAI,EAAA;AACN,MAAA,EAAA,CAAG,WAAY,EAAA,CAAA;AAAA,KACjB;AACA,IAAA,iBAAA,CAAkB,EAAE,CAAA,CAAA;AACpB,IAAA,UAAA,CAAW,EAAE,CAAA,CAAA;AACb,IAAA,oBAAA,CAAqB,EAAE,IAAA,EAAM,QAAU,EAAA,IAAA,EAAM,UAAU,CAAA,CAAA;AAAA,GACtD,EAAA;AAAA,IACD,oBAAA;AAAA,IACA,EAAA;AAAA,IACA,gBAAA;AAAA,IACA,iBAAA;AAAA,IACA,UAAA;AAAA,IACA,QAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAA,MAAM,eAAkB,GAAAA,iBAAA;AAAA,IACtB,OAAO,GAAK,EAAA,KAAA,EAAO,eAAsC,KAAA;AACvD,MAAA,GAAA,CAAI,eAAgB,EAAA,CAAA;AACpB,MAAM,MAAA,QAAA,GAAW,IAAK,CAAA,OAAA,EAAS,qBAAsB,EAAA,CAAA;AACrD,MAAA,OAAO,IAAI,OAAA,CAAQ,CAAC,OAAA,EAAS,MAAW,KAAA;AACtC,QAAqB,oBAAA,CAAA;AAAA,UACnB,IAAM,EAAA,YAAA;AAAA,UACN,GAAA;AAAA,UACA,MAAM,KAAU,KAAA,KAAA,CAAA,GAAY,WAAW,CAAG,EAAA,QAAQ,IAAI,KAAK,CAAA,CAAA;AAAA,UAC3D,QAAA;AAAA,UACA,eAAA;AAAA,UACA,WAAA;AAAA,UACA,gBAAkB,EAAA,OAAA;AAAA,UAClB,eAAiB,EAAA,MAAA;AAAA,SACC,CAAA,CAAA;AAAA,OACrB,CAAA,CAAA;AAAA,KACH;AAAA,IACA,CAAC,IAAA,EAAM,oBAAsB,EAAA,QAAA,EAAU,WAAW,CAAA;AAAA,GACpD,CAAA;AAEA,EAAA,MAAM,cAAiB,GAAAA,iBAAA;AAAA,IACrB,OACE,QACA,GAC2C,KAAA;AAC3C,MAAM,MAAA,EAAE,MAAS,GAAA,MAAA,CAAA;AACjB,MAAA,QAAQ,IAAM;AAAA,QACZ,KAAK,UAAA,CAAA;AAAA,QACL,KAAK,UAAA,CAAA;AAAA,QACL,KAAK,SAAA;AACH,UAAA,OAAO,qBAAqB,EAAE,IAAA,EAAM,MAAM,MAAO,CAAA,IAAA,IAAQ,UAAU,CAAA,CAAA;AAAA,QACrE,KAAK,QAAA;AACH,UAAA,OAAO,YAAa,EAAA,CAAA;AAAA,QACtB,KAAK,WAAA;AACH,UAAA,OAAO,eAAgB,CAAA,GAAA,EAAK,MAAO,CAAA,KAAA,EAAO,OAAO,eAAe,CAAA,CAAA;AAAA,QAClE,KAAK,0BAAA;AACH,UAAA,OAAO,mBAAoB,CAAA,MAAA,CAAO,QAAU,EAAA,MAAA,CAAO,OAAO,CAAA,CAAA;AAAA,QAC5D,KAAK,6BAAA;AACH,UAAA,OAAO,kBAAmB,EAAA,CAAA;AAAA,QAC5B,KAAK,OAAA;AACH,UAAA,OAAO,oBAAqB,CAAA;AAAA,YAC1B,IAAA;AAAA,YACA,MAAM,MAAO,CAAA,IAAA;AAAA,YACb,OAAO,MAAO,CAAA,KAAA;AAAA,WACf,CAAA,CAAA;AACD,QACF,SAAS;AACP,UAAO,OAAA,KAAA,CAAA,CAAA;AAAA,SACT;AAAA,OACF;AAAA,KACF;AAAA,IACA;AAAA,MACE,oBAAA;AAAA,MACA,QAAA;AAAA,MACA,YAAA;AAAA,MACA,eAAA;AAAA,MACA,mBAAA;AAAA,MACA,kBAAA;AAAA,KACF;AAAA,GACF,CAAA;AAEA,EAAO,OAAA,CAAC,gBAAgB,aAAa,CAAA,CAAA;AACvC;;;;"}
@@ -1,33 +0,0 @@
1
- .vuuPalette {
2
- --vuuList-borderStyle: none;
3
- }
4
-
5
- .vuuPalette-horizontal {
6
- align-items: center;
7
- display: flex;
8
- }
9
-
10
- .vuuPaletteItem {
11
- --vuu-icon-color: var(--salt-content-primary-foreground);
12
- --vuu-icon-left: 0;
13
- --vuu-icon-size: 16px;
14
- --vuu-icon-top: 11px;
15
- --list-item-text-padding: 0 0 0 calc(var(--salt-size-unit) * 3);
16
- border-bottom: solid 1px var(--salt-separable-tertiary-borderColor);
17
- padding-left: 12px;
18
- font-size: 12px;
19
- font-weight: 600;
20
- }
21
-
22
- .vuuSimpleDraggableWrapper > .vuuPaletteItem {
23
- --vuu-icon-color: var(--salt-selectable-foreground);
24
-
25
- }
26
-
27
- .salt-theme .vuuPaletteItem {
28
- font-size: 11px;
29
- font-weight: normal;
30
-
31
- }
32
-
33
-
@@ -1,118 +0,0 @@
1
- 'use strict';
2
-
3
- var jsxRuntime = require('react/jsx-runtime');
4
- var vuuUtils = require('@vuu-ui/vuu-utils');
5
- var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
6
- var cx = require('clsx');
7
- var React = require('react');
8
- var LayoutProvider = require('../layout-provider/LayoutProvider.js');
9
- require('../layout-provider/LayoutProviderContext.js');
10
- var View = require('../layout-view/View.js');
11
- var ComponentRegistry = require('../registry/ComponentRegistry.js');
12
-
13
- const clonePaletteItem = (paletteItem) => {
14
- const dolly = paletteItem.cloneNode(true);
15
- dolly.id = "";
16
- delete dolly.dataset.idx;
17
- return dolly;
18
- };
19
- const PaletteItem = React.memo(
20
- ({
21
- className,
22
- children: component,
23
- idx,
24
- resizeable,
25
- header,
26
- closeable,
27
- ...props
28
- }) => {
29
- return /* @__PURE__ */ jsxRuntime.jsx(
30
- vuuUiControls.ListItem,
31
- {
32
- className: cx("vuuPaletteItem", className),
33
- "data-draggable": true,
34
- "data-icon": "draggable",
35
- ...props
36
- }
37
- );
38
- }
39
- );
40
- PaletteItem.displayName = "PaletteItem";
41
- const Palette = ({
42
- ListProps: ListProps2,
43
- ViewProps: ViewProps2,
44
- children,
45
- className,
46
- itemHeight = 41,
47
- orientation = "horizontal",
48
- ...props
49
- }) => {
50
- const dispatch = LayoutProvider.useLayoutProviderDispatch();
51
- const classBase = "vuuPalette";
52
- function handleMouseDown(evt) {
53
- const target = evt.target;
54
- const listItemElement = target.closest(".vuuPaletteItem");
55
- const idx = parseInt(listItemElement.dataset?.index ?? "-1");
56
- const {
57
- props: { caption, children: payload, template, ...props2 }
58
- } = children[idx];
59
- const { ViewProps: componentViewProps } = payload.props;
60
- const { height, left, top, width } = listItemElement.getBoundingClientRect();
61
- const id = vuuUtils.uuid();
62
- const identifiers = { id, key: id };
63
- const component = template ? payload : /* @__PURE__ */ jsxRuntime.jsx(
64
- View.View,
65
- {
66
- ...ViewProps2,
67
- ...identifiers,
68
- ...props2,
69
- ...componentViewProps,
70
- title: props2.label,
71
- children: payload
72
- }
73
- );
74
- dispatch({
75
- dragRect: {
76
- left,
77
- top,
78
- right: left + width,
79
- bottom: top + 150,
80
- width,
81
- height
82
- },
83
- dragElement: clonePaletteItem(listItemElement),
84
- evt: evt.nativeEvent,
85
- instructions: {
86
- DoNotRemove: true,
87
- DoNotTransform: true,
88
- DriftHomeIfNoDropTarget: true,
89
- RemoveDraggableOnDragEnd: true,
90
- dragThreshold: 10
91
- },
92
- path: "*",
93
- payload: component,
94
- type: "drag-start"
95
- });
96
- }
97
- return /* @__PURE__ */ jsxRuntime.jsx(
98
- vuuUiControls.List,
99
- {
100
- ...ListProps2,
101
- ...props,
102
- className: cx(classBase, className, `${classBase}-${orientation}`),
103
- itemHeight,
104
- selected: null,
105
- children: children.map(
106
- (child, idx) => child.type === PaletteItem ? React.cloneElement(child, {
107
- key: idx,
108
- onMouseDown: handleMouseDown
109
- }) : child
110
- )
111
- }
112
- );
113
- };
114
- ComponentRegistry.registerComponent("Palette", Palette, "view");
115
-
116
- exports.Palette = Palette;
117
- exports.PaletteItem = PaletteItem;
118
- //# sourceMappingURL=Palette.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Palette.js","sources":["../../src/palette/Palette.tsx"],"sourcesContent":["import { uuid } from \"@vuu-ui/vuu-utils\";\nimport {\n List,\n ListItem,\n ListItemProps,\n ListProps,\n} from \"@vuu-ui/vuu-ui-controls\";\nimport cx from \"clsx\";\nimport {\n cloneElement,\n HTMLAttributes,\n memo,\n MouseEvent,\n ReactElement,\n} from \"react\";\nimport { useLayoutProviderDispatch } from \"../layout-provider\";\nimport { View, ViewProps } from \"../layout-view\";\nimport { registerComponent } from \"../registry/ComponentRegistry\";\n\nimport \"./Palette.css\";\n\nconst clonePaletteItem = (paletteItem: HTMLElement) => {\n const dolly = paletteItem.cloneNode(true) as HTMLElement;\n dolly.id = \"\";\n delete dolly.dataset.idx;\n return dolly;\n};\n\nexport interface PaletteItemProps extends ListItemProps {\n children: ReactElement;\n closeable?: boolean;\n header?: boolean;\n idx?: number;\n resize?: \"defer\";\n resizeable?: boolean;\n}\n\nexport const PaletteItem = memo(\n ({\n className,\n children: component,\n idx,\n resizeable,\n header,\n closeable,\n ...props\n }: PaletteItemProps) => {\n return (\n <ListItem\n className={cx(\"vuuPaletteItem\", className)}\n data-draggable\n data-icon=\"draggable\"\n {...props}\n />\n );\n }\n);\n\nPaletteItem.displayName = \"PaletteItem\";\n\nexport interface PaletteProps\n extends Omit<\n HTMLAttributes<HTMLDivElement>,\n \"onDragStart\" | \"onDrop\" | \"onSelect\"\n > {\n ListProps?: Partial<ListProps>;\n ViewProps?: Partial<ViewProps>;\n children: ReactElement[];\n itemHeight?: number;\n orientation: \"horizontal\" | \"vertical\";\n selection?: string;\n}\n\nexport const Palette = ({\n ListProps,\n ViewProps,\n children,\n className,\n itemHeight = 41,\n orientation = \"horizontal\",\n ...props\n}: PaletteProps) => {\n const dispatch = useLayoutProviderDispatch();\n const classBase = \"vuuPalette\";\n\n function handleMouseDown(evt: MouseEvent) {\n const target = evt.target as HTMLElement;\n const listItemElement = target.closest(\".vuuPaletteItem\") as HTMLElement;\n const idx = parseInt(listItemElement.dataset?.index ?? \"-1\");\n const {\n props: { caption, children: payload, template, ...props },\n } = children[idx];\n const { ViewProps: componentViewProps } = payload.props;\n const { height, left, top, width } =\n listItemElement.getBoundingClientRect();\n const id = uuid();\n const identifiers = { id, key: id };\n const component = template ? (\n payload\n ) : (\n <View\n {...ViewProps}\n {...identifiers}\n {...props}\n {...componentViewProps}\n title={props.label}\n >\n {payload}\n </View>\n );\n\n dispatch({\n dragRect: {\n left,\n top,\n right: left + width,\n bottom: top + 150,\n width,\n height,\n },\n dragElement: clonePaletteItem(listItemElement),\n evt: evt.nativeEvent,\n instructions: {\n DoNotRemove: true,\n DoNotTransform: true,\n DriftHomeIfNoDropTarget: true,\n RemoveDraggableOnDragEnd: true,\n dragThreshold: 10,\n },\n path: \"*\",\n payload: component,\n type: \"drag-start\",\n });\n }\n\n return (\n <List\n {...ListProps}\n {...props}\n className={cx(classBase, className, `${classBase}-${orientation}`)}\n itemHeight={itemHeight}\n selected={null}\n >\n {children.map((child, idx) =>\n child.type === PaletteItem\n ? cloneElement(child, {\n key: idx,\n onMouseDown: handleMouseDown,\n })\n : child\n )}\n </List>\n );\n};\n\nregisterComponent(\"Palette\", Palette, \"view\");\n"],"names":["memo","jsx","ListItem","ListProps","ViewProps","useLayoutProviderDispatch","props","uuid","View","List","cloneElement","registerComponent"],"mappings":"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"}
@@ -1,30 +0,0 @@
1
- .vuuLayoutStartPanel {
2
- align-items: center;
3
- flex: 0 0 auto !important;
4
- display: flex;
5
- flex-direction: column;
6
- font-weight: 700;
7
- gap: 12px;
8
- }
9
-
10
- .vuuLayoutStartPanel-title {
11
- color: var(--vuu-color-gray-80);
12
- font-size: 28px;
13
- line-height: 1.5;
14
- text-align: center;
15
- }
16
-
17
- .vuuLayoutStartPanel-text {
18
- color: var(--vuu-color-gray-50);
19
- font-size: 18px;
20
- line-height: 1.5;
21
- max-width: 460px;
22
- }
23
-
24
- .vuuLayoutStartPanel-addButton {
25
- --vuu-icon-size: 20px;
26
- --saltButton-borderRadius: 28px !important;
27
- --saltButton-height: 56px;
28
- --saltButton-width: 56px;
29
- box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
30
- }
@@ -1,51 +0,0 @@
1
- 'use strict';
2
-
3
- var jsxRuntime = require('react/jsx-runtime');
4
- var core = require('@salt-ds/core');
5
- var React = require('react');
6
- require('@vuu-ui/vuu-utils');
7
- require('../layout-provider/LayoutProviderContext.js');
8
- require('../drag-drop/Draggable.js');
9
- require('clsx');
10
- require('../drag-drop/BoxModel.js');
11
- var ViewContext = require('../layout-view-actions/ViewContext.js');
12
-
13
- const classBase = "vuuLayoutStartPanel";
14
- const LayoutStartPanel = (htmlAttributes) => {
15
- const { dispatch, path } = ViewContext.useViewContext();
16
- const [displayState, setDisplayState] = React.useState();
17
- React.useMemo(() => {
18
- dispatch?.({
19
- type: "query",
20
- path,
21
- query: "PARENT_CONTAINER"
22
- }).then((response) => {
23
- if (response?.parentContainerId === "main-tabs") {
24
- setDisplayState("initial");
25
- } else {
26
- setDisplayState("nested");
27
- }
28
- });
29
- }, [dispatch, path]);
30
- if (displayState === void 0) {
31
- return null;
32
- }
33
- const showInitialState = displayState === "initial";
34
- return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...htmlAttributes, className: classBase, children: [
35
- showInitialState ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
36
- /* @__PURE__ */ jsxRuntime.jsx("header", { className: `${classBase}-title`, children: "Start by adding a table" }),
37
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-text`, children: "To add a table, drag any of the Vuu Tables to this area or click the button below" })
38
- ] }) : null,
39
- /* @__PURE__ */ jsxRuntime.jsx(
40
- core.Button,
41
- {
42
- className: `${classBase}-addButton`,
43
- "data-icon": "add",
44
- variant: "cta"
45
- }
46
- )
47
- ] });
48
- };
49
-
50
- exports.LayoutStartPanel = LayoutStartPanel;
51
- //# sourceMappingURL=LayoutStartPanel.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"LayoutStartPanel.js","sources":["../../src/placeholder/LayoutStartPanel.tsx"],"sourcesContent":["import { Button } from \"@salt-ds/core\";\nimport { HTMLAttributes, useMemo, useState } from \"react\";\nimport { useViewContext, QueryReponse } from \"../layout-view-actions\";\n\nimport \"./LayoutStartPanel.css\";\n\nconst classBase = \"vuuLayoutStartPanel\";\n\nexport interface LayoutStartPanelProps extends HTMLAttributes<HTMLDivElement> {\n label?: string;\n}\n\nexport const LayoutStartPanel = (htmlAttributes: LayoutStartPanelProps) => {\n const { dispatch, path } = useViewContext();\n const [displayState, setDisplayState] = useState<\n \"initial\" | \"nested\" | undefined\n >();\n\n useMemo(() => {\n dispatch?.({\n type: \"query\",\n path,\n query: \"PARENT_CONTAINER\",\n }).then((response) => {\n if ((response as QueryReponse)?.parentContainerId === \"main-tabs\") {\n setDisplayState(\"initial\");\n } else {\n setDisplayState(\"nested\");\n }\n });\n }, [dispatch, path]);\n\n if (displayState === undefined) {\n return null;\n }\n\n const showInitialState = displayState === \"initial\";\n\n return (\n <div {...htmlAttributes} className={classBase}>\n {showInitialState ? (\n <>\n <header className={`${classBase}-title`}>\n Start by adding a table\n </header>\n <div className={`${classBase}-text`}>\n To add a table, drag any of the Vuu Tables to this area or click the\n button below\n </div>\n </>\n ) : null}\n <Button\n className={`${classBase}-addButton`}\n data-icon=\"add\"\n variant=\"cta\"\n />\n </div>\n );\n};\n"],"names":["useViewContext","useState","useMemo","jsxs","Fragment","jsx","Button"],"mappings":";;;;;;;;;;;;AAMA,MAAM,SAAY,GAAA,qBAAA,CAAA;AAML,MAAA,gBAAA,GAAmB,CAAC,cAA0C,KAAA;AACzE,EAAA,MAAM,EAAE,QAAA,EAAU,IAAK,EAAA,GAAIA,0BAAe,EAAA,CAAA;AAC1C,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAIC,cAEtC,EAAA,CAAA;AAEF,EAAAC,aAAA,CAAQ,MAAM;AACZ,IAAW,QAAA,GAAA;AAAA,MACT,IAAM,EAAA,OAAA;AAAA,MACN,IAAA;AAAA,MACA,KAAO,EAAA,kBAAA;AAAA,KACR,CAAA,CAAE,IAAK,CAAA,CAAC,QAAa,KAAA;AACpB,MAAK,IAAA,QAAA,EAA2B,sBAAsB,WAAa,EAAA;AACjE,QAAA,eAAA,CAAgB,SAAS,CAAA,CAAA;AAAA,OACpB,MAAA;AACL,QAAA,eAAA,CAAgB,QAAQ,CAAA,CAAA;AAAA,OAC1B;AAAA,KACD,CAAA,CAAA;AAAA,GACA,EAAA,CAAC,QAAU,EAAA,IAAI,CAAC,CAAA,CAAA;AAEnB,EAAA,IAAI,iBAAiB,KAAW,CAAA,EAAA;AAC9B,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAA,MAAM,mBAAmB,YAAiB,KAAA,SAAA,CAAA;AAE1C,EAAA,uBACGC,eAAA,CAAA,KAAA,EAAA,EAAK,GAAG,cAAA,EAAgB,WAAW,SACjC,EAAA,QAAA,EAAA;AAAA,IAAA,gBAAA,mBAEGA,eAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAA;AAAA,sBAAAC,cAAA,CAAC,QAAO,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,UAAU,QAEzC,EAAA,yBAAA,EAAA,CAAA;AAAA,qCACC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,SAAS,QAGrC,EAAA,mFAAA,EAAA,CAAA;AAAA,KAAA,EACF,CACE,GAAA,IAAA;AAAA,oBACJA,cAAA;AAAA,MAACC,WAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,GAAG,SAAS,CAAA,UAAA,CAAA;AAAA,QACvB,WAAU,EAAA,KAAA;AAAA,QACV,OAAQ,EAAA,KAAA;AAAA,OAAA;AAAA,KACV;AAAA,GACF,EAAA,CAAA,CAAA;AAEJ;;;;"}
@@ -1,17 +0,0 @@
1
- .vuuPlaceholder {
2
- --vuuView-justify: center;
3
- align-items: center;
4
- display: flex;
5
- flex-basis: 0;
6
- flex-grow: 1;
7
- flex-shrink: 1;
8
- }
9
-
10
- .vuuPlaceholder-nested {
11
- background-color: red;
12
- }
13
-
14
- .vuuPlaceholder-shim {
15
- flex-grow: 0;
16
- flex-shrink: 0;
17
- }
@@ -1,25 +0,0 @@
1
- 'use strict';
2
-
3
- var jsxRuntime = require('react/jsx-runtime');
4
- var cx = require('clsx');
5
- var ComponentRegistry = require('../registry/ComponentRegistry.js');
6
- var LayoutStartPanel = require('./LayoutStartPanel.js');
7
- var View = require('../layout-view/View.js');
8
-
9
- const classBase = "vuuPlaceholder";
10
- const PlaceholderCore = ({ showStartMenu = true }) => {
11
- return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: showStartMenu ? /* @__PURE__ */ jsxRuntime.jsx(LayoutStartPanel.LayoutStartPanel, {}) : null });
12
- };
13
- const Placeholder = ({
14
- className: classNameProp,
15
- showStartMenu,
16
- ...viewProps
17
- }) => {
18
- const className = cx(classBase, classNameProp);
19
- return /* @__PURE__ */ jsxRuntime.jsx(View.View, { ...viewProps, className, "data-placeholder": true, resizeable: true, children: /* @__PURE__ */ jsxRuntime.jsx(PlaceholderCore, { showStartMenu }) });
20
- };
21
- Placeholder.displayName = "Placeholder";
22
- ComponentRegistry.registerComponent("Placeholder", Placeholder);
23
-
24
- exports.Placeholder = Placeholder;
25
- //# sourceMappingURL=Placeholder.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Placeholder.js","sources":["../../src/placeholder/Placeholder.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { registerComponent } from \"../registry/ComponentRegistry\";\nimport { LayoutStartPanel } from \"./LayoutStartPanel\";\nimport { View, ViewProps } from \"../layout-view\";\n\nimport \"./Placeholder.css\";\n\nconst classBase = \"vuuPlaceholder\";\n\nexport interface PlaceholderProps extends ViewProps {\n closeable?: boolean;\n flexFill?: boolean;\n resizeable?: boolean;\n showStartMenu?: boolean;\n /**\n * shim is only when we're dealing with intrinsically sized children, which is never\n * in an actual application. Intrinsic sizing is still experimental.\n */\n shim?: boolean;\n}\n\nconst PlaceholderCore = ({ showStartMenu = true }: PlaceholderProps) => {\n return <>{showStartMenu ? <LayoutStartPanel /> : null}</>;\n};\n\nexport const Placeholder = ({\n className: classNameProp,\n showStartMenu,\n ...viewProps\n}: PlaceholderProps) => {\n const className = cx(classBase, classNameProp);\n\n return (\n <View {...viewProps} className={className} data-placeholder resizeable>\n <PlaceholderCore showStartMenu={showStartMenu} />\n </View>\n );\n};\n\nPlaceholder.displayName = \"Placeholder\";\nregisterComponent(\"Placeholder\", Placeholder);\n"],"names":["jsx","Fragment","LayoutStartPanel","View","registerComponent"],"mappings":";;;;;;;;AAOA,MAAM,SAAY,GAAA,gBAAA,CAAA;AAclB,MAAM,eAAkB,GAAA,CAAC,EAAE,aAAA,GAAgB,MAA6B,KAAA;AACtE,EAAA,uBAAUA,cAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAA,aAAA,mBAAiBD,cAAA,CAAAE,iCAAA,EAAA,EAAiB,IAAK,IAAK,EAAA,CAAA,CAAA;AACxD,CAAA,CAAA;AAEO,MAAM,cAAc,CAAC;AAAA,EAC1B,SAAW,EAAA,aAAA;AAAA,EACX,aAAA;AAAA,EACA,GAAG,SAAA;AACL,CAAwB,KAAA;AACtB,EAAM,MAAA,SAAA,GAAY,EAAG,CAAA,SAAA,EAAW,aAAa,CAAA,CAAA;AAE7C,EAAA,uBACGF,cAAA,CAAAG,SAAA,EAAA,EAAM,GAAG,SAAA,EAAW,SAAsB,EAAA,kBAAA,EAAgB,IAAC,EAAA,UAAA,EAAU,IACpE,EAAA,QAAA,kBAAAH,cAAA,CAAC,eAAgB,EAAA,EAAA,aAAA,EAA8B,CACjD,EAAA,CAAA,CAAA;AAEJ,EAAA;AAEA,WAAA,CAAY,WAAc,GAAA,aAAA,CAAA;AAC1BI,mCAAA,CAAkB,eAAe,WAAW,CAAA;;;;"}
@@ -1,27 +0,0 @@
1
- 'use strict';
2
-
3
- const _containers = {};
4
- const _views = {};
5
- const ComponentRegistry = {};
6
- function isContainer(componentType) {
7
- return _containers[componentType] === true;
8
- }
9
- function isView(componentType) {
10
- return _views[componentType] === true;
11
- }
12
- const isLayoutComponent = (type) => isContainer(type) || isView(type);
13
- function registerComponent(componentName, component, type = "component") {
14
- ComponentRegistry[componentName] = component;
15
- if (type === "container") {
16
- _containers[componentName] = true;
17
- } else if (type === "view") {
18
- _views[componentName] = true;
19
- }
20
- }
21
-
22
- exports.ComponentRegistry = ComponentRegistry;
23
- exports.isContainer = isContainer;
24
- exports.isLayoutComponent = isLayoutComponent;
25
- exports.isView = isView;
26
- exports.registerComponent = registerComponent;
27
- //# sourceMappingURL=ComponentRegistry.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ComponentRegistry.js","sources":["../../src/registry/ComponentRegistry.ts"],"sourcesContent":["import { FunctionComponent } from \"react\";\n\nconst _containers: { [key: string]: boolean } = {};\nconst _views: { [key: string]: boolean } = {};\n\nexport type layoutComponentType = \"component\" | \"container\" | \"view\";\n\nexport interface ComponentWithId {\n id: string;\n [key: string]: unknown;\n}\n\nexport const ComponentRegistry: {\n [key: string]: FunctionComponent<ComponentWithId>;\n} = {};\n\nexport function isContainer(componentType: string) {\n return _containers[componentType] === true;\n}\n\nexport function isView(componentType: string) {\n return _views[componentType] === true;\n}\n\nexport const isLayoutComponent = (type: string) =>\n isContainer(type) || isView(type);\n\n// export const isRegistered = (className: string) =>\n// !!ComponentRegistry[className];\n\nexport function registerComponent(\n componentName: string,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n component: FunctionComponent<any>,\n type: layoutComponentType = \"component\"\n) {\n ComponentRegistry[componentName] = component;\n\n if (type === \"container\") {\n _containers[componentName] = true;\n } else if (type === \"view\") {\n _views[componentName] = true;\n }\n}\n"],"names":[],"mappings":";;AAEA,MAAM,cAA0C,EAAC,CAAA;AACjD,MAAM,SAAqC,EAAC,CAAA;AASrC,MAAM,oBAET,GAAC;AAEE,SAAS,YAAY,aAAuB,EAAA;AACjD,EAAO,OAAA,WAAA,CAAY,aAAa,CAAM,KAAA,IAAA,CAAA;AACxC,CAAA;AAEO,SAAS,OAAO,aAAuB,EAAA;AAC5C,EAAO,OAAA,MAAA,CAAO,aAAa,CAAM,KAAA,IAAA,CAAA;AACnC,CAAA;AAEO,MAAM,oBAAoB,CAAC,IAAA,KAChC,YAAY,IAAI,CAAA,IAAK,OAAO,IAAI,EAAA;AAK3B,SAAS,iBACd,CAAA,aAAA,EAEA,SACA,EAAA,IAAA,GAA4B,WAC5B,EAAA;AACA,EAAA,iBAAA,CAAkB,aAAa,CAAI,GAAA,SAAA,CAAA;AAEnC,EAAA,IAAI,SAAS,WAAa,EAAA;AACxB,IAAA,WAAA,CAAY,aAAa,CAAI,GAAA,IAAA,CAAA;AAAA,GAC/B,MAAA,IAAW,SAAS,MAAQ,EAAA;AAC1B,IAAA,MAAA,CAAO,aAAa,CAAI,GAAA,IAAA,CAAA;AAAA,GAC1B;AACF;;;;;;;;"}
@@ -1,36 +0,0 @@
1
- 'use strict';
2
-
3
- function breakpointReader(themeName, defaultBreakpoints) {
4
- const themeRoot = document.body.querySelector(`.${themeName}`);
5
- const handler = {
6
- get: function(style, stopName) {
7
- const val = style.getPropertyValue(
8
- // lets assume we have the following naming convention
9
- `--${themeName}-breakpoint-${stopName}`
10
- );
11
- return val ? parseInt(val) : void 0;
12
- }
13
- };
14
- return themeRoot ? new Proxy(getComputedStyle(themeRoot), handler) : defaultBreakpoints ?? {};
15
- }
16
- const byDescendingStopSize = ([, s1], [, s2]) => s2 - s1;
17
- const breakpointRamp = (breakpoints) => Object.entries(breakpoints).sort(byDescendingStopSize).map(([name, value], i, all) => [
18
- name,
19
- value,
20
- i < all.length - 1 ? all[i + 1][1] : 9999
21
- ]);
22
- let documentBreakpoints = null;
23
- const loadBreakpoints = (themeName = "salt") => {
24
- const { xs, sm, md, lg, xl } = breakpointReader(themeName);
25
- return breakpointRamp({ xs, sm, md, lg, xl });
26
- };
27
- const getBreakPoints = (themeName) => {
28
- if (documentBreakpoints === null) {
29
- documentBreakpoints = loadBreakpoints(themeName);
30
- }
31
- return documentBreakpoints;
32
- };
33
-
34
- exports.breakpointRamp = breakpointRamp;
35
- exports.getBreakPoints = getBreakPoints;
36
- //# sourceMappingURL=breakpoints.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"breakpoints.js","sources":["../../src/responsive/breakpoints.ts"],"sourcesContent":["// should we have some global; defaults ?\n\nimport { BreakPointsProp } from \"../flexbox/flexboxTypes\";\n\nexport type BreakPointRamp = [string, number, number];\n\nfunction breakpointReader(\n themeName: string,\n defaultBreakpoints?: BreakPointsProp\n) {\n //TODO ownerDocument\n const themeRoot = document.body.querySelector(`.${themeName}`);\n const handler = {\n get: function (style: CSSStyleDeclaration, stopName: string) {\n const val = style.getPropertyValue(\n // lets assume we have the following naming convention\n `--${themeName}-breakpoint-${stopName}`\n );\n return val ? parseInt(val) : undefined;\n },\n };\n\n return themeRoot\n ? new Proxy(getComputedStyle(themeRoot), handler)\n : defaultBreakpoints ?? {};\n}\n\nconst byDescendingStopSize = (\n [, s1]: [string, number],\n [, s2]: [string, number]\n) => s2 - s1;\n\n// These are assumed to be min-width (aka mobile-first) stops, we could take a\n// paramneter to support max-width as well ?\n// return [stopName, minWidth, maxWidth]\nexport const breakpointRamp = (\n breakpoints: BreakPointsProp\n): BreakPointRamp[] =>\n Object.entries(breakpoints)\n .sort(byDescendingStopSize)\n .map(([name, value], i, all) => [\n name,\n value,\n i < all.length - 1 ? all[i + 1][1] : 9999,\n ]);\n\nlet documentBreakpoints: BreakPointRamp[] | null = null;\n\nconst loadBreakpoints = (themeName = \"salt\") => {\n // TODO would be nice to read these breakpoint labels from a css variable to\n // avoid hard-coding them here ?\n const { xs, sm, md, lg, xl } = breakpointReader(themeName) as BreakPointsProp;\n return breakpointRamp({ xs, sm, md, lg, xl });\n};\n\n//TODO support multiple themes loaded\nexport const getBreakPoints = (themeName?: string) => {\n if (documentBreakpoints === null) {\n documentBreakpoints = loadBreakpoints(themeName);\n }\n return documentBreakpoints;\n};\n"],"names":[],"mappings":";;AAMA,SAAS,gBAAA,CACP,WACA,kBACA,EAAA;AAEA,EAAA,MAAM,YAAY,QAAS,CAAA,IAAA,CAAK,aAAc,CAAA,CAAA,CAAA,EAAI,SAAS,CAAE,CAAA,CAAA,CAAA;AAC7D,EAAA,MAAM,OAAU,GAAA;AAAA,IACd,GAAA,EAAK,SAAU,KAAA,EAA4B,QAAkB,EAAA;AAC3D,MAAA,MAAM,MAAM,KAAM,CAAA,gBAAA;AAAA;AAAA,QAEhB,CAAA,EAAA,EAAK,SAAS,CAAA,YAAA,EAAe,QAAQ,CAAA,CAAA;AAAA,OACvC,CAAA;AACA,MAAO,OAAA,GAAA,GAAM,QAAS,CAAA,GAAG,CAAI,GAAA,KAAA,CAAA,CAAA;AAAA,KAC/B;AAAA,GACF,CAAA;AAEA,EAAO,OAAA,SAAA,GACH,IAAI,KAAM,CAAA,gBAAA,CAAiB,SAAS,CAAG,EAAA,OAAO,CAC9C,GAAA,kBAAA,IAAsB,EAAC,CAAA;AAC7B,CAAA;AAEA,MAAM,oBAAA,GAAuB,CAC3B,GAAG,EAAE,GACL,GAAG,EAAE,CAAA,KACF,EAAK,GAAA,EAAA,CAAA;AAKH,MAAM,iBAAiB,CAC5B,WAAA,KAEA,MAAO,CAAA,OAAA,CAAQ,WAAW,CACvB,CAAA,IAAA,CAAK,oBAAoB,CAAA,CACzB,IAAI,CAAC,CAAC,MAAM,KAAK,CAAA,EAAG,GAAG,GAAQ,KAAA;AAAA,EAC9B,IAAA;AAAA,EACA,KAAA;AAAA,EACA,CAAA,GAAI,IAAI,MAAS,GAAA,CAAA,GAAI,IAAI,CAAI,GAAA,CAAC,CAAE,CAAA,CAAC,CAAI,GAAA,IAAA;AACvC,CAAC,EAAA;AAEL,IAAI,mBAA+C,GAAA,IAAA,CAAA;AAEnD,MAAM,eAAA,GAAkB,CAAC,SAAA,GAAY,MAAW,KAAA;AAG9C,EAAM,MAAA,EAAE,IAAI,EAAI,EAAA,EAAA,EAAI,IAAI,EAAG,EAAA,GAAI,iBAAiB,SAAS,CAAA,CAAA;AACzD,EAAA,OAAO,eAAe,EAAE,EAAA,EAAI,IAAI,EAAI,EAAA,EAAA,EAAI,IAAI,CAAA,CAAA;AAC9C,CAAA,CAAA;AAGa,MAAA,cAAA,GAAiB,CAAC,SAAuB,KAAA;AACpD,EAAA,IAAI,wBAAwB,IAAM,EAAA;AAChC,IAAA,mBAAA,GAAsB,gBAAgB,SAAS,CAAA,CAAA;AAAA,GACjD;AACA,EAAO,OAAA,mBAAA,CAAA;AACT;;;;;"}