@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,36 +0,0 @@
1
- .vuuDockLayout {
2
- --chest-bg: var(--hw-chest-bg, inherit);
3
- --drawer-bg: var(--hw-drawer-bg, inherit);
4
- --drawer-size: var(--hw-drawer-size, 200px);
5
- --drawer-peek-size: var(--hw-drawer-peek-size, 32px);
6
- --drawer-transition-duration: var(--hw-drawer-transition-duration, 0.4s);
7
- background-color: var(--chest-bg);
8
- display: flex;
9
- }
10
-
11
- .vuuDockLayout-horizontal {
12
- flex-direction: row;
13
- }
14
-
15
- .vuuDockLayout-vertical {
16
- flex-direction: column;
17
- }
18
-
19
- .vuuDockLayout-content {
20
- background-color: var(--chest-bg);
21
- flex-grow: 1;
22
- flex-shrink: 1;
23
- overflow: hidden;
24
- /* position: relative; */
25
- display: flex;
26
- align-items: center;
27
- justify-content: center;
28
- }
29
-
30
- .vuuDockLayout-horizontal .vuuDockLayout-content {
31
- flex-basis: 100%;
32
- }
33
-
34
- .vuuDockLayout-vertical .vuuDockLayout-content {
35
- flex-basis: 100%;
36
- }
@@ -1,25 +0,0 @@
1
- import { jsxs, jsx } from 'react/jsx-runtime';
2
- import { partition } from '@vuu-ui/vuu-utils';
3
- import cx from 'clsx';
4
- import { registerComponent } from '../registry/ComponentRegistry.js';
5
- import Drawer from './Drawer.js';
6
-
7
- const isDrawer = (component) => component.type === Drawer;
8
- const isVertical = ({ props: { position = "left" } }) => position.match(/top|bottom/);
9
- const DockLayout = (props) => {
10
- const { children, className: classNameProp, id, style } = props;
11
- const classBase = "vuuDockLayout";
12
- const [drawers, content] = partition(children, isDrawer);
13
- const [verticalDrawers, horizontalDrawers] = partition(drawers, isVertical);
14
- const orientation = verticalDrawers.length === 0 ? "horizontal" : horizontalDrawers.length === 0 ? "vertical" : "both";
15
- const className = cx(classBase, classNameProp, `${classBase}-${orientation}`);
16
- return /* @__PURE__ */ jsxs("div", { className, id, style, children: [
17
- drawers,
18
- /* @__PURE__ */ jsx("div", { className: `${classBase}-content`, children: content })
19
- ] });
20
- };
21
- DockLayout.displayName = "DockLayout";
22
- registerComponent("DockLayout", DockLayout, "container");
23
-
24
- export { DockLayout as default };
25
- //# sourceMappingURL=DockLayout.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"DockLayout.js","sources":["../../src/dock-layout/DockLayout.tsx"],"sourcesContent":["import { partition } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, ReactElement } from \"react\";\nimport { registerComponent } from \"../registry/ComponentRegistry\";\nimport Drawer from \"./Drawer\";\n\nimport \"./DockLayout.css\";\n\nconst isDrawer = (component: ReactElement) => component.type === Drawer;\nconst isVertical = ({ props: { position = \"left\" } }: ReactElement) =>\n position.match(/top|bottom/);\n\nexport interface DockLayoutProps extends HTMLAttributes<HTMLDivElement> {\n children: ReactElement[];\n}\n\nconst DockLayout = (props: DockLayoutProps) => {\n const { children, className: classNameProp, id, style } = props;\n const classBase = \"vuuDockLayout\";\n const [drawers, content] = partition(children, isDrawer);\n const [verticalDrawers, horizontalDrawers] = partition(drawers, isVertical);\n const orientation =\n verticalDrawers.length === 0\n ? \"horizontal\"\n : horizontalDrawers.length === 0\n ? \"vertical\"\n : \"both\";\n\n const className = cx(classBase, classNameProp, `${classBase}-${orientation}`);\n\n return (\n <div className={className} id={id} style={style}>\n {drawers}\n <div className={`${classBase}-content`}>{content}</div>\n </div>\n );\n};\nDockLayout.displayName = \"DockLayout\";\n\nexport default DockLayout;\n\nregisterComponent(\"DockLayout\", DockLayout, \"container\");\n"],"names":[],"mappings":";;;;;;AAQA,MAAM,QAAW,GAAA,CAAC,SAA4B,KAAA,SAAA,CAAU,IAAS,KAAA,MAAA,CAAA;AACjE,MAAM,UAAA,GAAa,CAAC,EAAE,KAAO,EAAA,EAAE,QAAW,GAAA,MAAA,EAAS,EAAA,KACjD,QAAS,CAAA,KAAA,CAAM,YAAY,CAAA,CAAA;AAMvB,MAAA,UAAA,GAAa,CAAC,KAA2B,KAAA;AAC7C,EAAA,MAAM,EAAE,QAAU,EAAA,SAAA,EAAW,aAAe,EAAA,EAAA,EAAI,OAAU,GAAA,KAAA,CAAA;AAC1D,EAAA,MAAM,SAAY,GAAA,eAAA,CAAA;AAClB,EAAA,MAAM,CAAC,OAAS,EAAA,OAAO,CAAI,GAAA,SAAA,CAAU,UAAU,QAAQ,CAAA,CAAA;AACvD,EAAA,MAAM,CAAC,eAAiB,EAAA,iBAAiB,CAAI,GAAA,SAAA,CAAU,SAAS,UAAU,CAAA,CAAA;AAC1E,EAAM,MAAA,WAAA,GACJ,gBAAgB,MAAW,KAAA,CAAA,GACvB,eACA,iBAAkB,CAAA,MAAA,KAAW,IAC7B,UACA,GAAA,MAAA,CAAA;AAEN,EAAM,MAAA,SAAA,GAAY,GAAG,SAAW,EAAA,aAAA,EAAe,GAAG,SAAS,CAAA,CAAA,EAAI,WAAW,CAAE,CAAA,CAAA,CAAA;AAE5E,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA,EAAI,SAAsB,EAAA,EAAA,EAAQ,KAChC,EAAA,QAAA,EAAA;AAAA,IAAA,OAAA;AAAA,wBACA,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,YAAa,QAAQ,EAAA,OAAA,EAAA,CAAA;AAAA,GACnD,EAAA,CAAA,CAAA;AAEJ,EAAA;AACA,UAAA,CAAW,WAAc,GAAA,YAAA,CAAA;AAIzB,iBAAkB,CAAA,YAAA,EAAc,YAAY,WAAW,CAAA;;;;"}
@@ -1,159 +0,0 @@
1
- .vuuDrawer {
2
- --drawer-leading-edge-border: solid 1px var(--salt-container-primary-borderColor, none);
3
- --vuu-close-icon-svg: var(--svg-chevron-double-right);
4
-
5
- transition: flex-basis;
6
- transition-duration: var(--drawer-transition-duration);
7
- position: relative;
8
- z-index: 1;
9
- flex-basis: 0;
10
- flex-grow: 1;
11
- flex-shrink: 1;
12
- min-width: 0;
13
- min-height: 0;
14
- display: flex;
15
- }
16
-
17
- .vuuDrawer-peekaboo {
18
- flex-basis: var(--drawer-peek-size);
19
- flex-grow: 0;
20
- flex-shrink: 0;
21
- }
22
-
23
- .vuuDrawer-inline.vuuDrawer-open {
24
- flex-basis: var(--drawer-size);
25
- flex-grow: 0;
26
- flex-shrink: 0;
27
- }
28
-
29
- .vuuDrawer-liner {
30
- background-color: var(--drawer-bg);
31
- overflow: hidden;
32
- position: relative;
33
- }
34
-
35
- .vuuDrawer-content {
36
- height: 100%;
37
- overflow: hidden;
38
- position: absolute;
39
- top: 0;
40
- right: var(--drawer-peek-size);
41
- transition: right;
42
- transition-duration: var(--drawer-transition-duration);
43
- width: 100%;
44
- flex: 1 1 100%;
45
- }
46
-
47
- .vuuDrawer-open .vuuDrawer-content {
48
- right: 0;
49
- }
50
-
51
- /* .vuuDrawer:not(.vuuDrawer-open) .vuuDrawer-liner > * {
52
- display: none;
53
- } */
54
-
55
- .vuuDrawer-left {
56
- border-right: var(--drawer-leading-edge-border);
57
- }
58
- .vuuDrawer-right {
59
- border-left: var(--drawer-leading-edge-border);
60
- }
61
- .vuuDrawer-top {
62
- border-bottom: var(--drawer-leading-edge-border);
63
- }
64
- .vuuDrawer-bottom {
65
- border-top: var(--drawer-leading-edge-border);
66
- }
67
-
68
- .vuuDrawer-left .vuuDrawer-liner,
69
- .vuuDrawer-right .vuuDrawer-liner {
70
- height: 100%;
71
- transition: width;
72
- }
73
-
74
- .vuuDrawer-top .vuuDrawer-liner,
75
- .vuuDrawer-bottom .vuuDrawer-liner {
76
- width: 100%;
77
- transition: height;
78
- }
79
-
80
- .vuuDrawer-inline .vuuDrawer-liner {
81
- width: 100%;
82
- height: 100%;
83
- }
84
-
85
- .vuuDrawer-over .vuuDrawer-liner {
86
- position: absolute;
87
- transition-duration: 0.4s;
88
- }
89
-
90
- .vuuDrawer-over.vuuDrawer-left .vuuDrawer-liner {
91
- top: 0;
92
- left: 0;
93
- width: 0;
94
- }
95
-
96
- .vuuDrawer-over.vuuDrawer-right .vuuDrawer-liner {
97
- top: 0;
98
- right: 0;
99
- width: 0;
100
- }
101
-
102
- .vuuDrawer-over.vuuDrawer-top .vuuDrawer-liner {
103
- height: 0;
104
- top: 0;
105
- left: 0;
106
- }
107
-
108
- .vuuDrawer-over.vuuDrawer-bottom .vuuDrawer-liner {
109
- bottom: 0;
110
- height: 0;
111
- left: 0;
112
- }
113
-
114
- .vuuDrawer-left.vuuDrawer-over.vuuDrawer-peekaboo .vuuDrawer-liner,
115
- .vuuDrawer-right.vuuDrawer-over.vuuDrawer-peekaboo .vuuDrawer-liner {
116
- width: var(--drawer-peek-size);
117
- }
118
-
119
- .vuuDrawer-top.vuuDrawer-over.vuuDrawer-peekaboo .vuuDrawer-liner,
120
- .vuuDrawer-bottom.vuuDrawer-over.vuuDrawer-peekaboo .vuuDrawer-liner {
121
- height: var(--drawer-peek-size);
122
- }
123
-
124
- .vuuDrawer-left.vuuDrawer-over.vuuDrawer-open .vuuDrawer-liner,
125
- .vuuDrawer-right.vuuDrawer-over.vuuDrawer-open .vuuDrawer-liner {
126
- width: var(--drawer-size);
127
- }
128
-
129
- .vuuDrawer-top.vuuDrawer-over.vuuDrawer-open .vuuDrawer-liner,
130
- .vuuDrawer-bottom.vuuDrawer-over.vuuDrawer-open .vuuDrawer-liner {
131
- height: var(--drawer-size);
132
- }
133
-
134
- .vuuDrawer-top,
135
- .vuuDrawer-left {
136
- order: 0;
137
- }
138
-
139
- .vuuDrawer-bottom,
140
- .vuuDrawer-right {
141
- order: 99;
142
- }
143
-
144
- .vuuDrawer-left,
145
- .vuuDrawer-right {
146
- flex-direction: column;
147
- }
148
-
149
- .vuuToggleButton-container {
150
- --saltButton-height: 28px;
151
- --saltButton-width: 28px;
152
- --vuu-icon-size: 12px;
153
- flex: 0 0 28px;
154
- }
155
-
156
- .vuuDrawer-open {
157
- --vuu-close-icon-svg: var(--svg-chevron-double-left);
158
-
159
- }
@@ -1,85 +0,0 @@
1
- import { jsxs, jsx } from 'react/jsx-runtime';
2
- import { useControlled, Button } from '@salt-ds/core';
3
- import cx from 'clsx';
4
- import { useCallback } from 'react';
5
-
6
- const classBase = "vuuDrawer";
7
- const sizeAttribute = (value) => {
8
- return typeof value === "string" ? value : value + "px";
9
- };
10
- const getStyle = (styleProp, sizeOpen, sizeClosed) => {
11
- const hasSizeOpen = sizeOpen !== void 0;
12
- const hasSizeClosed = sizeClosed !== void 0;
13
- if (!styleProp && !hasSizeClosed && !hasSizeOpen) {
14
- return void 0;
15
- }
16
- if (!hasSizeClosed && !hasSizeOpen) {
17
- return styleProp;
18
- }
19
- return {
20
- ...styleProp,
21
- "--drawer-size": hasSizeOpen ? sizeAttribute(sizeOpen) : void 0,
22
- "--drawer-peek-size": hasSizeClosed ? sizeAttribute(sizeClosed) : void 0
23
- };
24
- };
25
- const Drawer = ({
26
- children,
27
- className: classNameProp,
28
- clickToOpen,
29
- defaultOpen,
30
- sizeOpen,
31
- sizeClosed,
32
- style: styleProp,
33
- open: openProp,
34
- position = "left",
35
- inline,
36
- onClick,
37
- peekaboo = false,
38
- toggleButton,
39
- ...props
40
- }) => {
41
- const [open, setOpen] = useControlled({
42
- controlled: openProp,
43
- default: defaultOpen ?? false,
44
- name: "Drawer",
45
- state: "open"
46
- });
47
- console.log(`Drawer sizeOpen ${sizeOpen} sizeClosed ${sizeClosed}`);
48
- const className = cx(classBase, classNameProp, `${classBase}-${position}`, {
49
- [`${classBase}-open`]: open,
50
- [`${classBase}-inline`]: inline,
51
- [`${classBase}-over`]: !inline,
52
- [`${classBase}-peekaboo`]: peekaboo
53
- });
54
- const toggleDrawer = useCallback(() => {
55
- setOpen(!open);
56
- }, [open, setOpen]);
57
- const style = getStyle(styleProp, sizeOpen, sizeClosed);
58
- const handleClick = clickToOpen ? toggleDrawer : onClick;
59
- const renderToggleButton = () => /* @__PURE__ */ jsx("div", { className: cx("vuuToggleButton-container"), children: open ? /* @__PURE__ */ jsx(
60
- Button,
61
- {
62
- "aria-label": "close",
63
- onClick: toggleDrawer,
64
- "data-icon": "close",
65
- variant: "secondary"
66
- }
67
- ) : /* @__PURE__ */ jsx(
68
- Button,
69
- {
70
- "aria-label": "open",
71
- onClick: toggleDrawer,
72
- "data-icon": "close",
73
- variant: "secondary"
74
- }
75
- ) });
76
- return /* @__PURE__ */ jsxs("div", { ...props, className, onClick: handleClick, style, children: [
77
- toggleButton == "start" ? renderToggleButton() : null,
78
- /* @__PURE__ */ jsx("div", { className: `${classBase}-liner`, children: /* @__PURE__ */ jsx("div", { className: `${classBase}-content`, children }) }),
79
- toggleButton == "end" ? renderToggleButton() : null
80
- ] });
81
- };
82
- Drawer.displayName = "Drawer";
83
-
84
- export { Drawer as default };
85
- //# sourceMappingURL=Drawer.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Drawer.js","sources":["../../src/dock-layout/Drawer.tsx"],"sourcesContent":["import { Button, useControlled } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport { CSSProperties, HTMLAttributes, useCallback } from \"react\";\n\nimport \"./Drawer.css\";\n\nconst classBase = \"vuuDrawer\";\n\nconst sizeAttribute = (value: string | number) => {\n return typeof value === \"string\" ? value : value + \"px\";\n};\n\nconst getStyle = (\n styleProp?: CSSProperties,\n sizeOpen?: number,\n sizeClosed?: number\n) => {\n const hasSizeOpen = sizeOpen !== undefined;\n const hasSizeClosed = sizeClosed !== undefined;\n\n if (!styleProp && !hasSizeClosed && !hasSizeOpen) {\n return undefined;\n }\n\n if (!hasSizeClosed && !hasSizeOpen) {\n return styleProp;\n }\n\n return {\n ...styleProp,\n \"--drawer-size\": hasSizeOpen ? sizeAttribute(sizeOpen) : undefined,\n \"--drawer-peek-size\": hasSizeClosed ? sizeAttribute(sizeClosed) : undefined,\n };\n};\n\nexport interface DrawerProps extends HTMLAttributes<HTMLDivElement> {\n clickToOpen?: boolean;\n defaultOpen?: boolean;\n inline?: boolean;\n open?: boolean;\n peekaboo?: boolean;\n position?: \"left\" | \"right\" | \"top\" | \"bottom\";\n sizeOpen?: number;\n sizeClosed?: number;\n toggleButton?: \"start\" | \"end\";\n}\nconst Drawer = ({\n children,\n className: classNameProp,\n clickToOpen,\n defaultOpen,\n sizeOpen,\n sizeClosed,\n style: styleProp,\n open: openProp,\n position = \"left\",\n inline,\n onClick,\n peekaboo = false,\n toggleButton,\n ...props\n}: DrawerProps) => {\n const [open, setOpen] = useControlled({\n controlled: openProp,\n default: defaultOpen ?? false,\n name: \"Drawer\",\n state: \"open\",\n });\n\n console.log(`Drawer sizeOpen ${sizeOpen} sizeClosed ${sizeClosed}`);\n\n const className = cx(classBase, classNameProp, `${classBase}-${position}`, {\n [`${classBase}-open`]: open,\n [`${classBase}-inline`]: inline,\n [`${classBase}-over`]: !inline,\n [`${classBase}-peekaboo`]: peekaboo,\n });\n\n const toggleDrawer = useCallback(() => {\n setOpen(!open);\n }, [open, setOpen]);\n\n const style = getStyle(styleProp, sizeOpen, sizeClosed);\n\n const handleClick = clickToOpen ? toggleDrawer : onClick;\n\n const renderToggleButton = () => (\n <div className={cx(\"vuuToggleButton-container\")}>\n {open ? (\n <Button\n aria-label=\"close\"\n onClick={toggleDrawer}\n data-icon=\"close\"\n variant=\"secondary\"\n />\n ) : (\n <Button\n aria-label=\"open\"\n onClick={toggleDrawer}\n data-icon=\"close\"\n variant=\"secondary\"\n />\n )}\n </div>\n );\n\n return (\n <div {...props} className={className} onClick={handleClick} style={style}>\n {toggleButton == \"start\" ? renderToggleButton() : null}\n <div className={`${classBase}-liner`}>\n <div className={`${classBase}-content`}>{children}</div>\n </div>\n {toggleButton == \"end\" ? renderToggleButton() : null}\n </div>\n );\n};\nDrawer.displayName = \"Drawer\";\n\nexport default Drawer;\n"],"names":[],"mappings":"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"}