@vuu-ui/vuu-shell 2.1.18 → 2.1.19-beta.1

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 (191) hide show
  1. package/package.json +16 -18
  2. package/types/feature/FeatureErrorBoundary.d.ts +1 -1
  3. package/types/workspace-management/WorkspaceProvider.d.ts +5 -5
  4. package/cjs/ShellContextProvider.js +0 -25
  5. package/cjs/ShellContextProvider.js.map +0 -1
  6. package/cjs/app-header/AppHeader.css.js +0 -6
  7. package/cjs/app-header/AppHeader.css.js.map +0 -1
  8. package/cjs/app-header/AppHeader.js +0 -118
  9. package/cjs/app-header/AppHeader.js.map +0 -1
  10. package/cjs/application-provider/ApplicationContext.js +0 -17
  11. package/cjs/application-provider/ApplicationContext.js.map +0 -1
  12. package/cjs/application-provider/ApplicationProvider.js +0 -102
  13. package/cjs/application-provider/ApplicationProvider.js.map +0 -1
  14. package/cjs/feature/Feature.js +0 -54
  15. package/cjs/feature/Feature.js.map +0 -1
  16. package/cjs/feature/FeatureErrorBoundary.js +0 -30
  17. package/cjs/feature/FeatureErrorBoundary.js.map +0 -1
  18. package/cjs/feature-and-layout-provider/FeatureAndLayoutProvider.js +0 -60
  19. package/cjs/feature-and-layout-provider/FeatureAndLayoutProvider.js.map +0 -1
  20. package/cjs/feature-list/FeatureList.css.js +0 -6
  21. package/cjs/feature-list/FeatureList.css.js.map +0 -1
  22. package/cjs/feature-list/FeatureList.js +0 -109
  23. package/cjs/feature-list/FeatureList.js.map +0 -1
  24. package/cjs/index.js +0 -71
  25. package/cjs/index.js.map +0 -1
  26. package/cjs/left-nav/LeftNav.css.js +0 -6
  27. package/cjs/left-nav/LeftNav.css.js.map +0 -1
  28. package/cjs/left-nav/LeftNav.js +0 -202
  29. package/cjs/left-nav/LeftNav.js.map +0 -1
  30. package/cjs/login/LoginPanel.css.js +0 -6
  31. package/cjs/login/LoginPanel.css.js.map +0 -1
  32. package/cjs/login/LoginPanel.js +0 -110
  33. package/cjs/login/LoginPanel.js.map +0 -1
  34. package/cjs/login/VuuLogo.js +0 -134
  35. package/cjs/login/VuuLogo.js.map +0 -1
  36. package/cjs/persistence-manager/LocalPersistenceManager.js +0 -193
  37. package/cjs/persistence-manager/LocalPersistenceManager.js.map +0 -1
  38. package/cjs/persistence-manager/PersistenceProvider.js +0 -21
  39. package/cjs/persistence-manager/PersistenceProvider.js.map +0 -1
  40. package/cjs/persistence-manager/RemotePersistenceManager.js +0 -165
  41. package/cjs/persistence-manager/RemotePersistenceManager.js.map +0 -1
  42. package/cjs/persistence-manager/StaticPersistenceManager.js +0 -73
  43. package/cjs/persistence-manager/StaticPersistenceManager.js.map +0 -1
  44. package/cjs/shell-layout-templates/context-panel/ContextPanel.css.js +0 -6
  45. package/cjs/shell-layout-templates/context-panel/ContextPanel.css.js.map +0 -1
  46. package/cjs/shell-layout-templates/context-panel/ContextPanel.js +0 -100
  47. package/cjs/shell-layout-templates/context-panel/ContextPanel.js.map +0 -1
  48. package/cjs/shell-layout-templates/full-height-left-panel/useFullHeightLeftPanel.js +0 -51
  49. package/cjs/shell-layout-templates/full-height-left-panel/useFullHeightLeftPanel.js.map +0 -1
  50. package/cjs/shell-layout-templates/inlay-left-panel/useInlayLeftPanel.js +0 -83
  51. package/cjs/shell-layout-templates/inlay-left-panel/useInlayLeftPanel.js.map +0 -1
  52. package/cjs/shell-layout-templates/left-main-tabs/useLeftMainTabs.js +0 -46
  53. package/cjs/shell-layout-templates/left-main-tabs/useLeftMainTabs.js.map +0 -1
  54. package/cjs/shell-layout-templates/side-panel/SidePanel.css.js +0 -6
  55. package/cjs/shell-layout-templates/side-panel/SidePanel.css.js.map +0 -1
  56. package/cjs/shell-layout-templates/side-panel/SidePanel.js +0 -36
  57. package/cjs/shell-layout-templates/side-panel/SidePanel.js.map +0 -1
  58. package/cjs/shell-layout-templates/simple-content-pane/useSimpleContentPane.js +0 -48
  59. package/cjs/shell-layout-templates/simple-content-pane/useSimpleContentPane.js.map +0 -1
  60. package/cjs/shell-layout-templates/useShellLayout.js +0 -23
  61. package/cjs/shell-layout-templates/useShellLayout.js.map +0 -1
  62. package/cjs/shell.css.js +0 -6
  63. package/cjs/shell.css.js.map +0 -1
  64. package/cjs/shell.js +0 -137
  65. package/cjs/shell.js.map +0 -1
  66. package/cjs/theme-switch/ThemeSwitch.css.js +0 -6
  67. package/cjs/theme-switch/ThemeSwitch.css.js.map +0 -1
  68. package/cjs/theme-switch/ThemeSwitch.js +0 -56
  69. package/cjs/theme-switch/ThemeSwitch.js.map +0 -1
  70. package/cjs/user-settings/SettingsForm.css.js +0 -6
  71. package/cjs/user-settings/SettingsForm.css.js.map +0 -1
  72. package/cjs/user-settings/SettingsForm.js +0 -168
  73. package/cjs/user-settings/SettingsForm.js.map +0 -1
  74. package/cjs/user-settings/UserSettingsPanel.css.js +0 -6
  75. package/cjs/user-settings/UserSettingsPanel.css.js.map +0 -1
  76. package/cjs/user-settings/UserSettingsPanel.js +0 -42
  77. package/cjs/user-settings/UserSettingsPanel.js.map +0 -1
  78. package/cjs/workspace-management/LayoutList.css.js +0 -6
  79. package/cjs/workspace-management/LayoutList.css.js.map +0 -1
  80. package/cjs/workspace-management/LayoutList.js +0 -116
  81. package/cjs/workspace-management/LayoutList.js.map +0 -1
  82. package/cjs/workspace-management/LayoutTile.css.js +0 -6
  83. package/cjs/workspace-management/LayoutTile.css.js.map +0 -1
  84. package/cjs/workspace-management/LayoutTile.js +0 -41
  85. package/cjs/workspace-management/LayoutTile.js.map +0 -1
  86. package/cjs/workspace-management/SaveLayoutPanel.css.js +0 -6
  87. package/cjs/workspace-management/SaveLayoutPanel.css.js.map +0 -1
  88. package/cjs/workspace-management/SaveLayoutPanel.js +0 -128
  89. package/cjs/workspace-management/SaveLayoutPanel.js.map +0 -1
  90. package/cjs/workspace-management/WorkspaceProvider.js +0 -265
  91. package/cjs/workspace-management/WorkspaceProvider.js.map +0 -1
  92. package/cjs/workspace-management/defaultWorkspaceJSON.js +0 -101
  93. package/cjs/workspace-management/defaultWorkspaceJSON.js.map +0 -1
  94. package/cjs/workspace-management/screenshot-utils.js +0 -25
  95. package/cjs/workspace-management/screenshot-utils.js.map +0 -1
  96. package/cjs/workspace-management/useWorkspaceContextMenuItems.js +0 -72
  97. package/cjs/workspace-management/useWorkspaceContextMenuItems.js.map +0 -1
  98. package/esm/ShellContextProvider.js +0 -23
  99. package/esm/ShellContextProvider.js.map +0 -1
  100. package/esm/app-header/AppHeader.css.js +0 -4
  101. package/esm/app-header/AppHeader.css.js.map +0 -1
  102. package/esm/app-header/AppHeader.js +0 -116
  103. package/esm/app-header/AppHeader.js.map +0 -1
  104. package/esm/application-provider/ApplicationContext.js +0 -15
  105. package/esm/application-provider/ApplicationContext.js.map +0 -1
  106. package/esm/application-provider/ApplicationProvider.js +0 -96
  107. package/esm/application-provider/ApplicationProvider.js.map +0 -1
  108. package/esm/feature/Feature.js +0 -52
  109. package/esm/feature/Feature.js.map +0 -1
  110. package/esm/feature/FeatureErrorBoundary.js +0 -28
  111. package/esm/feature/FeatureErrorBoundary.js.map +0 -1
  112. package/esm/feature-and-layout-provider/FeatureAndLayoutProvider.js +0 -56
  113. package/esm/feature-and-layout-provider/FeatureAndLayoutProvider.js.map +0 -1
  114. package/esm/feature-list/FeatureList.css.js +0 -4
  115. package/esm/feature-list/FeatureList.css.js.map +0 -1
  116. package/esm/feature-list/FeatureList.js +0 -107
  117. package/esm/feature-list/FeatureList.js.map +0 -1
  118. package/esm/index.js +0 -25
  119. package/esm/index.js.map +0 -1
  120. package/esm/left-nav/LeftNav.css.js +0 -4
  121. package/esm/left-nav/LeftNav.css.js.map +0 -1
  122. package/esm/left-nav/LeftNav.js +0 -200
  123. package/esm/left-nav/LeftNav.js.map +0 -1
  124. package/esm/login/LoginPanel.css.js +0 -4
  125. package/esm/login/LoginPanel.css.js.map +0 -1
  126. package/esm/login/LoginPanel.js +0 -108
  127. package/esm/login/LoginPanel.js.map +0 -1
  128. package/esm/login/VuuLogo.js +0 -132
  129. package/esm/login/VuuLogo.js.map +0 -1
  130. package/esm/persistence-manager/LocalPersistenceManager.js +0 -191
  131. package/esm/persistence-manager/LocalPersistenceManager.js.map +0 -1
  132. package/esm/persistence-manager/PersistenceProvider.js +0 -17
  133. package/esm/persistence-manager/PersistenceProvider.js.map +0 -1
  134. package/esm/persistence-manager/RemotePersistenceManager.js +0 -163
  135. package/esm/persistence-manager/RemotePersistenceManager.js.map +0 -1
  136. package/esm/persistence-manager/StaticPersistenceManager.js +0 -71
  137. package/esm/persistence-manager/StaticPersistenceManager.js.map +0 -1
  138. package/esm/shell-layout-templates/context-panel/ContextPanel.css.js +0 -4
  139. package/esm/shell-layout-templates/context-panel/ContextPanel.css.js.map +0 -1
  140. package/esm/shell-layout-templates/context-panel/ContextPanel.js +0 -98
  141. package/esm/shell-layout-templates/context-panel/ContextPanel.js.map +0 -1
  142. package/esm/shell-layout-templates/full-height-left-panel/useFullHeightLeftPanel.js +0 -49
  143. package/esm/shell-layout-templates/full-height-left-panel/useFullHeightLeftPanel.js.map +0 -1
  144. package/esm/shell-layout-templates/inlay-left-panel/useInlayLeftPanel.js +0 -81
  145. package/esm/shell-layout-templates/inlay-left-panel/useInlayLeftPanel.js.map +0 -1
  146. package/esm/shell-layout-templates/left-main-tabs/useLeftMainTabs.js +0 -44
  147. package/esm/shell-layout-templates/left-main-tabs/useLeftMainTabs.js.map +0 -1
  148. package/esm/shell-layout-templates/side-panel/SidePanel.css.js +0 -4
  149. package/esm/shell-layout-templates/side-panel/SidePanel.css.js.map +0 -1
  150. package/esm/shell-layout-templates/side-panel/SidePanel.js +0 -34
  151. package/esm/shell-layout-templates/side-panel/SidePanel.js.map +0 -1
  152. package/esm/shell-layout-templates/simple-content-pane/useSimpleContentPane.js +0 -46
  153. package/esm/shell-layout-templates/simple-content-pane/useSimpleContentPane.js.map +0 -1
  154. package/esm/shell-layout-templates/useShellLayout.js +0 -21
  155. package/esm/shell-layout-templates/useShellLayout.js.map +0 -1
  156. package/esm/shell.css.js +0 -4
  157. package/esm/shell.css.js.map +0 -1
  158. package/esm/shell.js +0 -135
  159. package/esm/shell.js.map +0 -1
  160. package/esm/theme-switch/ThemeSwitch.css.js +0 -4
  161. package/esm/theme-switch/ThemeSwitch.css.js.map +0 -1
  162. package/esm/theme-switch/ThemeSwitch.js +0 -54
  163. package/esm/theme-switch/ThemeSwitch.js.map +0 -1
  164. package/esm/user-settings/SettingsForm.css.js +0 -4
  165. package/esm/user-settings/SettingsForm.css.js.map +0 -1
  166. package/esm/user-settings/SettingsForm.js +0 -162
  167. package/esm/user-settings/SettingsForm.js.map +0 -1
  168. package/esm/user-settings/UserSettingsPanel.css.js +0 -4
  169. package/esm/user-settings/UserSettingsPanel.css.js.map +0 -1
  170. package/esm/user-settings/UserSettingsPanel.js +0 -40
  171. package/esm/user-settings/UserSettingsPanel.js.map +0 -1
  172. package/esm/workspace-management/LayoutList.css.js +0 -4
  173. package/esm/workspace-management/LayoutList.css.js.map +0 -1
  174. package/esm/workspace-management/LayoutList.js +0 -114
  175. package/esm/workspace-management/LayoutList.js.map +0 -1
  176. package/esm/workspace-management/LayoutTile.css.js +0 -4
  177. package/esm/workspace-management/LayoutTile.css.js.map +0 -1
  178. package/esm/workspace-management/LayoutTile.js +0 -39
  179. package/esm/workspace-management/LayoutTile.js.map +0 -1
  180. package/esm/workspace-management/SaveLayoutPanel.css.js +0 -4
  181. package/esm/workspace-management/SaveLayoutPanel.css.js.map +0 -1
  182. package/esm/workspace-management/SaveLayoutPanel.js +0 -126
  183. package/esm/workspace-management/SaveLayoutPanel.js.map +0 -1
  184. package/esm/workspace-management/WorkspaceProvider.js +0 -262
  185. package/esm/workspace-management/WorkspaceProvider.js.map +0 -1
  186. package/esm/workspace-management/defaultWorkspaceJSON.js +0 -95
  187. package/esm/workspace-management/defaultWorkspaceJSON.js.map +0 -1
  188. package/esm/workspace-management/screenshot-utils.js +0 -23
  189. package/esm/workspace-management/screenshot-utils.js.map +0 -1
  190. package/esm/workspace-management/useWorkspaceContextMenuItems.js +0 -70
  191. package/esm/workspace-management/useWorkspaceContextMenuItems.js.map +0 -1
@@ -1,107 +0,0 @@
1
- import { jsxs, jsx } from 'react/jsx-runtime';
2
- import { PaletteItem, Palette } from '@vuu-ui/vuu-layout';
3
- import { Icon } from '@vuu-ui/vuu-ui-controls';
4
- import { isStaticFeatures, featureFromJson } from '@vuu-ui/vuu-utils';
5
- import { useComponentCssInjection } from '@salt-ds/styles';
6
- import { useWindow } from '@salt-ds/window';
7
- import cx from 'clsx';
8
- import { useMemo } from 'react';
9
- import { Feature } from '../feature/Feature.js';
10
- import featureListCss from './FeatureList.css.js';
11
-
12
- const classBase = "vuuFeatureList";
13
- const FeatureList = ({
14
- features,
15
- title = "VUU TABLES",
16
- ...htmlAttributes
17
- }) => {
18
- const targetWindow = useWindow();
19
- useComponentCssInjection({
20
- testId: "vuu-feature-list",
21
- css: featureListCss,
22
- window: targetWindow
23
- });
24
- const content = useMemo(() => {
25
- if (isStaticFeatures(features)) {
26
- return features.map(({ label, type }, idx) => {
27
- return /* @__PURE__ */ jsxs(
28
- PaletteItem,
29
- {
30
- ViewProps: {
31
- closeable: true,
32
- header: true,
33
- resize: "defer",
34
- resizeable: true
35
- },
36
- component: featureFromJson({ type }),
37
- value: label,
38
- children: [
39
- /* @__PURE__ */ jsx(Icon, { name: "draggable", size: 18 }),
40
- /* @__PURE__ */ jsx("span", { className: `${classBase}-itemName`, children: label })
41
- ]
42
- },
43
- idx
44
- );
45
- });
46
- }
47
- if (Array.isArray(features)) {
48
- return [
49
- /* @__PURE__ */ jsx("div", { className: `${classBase}-standalone`, children: /* @__PURE__ */ jsx(Palette, { orientation: "vertical", children: features.map(({ ViewProps, ...featureProps }, i) => /* @__PURE__ */ jsxs(
50
- PaletteItem,
51
- {
52
- ViewProps: {
53
- closeable: true,
54
- header: true,
55
- resize: "defer",
56
- resizeable: true,
57
- title: featureProps.title,
58
- ...ViewProps
59
- },
60
- component: /* @__PURE__ */ jsx(Feature, { ...featureProps }),
61
- value: featureProps.title,
62
- children: [
63
- /* @__PURE__ */ jsx(Icon, { name: "draggable", size: 18 }),
64
- /* @__PURE__ */ jsx("span", { className: `${classBase}-itemName`, children: featureProps.title })
65
- ]
66
- },
67
- i
68
- )) }, "0") }, 0)
69
- ];
70
- } else {
71
- return Object.entries(features).map(([heading, featureList], index) => /* @__PURE__ */ jsxs("div", { className: `${classBase}-group`, children: [
72
- /* @__PURE__ */ jsx("div", { className: `${classBase}-groupHeader`, children: heading }),
73
- /* @__PURE__ */ jsx(Palette, { orientation: "vertical", children: featureList.map(
74
- ({ ViewProps, ...featureProps }, i) => {
75
- return /* @__PURE__ */ jsxs(
76
- PaletteItem,
77
- {
78
- ViewProps: {
79
- closeable: true,
80
- header: true,
81
- resize: "defer",
82
- resizeable: true,
83
- title: featureProps.title,
84
- ...ViewProps
85
- },
86
- component: /* @__PURE__ */ jsx(Feature, { ...featureProps }),
87
- value: featureProps.title,
88
- children: [
89
- /* @__PURE__ */ jsx(Icon, { name: "draggable", size: 18 }),
90
- /* @__PURE__ */ jsx("span", { className: `${classBase}-itemName`, children: featureProps.title })
91
- ]
92
- },
93
- i
94
- );
95
- }
96
- ) })
97
- ] }, index));
98
- }
99
- }, [features]);
100
- return /* @__PURE__ */ jsxs("div", { ...htmlAttributes, className: cx(classBase, "vuuScrollable"), children: [
101
- /* @__PURE__ */ jsx("div", { className: `${classBase}-header`, children: title }),
102
- /* @__PURE__ */ jsx("div", { className: `${classBase}-content`, children: content })
103
- ] });
104
- };
105
-
106
- export { FeatureList };
107
- //# sourceMappingURL=FeatureList.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"FeatureList.js","sources":["../../../../packages/vuu-shell/src/feature-list/FeatureList.tsx"],"sourcesContent":["import { Palette, PaletteItem } from \"@vuu-ui/vuu-layout\";\nimport { Icon } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n DynamicFeatureProps,\n StaticFeatureDescriptor,\n featureFromJson,\n isStaticFeatures,\n} from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, Key, ReactElement, useMemo } from \"react\";\nimport { Feature } from \"../feature/Feature\";\n\nimport featureListCss from \"./FeatureList.css\";\n\nconst classBase = \"vuuFeatureList\";\n\nexport type GroupedFeatureProps<P extends object | undefined = object> = Record<\n string,\n DynamicFeatureProps<P>[]\n>;\n\nexport interface FeatureListProps extends HTMLAttributes<HTMLDivElement> {\n features:\n | DynamicFeatureProps[]\n | GroupedFeatureProps\n | StaticFeatureDescriptor[];\n}\n\nexport const FeatureList = ({\n features,\n title = \"VUU TABLES\",\n ...htmlAttributes\n}: FeatureListProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-feature-list\",\n css: featureListCss,\n window: targetWindow,\n });\n\n const content = useMemo<ReactElement[]>(() => {\n if (isStaticFeatures(features)) {\n return features.map(({ label, type }, idx) => {\n return (\n <PaletteItem\n ViewProps={{\n closeable: true,\n header: true,\n resize: \"defer\",\n resizeable: true,\n }}\n component={featureFromJson({ type })}\n key={idx}\n value={label}\n >\n <Icon name=\"draggable\" size={18} />\n <span className={`${classBase}-itemName`}>{label}</span>\n </PaletteItem>\n );\n });\n }\n if (Array.isArray(features)) {\n return [\n <div className={`${classBase}-standalone`} key={0}>\n <Palette key=\"0\" orientation=\"vertical\">\n {features.map(({ ViewProps, ...featureProps }, i) => (\n <PaletteItem\n ViewProps={{\n closeable: true,\n header: true,\n resize: \"defer\",\n resizeable: true,\n title: featureProps.title,\n ...ViewProps,\n }}\n component={<Feature {...featureProps} />}\n key={i}\n value={featureProps.title}\n >\n <Icon name=\"draggable\" size={18} />\n <span className={`${classBase}-itemName`}>\n {featureProps.title}\n </span>\n </PaletteItem>\n ))}\n </Palette>\n </div>,\n ];\n } else {\n return Object.entries(features).map(([heading, featureList], index) => (\n <div className={`${classBase}-group`} key={index}>\n <div className={`${classBase}-groupHeader`}>{heading}</div>\n <Palette orientation=\"vertical\">\n {featureList.map(\n (\n { ViewProps, ...featureProps }: DynamicFeatureProps<object>,\n i: Key,\n ) => {\n return (\n <PaletteItem\n ViewProps={{\n closeable: true,\n header: true,\n resize: \"defer\",\n resizeable: true,\n title: featureProps.title,\n ...ViewProps,\n }}\n component={<Feature {...featureProps} />}\n key={i}\n value={featureProps.title}\n >\n <Icon name=\"draggable\" size={18} />\n <span className={`${classBase}-itemName`}>\n {featureProps.title}\n </span>\n </PaletteItem>\n );\n },\n )}\n </Palette>\n </div>\n ));\n }\n }, [features]);\n\n return (\n <div {...htmlAttributes} className={cx(classBase, \"vuuScrollable\")}>\n <div className={`${classBase}-header`}>{title}</div>\n <div className={`${classBase}-content`}>{content}</div>\n </div>\n );\n};\n"],"names":[],"mappings":"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"}
package/esm/index.js DELETED
@@ -1,25 +0,0 @@
1
- export { ApplicationProvider, useApplicationSettings, useApplicationUser, useLogout, useUserSetting } from './application-provider/ApplicationProvider.js';
2
- export { AppHeader } from './app-header/AppHeader.js';
3
- export { Feature } from './feature/Feature.js';
4
- export { FeatureAndLayoutProvider, useFeatures, useLayouts } from './feature-and-layout-provider/FeatureAndLayoutProvider.js';
5
- export { LeftNav } from './left-nav/LeftNav.js';
6
- export { LoginPanel } from './login/LoginPanel.js';
7
- export { PersistenceContext, PersistenceProvider, usePersistenceManager } from './persistence-manager/PersistenceProvider.js';
8
- export { LocalPersistenceManager } from './persistence-manager/LocalPersistenceManager.js';
9
- export { RemotePersistenceManager } from './persistence-manager/RemotePersistenceManager.js';
10
- export { StaticPersistenceManager } from './persistence-manager/StaticPersistenceManager.js';
11
- export { Shell } from './shell.js';
12
- export { ContextPanel } from './shell-layout-templates/context-panel/ContextPanel.js';
13
- export { useShellLayout } from './shell-layout-templates/useShellLayout.js';
14
- export { SidePanel } from './shell-layout-templates/side-panel/SidePanel.js';
15
- export { ShellContextProvider } from './ShellContextProvider.js';
16
- export { FeatureList } from './feature-list/FeatureList.js';
17
- export { ThemeSwitch } from './theme-switch/ThemeSwitch.js';
18
- export { UserSettingsPanel } from './user-settings/UserSettingsPanel.js';
19
- export { FormControl, SettingsForm, isBooleanProperty, isOption, isStringOrNumber } from './user-settings/SettingsForm.js';
20
- export { SaveLayoutPanel } from './workspace-management/SaveLayoutPanel.js';
21
- export { LayoutList } from './workspace-management/LayoutList.js';
22
- export { WorkspaceProvider, useWorkspace } from './workspace-management/WorkspaceProvider.js';
23
- export { defaultWorkspaceJSON, getStackWorkspaceJSON, getWorkspaceWithLayoutJSON, loadingJSON, warningLayout } from './workspace-management/defaultWorkspaceJSON.js';
24
- export { useWorkspaceContextMenuItems } from './workspace-management/useWorkspaceContextMenuItems.js';
25
- //# sourceMappingURL=index.js.map
package/esm/index.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;"}
@@ -1,4 +0,0 @@
1
- var leftNavCss = ".vuuLeftNav {\n --vuuOverflowContainer-height: auto;\n --vuuFeatureList-padding: 195px 32px 16px 24px;\n --salt-navigable-fontWeight-active: 700;\n --vuuTab-background-selected: rgba(255, 255, 255, 0.1);\n --vuuTab-hover-background: rgba(255, 255, 255, 0.1);\n --vuuTab-before-content: none;\n --vuuTab-borderRadius: 6px;\n --vuuTab-height: 40px;\n --vuuTabstrip-fontWeight: 700;\n --vuuTabstrip-width: 100%;\n --svg-demo: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M11.3333 11C11.52 11 11.6667 10.8533 11.6667 10.6667C11.6667 10.48 11.52 10.3333 11.3333 10.3333C11.1467 10.3333 11 10.48 11 10.6667C11 10.8533 11.1467 11 11.3333 11Z\"/><path d=\"M5.99999 8.66667C6.36818 8.66667 6.66666 8.36819 6.66666 8C6.66666 7.63181 6.36818 7.33334 5.99999 7.33334C5.63181 7.33334 5.33333 7.63181 5.33333 8C5.33333 8.36819 5.63181 8.66667 5.99999 8.66667Z\"/><path d=\"M8.66667 6C9.03486 6 9.33333 5.70152 9.33333 5.33333C9.33333 4.96514 9.03486 4.66667 8.66667 4.66667C8.29848 4.66667 8 4.96514 8 5.33333C8 5.70152 8.29848 6 8.66667 6Z\"/><path d=\"M8.66667 11.3333C9.03486 11.3333 9.33333 11.0349 9.33333 10.6667C9.33333 10.2985 9.03486 10 8.66667 10C8.29848 10 8 10.2985 8 10.6667C8 11.0349 8.29848 11.3333 8.66667 11.3333Z\"/><path d=\"M11.3333 8.33333C11.52 8.33333 11.6667 8.18666 11.6667 8C11.6667 7.81333 11.52 7.66666 11.3333 7.66666C11.1467 7.66666 11 7.81333 11 8C11 8.18666 11.1467 8.33333 11.3333 8.33333Z\"/><path d=\"M8.66667 8.66667C9.03486 8.66667 9.33333 8.36819 9.33333 8C9.33333 7.63181 9.03486 7.33334 8.66667 7.33334C8.29848 7.33334 8 7.63181 8 8C8 8.36819 8.29848 8.66667 8.66667 8.66667Z\"/><path d=\"M2 2H14V3.33333H2V2Z\"/><path d=\"M3.33333 6.33333C3.88561 6.33333 4.33333 5.88562 4.33333 5.33333C4.33333 4.78105 3.88561 4.33333 3.33333 4.33333C2.78104 4.33333 2.33333 4.78105 2.33333 5.33333C2.33333 5.88562 2.78104 6.33333 3.33333 6.33333Z\"/><path d=\"M3.33333 9C3.88561 9 4.33333 8.55228 4.33333 8C4.33333 7.44772 3.88561 7 3.33333 7C2.78104 7 2.33333 7.44772 2.33333 8C2.33333 8.55228 2.78104 9 3.33333 9Z\"/><path d=\"M3.33333 11.6667C3.88561 11.6667 4.33333 11.2189 4.33333 10.6667C4.33333 10.1144 3.88561 9.66666 3.33333 9.66666C2.78104 9.66666 2.33333 10.1144 2.33333 10.6667C2.33333 11.2189 2.78104 11.6667 3.33333 11.6667Z\"/><path d=\"M11.3333 5.66667C11.52 5.66667 11.6667 5.52 11.6667 5.33333C11.6667 5.14667 11.52 5 11.3333 5C11.1467 5 11 5.14667 11 5.33333C11 5.52 11.1467 5.66667 11.3333 5.66667Z\"/><path d=\"M5.99999 11.3333C6.36818 11.3333 6.66666 11.0349 6.66666 10.6667C6.66666 10.2985 6.36818 10 5.99999 10C5.63181 10 5.33333 10.2985 5.33333 10.6667C5.33333 11.0349 5.63181 11.3333 5.99999 11.3333Z\"/><path d=\"M5.99999 6C6.36818 6 6.66666 5.70152 6.66666 5.33333C6.66666 4.96514 6.36818 4.66667 5.99999 4.66667C5.63181 4.66667 5.33333 4.96514 5.33333 5.33333C5.33333 5.70152 5.63181 6 5.99999 6Z\"/><path d=\"M2 12.6667H14V14H2V12.6667Z\"/></svg>');\n --svg-features: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M15.3333 12.6667H14L14 3.33334H15.3333L15.3333 12.6667ZM12.6667 12.6667H11.3333L11.3333 3.33334H12.6667L12.6667 12.6667ZM1.33333 12.6667L9.33333 12.6667C9.69999 12.6667 9.99999 12.3667 9.99999 12V4.00001C9.99999 3.63334 9.69999 3.33334 9.33333 3.33334L1.33333 3.33334C0.966661 3.33334 0.666661 3.63334 0.666661 4.00001L0.666661 12C0.666661 12.3667 0.966661 12.6667 1.33333 12.6667ZM1.99999 4.66667L8.66666 4.66667V11.3333L1.99999 11.3333L1.99999 4.66667Z\"/></svg>');\n --svg-tables: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M2 6H4.66667V3.33334H3.33333C2.6 3.33334 2 3.93334 2 4.66667V6ZM2 9.33334H4.66667V6.66667H2V9.33334ZM5.33333 9.33334H8V6.66667H5.33333V9.33334ZM8.66667 9.33334H11.3333V6.66667H8.66667V9.33334ZM5.33333 6H8V3.33334H5.33333V6ZM8.66667 3.33334V6H11.3333V3.33334H8.66667ZM12 9.33334H14.6667V6.66667H12V9.33334ZM3.33333 12.6667H4.66667V10H2V11.3333C2 12.0667 2.6 12.6667 3.33333 12.6667ZM5.33333 12.6667H8V10H5.33333V12.6667ZM8.66667 12.6667H11.3333V10H8.66667V12.6667ZM12 12.6667H13.3333C14.0667 12.6667 14.6667 12.0667 14.6667 11.3333V10H12V12.6667ZM12 3.33334V6H14.6667V4.66667C14.6667 3.93334 14.0667 3.33334 13.3333 3.33334H12Z\"/></svg>');\n --svg-layouts: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M15.3333 10H14V11.3333H15.3333V10ZM15.3333 12.6667H14V14H15.3333V12.6667ZM15.3333 7.33333H14V8.66667H15.3333V7.33333ZM10 2H8.66667V3.33333H10V2ZM15.3333 4.66667H14V6H15.3333V4.66667ZM0.666672 14H7.33334V10H0.666672V14ZM2.00001 4.66667H0.666672V6H2.00001V4.66667ZM10 12.6667H8.66667V14H10V12.6667ZM12.6667 2H11.3333V3.33333H12.6667V2ZM15.3333 2H14V3.33333H15.3333V2ZM12.6667 12.6667H11.3333V14H12.6667V12.6667ZM2.00001 7.33333H0.666672V8.66667H2.00001V7.33333ZM7.33334 2H6.00001V3.33333H7.33334V2ZM4.66667 2H3.33334V3.33333H4.66667V2ZM2.00001 2H0.666672V3.33333H2.00001V2Z\"/></svg>');\n --vuu-light-text-primary: #15171b;\n\n --menu-level-2-width: 0px;\n\n box-shadow: 3px 4px 4px 0 rgba(0, 0, 0, 0.15);\n display: flex;\n height: calc(100% - 4px);\n margin-bottom: 4px;\n overflow: hidden;\n position: relative;\n transition: width 0.2s ease-out;\n z-index: 0;\n /* width: calc(var(--menu-width) + var(--menu-level-2-width)); */\n /* width: 100%; */\n}\n\n.vuuLeftNav-menu-full {\n --menu-width: var(--nav-menu-expanded-width);\n}\n\n.vuuLeftNav-menu-icons {\n --menu-width: var(--nav-menu-collapsed-width);\n}\n\n.vuuLeftNav-menu-icons-content {\n --menu-width: var(--nav-menu-collapsed-width);\n --menu-level-2-width: var(--nav-menu-content-width);\n}\n\n.vuuLeftNav-menu-full-content {\n --menu-width: var(--nav-menu-expanded-width);\n --menu-level-2-width: var(--nav-menu-content-width);\n}\n\n.vuuLeftNav-menu-icons-content .vuuLeftNav-menu-secondary,\n.vuuLeftNav-menu-full-content .vuuLeftNav-menu-secondary {\n display: flex;\n}\n\n.vuuLeftNav-menu-primary {\n background-color: #2a015f;\n container-type: inline-size;\n display: flex;\n flex-direction: column;\n height: 100%;\n padding: 32px 16px;\n transition: flex-basis ease-out 0.2s;\n flex-grow: 0;\n flex-shrink: 0;\n flex-basis: var(--menu-width);\n}\n\n.vuuLeftNav-menu-secondary {\n flex: 1 1 auto;\n display: none;\n /* position: absolute; */\n top: 0;\n right: 0;\n flex-grow: 0;\n flex-shrink: 0;\n flex-basis: var(--nav-menu-content-width, 240px);\n z-index: -1;\n\n .vuuTabs-tabPanel {\n background: var(--salt-container-primary-background);\n height: 100%;\n padding: 34px 32px 8px 24px;\n }\n}\n\n.vuuLeftNav .vuuTabstrip {\n margin-top: 102px;\n}\n\n.vuuLeftNav .vuuTab {\n --vuuTab-focusVisible-color: pink;\n --vuu-icon-color: white;\n --vuu-icon-left: 12px;\n --vuu-icon-size: 16px;\n border-left: solid 4px transparent;\n padding: 0 0 0 48px;\n}\n\n.vuuLeftNav .vuuTab-selected {\n --vuu-icon-color: var(--salt-navigable-indicator-active);\n border-left: solid 4px var(--salt-navigable-indicator-active);\n}\n\n.vuuLeftNav-logo {\n display: flex;\n flex: 0 0 auto;\n justify-content: center;\n}\n\n.vuuLeftNav-main {\n flex: 1 1 auto;\n}\n\n.vuuLeftNav-menu {\n color: white;\n margin-top: 102px;\n padding: 0;\n}\n\n.vuuLeftNav [data-icon=\"demo\"] {\n --vuu-icon-svg: var(--svg-demo);\n}\n\n.vuuLeftNav [data-icon=\"tables\"] {\n --vuu-icon-svg: var(--svg-tables);\n}\n\n.vuuLeftNav [data-icon=\"features\"] {\n --vuu-icon-svg: var(--svg-features);\n}\n\n.vuuLeftNav [data-icon=\"layouts\"] {\n --vuu-icon-svg: var(--svg-layouts);\n}\n\n@container (max-width: 100px) {\n .vuuTab {\n /* --vuu-icon-left: 12px !important; */\n --vuuTab-padding: 0 0 0 42px;\n }\n\n .vuuTab-main {\n display: none !important;\n }\n}\n\n.vuuLeftNav-buttonBar {\n align-items: center;\n display: flex;\n flex: 0 0 100px;\n justify-content: center;\n}\n\n.vuuLeftNav-toggleButton {\n --vuu-icon-color: var(--vuu-light-text-primary);\n --vuu-icon-left: 11px;\n --vuu-icon-top: 10px;\n --vuu-icon-size: 16px;\n background-color: var(--salt-navigable-indicator-active);\n border-width: 0;\n border-radius: 18px;\n height: 36px;\n position: relative;\n width: 36px;\n}\n\n.vuuLeftNav-toggleButton-open {\n --vuu-icon-left: 9px;\n}\n\n.vuuLeftNav-drawer {\n display: flex;\n padding: 0 0 0 24px;\n flex-direction: column;\n align-items: flex-start;\n flex-shrink: 0;\n align-self: stretch;\n background: #fff;\n box-shadow: 3px 4px 4px 0 rgba(0, 0, 0, 0.15);\n height: 100%;\n}\n";
2
-
3
- export { leftNavCss as default };
4
- //# sourceMappingURL=LeftNav.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"LeftNav.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
@@ -1,200 +0,0 @@
1
- import { jsxs, jsx } from 'react/jsx-runtime';
2
- import { VuuLogo } from '@vuu-ui/vuu-icons';
3
- import { useLayoutProviderDispatch, Stack } from '@vuu-ui/vuu-layout';
4
- import { Tabstrip, Tab } from '@vuu-ui/vuu-ui-controls';
5
- import { hasFilterTableFeatureProps } from '@vuu-ui/vuu-utils';
6
- import { useComponentCssInjection } from '@salt-ds/styles';
7
- import { useWindow } from '@salt-ds/window';
8
- import cx from 'clsx';
9
- import { useState, useMemo, useCallback } from 'react';
10
- import { FeatureList } from '../feature-list/FeatureList.js';
11
- import '@salt-ds/core';
12
- import 'html-to-image';
13
- import '../application-provider/ApplicationContext.js';
14
- import '../persistence-manager/PersistenceProvider.js';
15
- import '../persistence-manager/LocalPersistenceManager.js';
16
- import '../persistence-manager/StaticPersistenceManager.js';
17
- import { LayoutList } from '../workspace-management/LayoutList.js';
18
- import '../workspace-management/WorkspaceProvider.js';
19
- import '../workspace-management/defaultWorkspaceJSON.js';
20
- import leftNavCss from './LeftNav.css.js';
21
- import { useFeatures } from '../feature-and-layout-provider/FeatureAndLayoutProvider.js';
22
-
23
- const classBase = "vuuLeftNav";
24
- const getDisplayStatus = (activeTabIndex, expanded) => {
25
- if (activeTabIndex === 0) {
26
- return expanded ? "menu-full" : "menu-icons";
27
- } else {
28
- return expanded ? "menu-full-content" : "menu-icons-content";
29
- }
30
- };
31
- const byModule = (f1, f2) => {
32
- const t1 = f1.ComponentProps?.tableSchema.table;
33
- const t2 = f2.ComponentProps?.tableSchema.table;
34
- if (t1 && t2) {
35
- const m1 = t1.module.toLowerCase();
36
- const m2 = t2.module.toLowerCase();
37
- if (m1 < m2) {
38
- return -1;
39
- } else if (m1 > m2) {
40
- return 1;
41
- } else if (t1.table < t2.table) {
42
- return -1;
43
- } else if (t1.table > t2.table) {
44
- return 1;
45
- } else {
46
- return 0;
47
- }
48
- } else {
49
- throw Error("Invalid tableFeature");
50
- }
51
- };
52
- const LeftNav = (props) => {
53
- const dispatch = useLayoutProviderDispatch();
54
- const {
55
- "data-path": path,
56
- defaultExpanded = true,
57
- defaultActiveTabIndex = 0,
58
- onActiveChange,
59
- onTogglePrimaryMenu,
60
- sizeCollapsed = 80,
61
- sizeContent = 300,
62
- sizeExpanded = 240,
63
- style: styleProp,
64
- ...htmlAttributes
65
- } = props;
66
- const targetWindow = useWindow();
67
- useComponentCssInjection({
68
- testId: "vuu-left-nav",
69
- css: leftNavCss,
70
- window: targetWindow
71
- });
72
- const { dynamicFeatures = [], tableFeatures = [] } = useFeatures();
73
- const [navState, setNavState] = useState({
74
- activeTabIndex: defaultActiveTabIndex,
75
- expanded: defaultExpanded
76
- });
77
- const tableFeaturesByGroup = useMemo(
78
- () => tableFeatures?.sort(byModule).reduce((acc, filterTableFeature) => {
79
- if (hasFilterTableFeatureProps(filterTableFeature)) {
80
- const { table } = filterTableFeature.ComponentProps.tableSchema;
81
- const key = `${table.module} Tables`;
82
- if (!acc[key]) {
83
- acc[key] = [];
84
- }
85
- return {
86
- ...acc,
87
- [key]: acc[key].concat(filterTableFeature)
88
- };
89
- } else {
90
- return acc;
91
- }
92
- }, {}),
93
- [tableFeatures]
94
- );
95
- const getFullWidth = useCallback(
96
- (tabIndex, expanded) => {
97
- if (tabIndex === 0) {
98
- return expanded ? sizeExpanded : sizeCollapsed;
99
- } else {
100
- return expanded ? sizeExpanded + sizeContent : sizeCollapsed + sizeContent;
101
- }
102
- },
103
- [sizeCollapsed, sizeContent, sizeExpanded]
104
- );
105
- const handleTabSelection = useCallback(
106
- (activeTabIndex) => {
107
- const { activeTabIndex: currentIndex, expanded } = navState;
108
- const newState = { activeTabIndex, expanded };
109
- setNavState(newState);
110
- if (activeTabIndex === 0 || currentIndex === 0) {
111
- const width = getFullWidth(activeTabIndex, expanded);
112
- dispatch({
113
- type: "layout-resize",
114
- path: "#vuu-side-panel",
115
- size: width
116
- });
117
- }
118
- onActiveChange?.(activeTabIndex);
119
- },
120
- [dispatch, getFullWidth, navState, onActiveChange]
121
- );
122
- const displayStatus = getDisplayStatus(
123
- navState.activeTabIndex,
124
- navState.expanded
125
- );
126
- const toggleExpanded = useCallback(() => {
127
- const { activeTabIndex, expanded } = navState;
128
- const primaryMenuExpanded = !expanded;
129
- const newState = { activeTabIndex, expanded: primaryMenuExpanded };
130
- setNavState(newState);
131
- dispatch({
132
- type: "layout-resize",
133
- path: "#vuu-side-panel",
134
- size: getFullWidth(activeTabIndex, primaryMenuExpanded)
135
- });
136
- onTogglePrimaryMenu?.(primaryMenuExpanded);
137
- }, [dispatch, getFullWidth, navState, onTogglePrimaryMenu]);
138
- const style = {
139
- ...styleProp,
140
- "--nav-menu-collapsed-width": `${sizeCollapsed}px`,
141
- "--nav-menu-expanded-width": `${sizeExpanded}px`,
142
- "--nav-menu-content-width": `${sizeContent}px`
143
- };
144
- return /* @__PURE__ */ jsxs(
145
- "div",
146
- {
147
- ...htmlAttributes,
148
- className: cx(classBase, `${classBase}-${displayStatus}`),
149
- style,
150
- children: [
151
- /* @__PURE__ */ jsxs("div", { className: cx(`${classBase}-menu-primary`), "data-mode": "dark", children: [
152
- /* @__PURE__ */ jsx("div", { className: "vuuLeftNav-logo", children: /* @__PURE__ */ jsx(VuuLogo, {}) }),
153
- /* @__PURE__ */ jsx("div", { className: `${classBase}-main`, children: /* @__PURE__ */ jsxs(
154
- Tabstrip,
155
- {
156
- activeTabIndex: navState.activeTabIndex,
157
- animateSelectionThumb: false,
158
- className: `${classBase}-Tabstrip`,
159
- onActiveChange: handleTabSelection,
160
- orientation: "vertical",
161
- children: [
162
- /* @__PURE__ */ jsx(Tab, { "data-icon": "demo", label: "DEMO" }),
163
- /* @__PURE__ */ jsx(Tab, { "data-icon": "features", label: "VUU FEATURES" }),
164
- /* @__PURE__ */ jsx(Tab, { "data-icon": "tables", label: "VUU TABLES" }),
165
- /* @__PURE__ */ jsx(Tab, { "data-icon": "layouts", label: "MY LAYOUTS" })
166
- ]
167
- }
168
- ) }),
169
- /* @__PURE__ */ jsx("div", { className: "vuuLeftNav-buttonBar", children: /* @__PURE__ */ jsx(
170
- "button",
171
- {
172
- className: cx("vuuLeftNav-toggleButton", {
173
- "vuuLeftNav-toggleButton-open": displayStatus.startsWith("menu-full"),
174
- "vuuLeftNav-toggleButton-closed": displayStatus.startsWith("menu-icons")
175
- }),
176
- "data-icon": displayStatus.startsWith("menu-full") ? "chevron-left" : "chevron-right",
177
- onClick: toggleExpanded
178
- }
179
- ) })
180
- ] }),
181
- /* @__PURE__ */ jsxs(
182
- Stack,
183
- {
184
- active: navState.activeTabIndex - 1,
185
- className: `${classBase}-menu-secondary`,
186
- showTabs: false,
187
- children: [
188
- /* @__PURE__ */ jsx(FeatureList, { features: dynamicFeatures, title: "VUU FEATURES" }),
189
- /* @__PURE__ */ jsx(FeatureList, { features: tableFeaturesByGroup, title: "VUU TABLES" }),
190
- /* @__PURE__ */ jsx(LayoutList, { title: "MY LAYOUTS" })
191
- ]
192
- }
193
- )
194
- ]
195
- }
196
- );
197
- };
198
-
199
- export { LeftNav };
200
- //# sourceMappingURL=LeftNav.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"LeftNav.js","sources":["../../../../packages/vuu-shell/src/left-nav/LeftNav.tsx"],"sourcesContent":["import { VuuLogo } from \"@vuu-ui/vuu-icons\";\nimport {\n LayoutResizeAction,\n Stack,\n useLayoutProviderDispatch,\n} from \"@vuu-ui/vuu-layout\";\nimport { Tab, Tabstrip } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n DynamicFeatureProps,\n FilterTableFeatureProps,\n hasFilterTableFeatureProps,\n} from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n CSSProperties,\n HTMLAttributes,\n useCallback,\n useMemo,\n useState,\n} from \"react\";\nimport { FeatureList, GroupedFeatureProps } from \"../feature-list\";\nimport { LayoutList } from \"../workspace-management\";\n\nimport leftNavCss from \"./LeftNav.css\";\nimport { useFeatures } from \"../feature-and-layout-provider\";\n\nconst classBase = \"vuuLeftNav\";\n\nexport type NavDisplayStatus =\n | \"menu-full\"\n | \"menu-icons\"\n | \"menu-full-content\"\n | \"menu-icons-content\";\n\nconst getDisplayStatus = (\n activeTabIndex: number,\n expanded: boolean,\n): NavDisplayStatus => {\n if (activeTabIndex === 0) {\n return expanded ? \"menu-full\" : \"menu-icons\";\n } else {\n return expanded ? \"menu-full-content\" : \"menu-icons-content\";\n }\n};\n\nexport type NavDisplayStatusHandler = (\n navDisplayStatus: NavDisplayStatus,\n) => void;\nexport interface LeftNavProps extends HTMLAttributes<HTMLDivElement> {\n \"data-path\"?: string;\n defaultActiveTabIndex?: number;\n defaultExpanded?: boolean;\n onActiveChange?: (activeTabIndex: number) => void;\n onTogglePrimaryMenu?: (expanded: boolean) => void;\n sizeCollapsed?: number;\n sizeContent?: number;\n sizeExpanded?: number;\n}\n\ntype NavState = {\n activeTabIndex: number;\n expanded: boolean;\n};\n\nconst byModule = (\n f1: DynamicFeatureProps<FilterTableFeatureProps>,\n f2: DynamicFeatureProps<FilterTableFeatureProps>,\n) => {\n const t1 = f1.ComponentProps?.tableSchema.table;\n const t2 = f2.ComponentProps?.tableSchema.table;\n if (t1 && t2) {\n const m1 = t1.module.toLowerCase();\n const m2 = t2.module.toLowerCase();\n if (m1 < m2) {\n return -1;\n } else if (m1 > m2) {\n return 1;\n } else if (t1.table < t2.table) {\n return -1;\n } else if (t1.table > t2.table) {\n return 1;\n } else {\n return 0;\n }\n } else {\n throw Error(\"Invalid tableFeature\");\n }\n};\n\nexport const LeftNav = (props: LeftNavProps) => {\n const dispatch = useLayoutProviderDispatch();\n const {\n \"data-path\": path,\n defaultExpanded = true,\n defaultActiveTabIndex = 0,\n onActiveChange,\n onTogglePrimaryMenu,\n sizeCollapsed = 80,\n sizeContent = 300,\n sizeExpanded = 240,\n style: styleProp,\n ...htmlAttributes\n } = props;\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-left-nav\",\n css: leftNavCss,\n window: targetWindow,\n });\n\n const { dynamicFeatures = [], tableFeatures = [] } = useFeatures();\n\n const [navState, setNavState] = useState<NavState>({\n activeTabIndex: defaultActiveTabIndex,\n expanded: defaultExpanded,\n });\n\n const tableFeaturesByGroup = useMemo(\n () =>\n tableFeatures\n ?.sort(byModule)\n .reduce<\n GroupedFeatureProps<FilterTableFeatureProps>\n >((acc, filterTableFeature) => {\n if (hasFilterTableFeatureProps(filterTableFeature)) {\n const { table } = filterTableFeature.ComponentProps.tableSchema;\n const key = `${table.module} Tables`;\n if (!acc[key]) {\n acc[key] = [];\n }\n return {\n ...acc,\n [key]: acc[key].concat(filterTableFeature),\n };\n } else {\n return acc;\n // throw Error(\"LeftNaV invalid tableFeature\");\n }\n }, {}),\n [tableFeatures],\n );\n\n const getFullWidth = useCallback(\n (tabIndex: number, expanded: boolean): number => {\n if (tabIndex === 0) {\n return expanded ? sizeExpanded : sizeCollapsed;\n } else {\n return expanded\n ? sizeExpanded + sizeContent\n : sizeCollapsed + sizeContent;\n }\n },\n [sizeCollapsed, sizeContent, sizeExpanded],\n );\n\n const handleTabSelection = useCallback(\n (activeTabIndex: number) => {\n const { activeTabIndex: currentIndex, expanded } = navState;\n const newState = { activeTabIndex, expanded };\n setNavState(newState);\n if (activeTabIndex === 0 || currentIndex === 0) {\n const width = getFullWidth(activeTabIndex, expanded);\n dispatch({\n type: \"layout-resize\",\n path: \"#vuu-side-panel\",\n size: width,\n } as LayoutResizeAction);\n }\n onActiveChange?.(activeTabIndex);\n },\n [dispatch, getFullWidth, navState, onActiveChange],\n );\n\n const displayStatus = getDisplayStatus(\n navState.activeTabIndex,\n navState.expanded,\n );\n\n const toggleExpanded = useCallback(() => {\n const { activeTabIndex, expanded } = navState;\n const primaryMenuExpanded = !expanded;\n const newState = { activeTabIndex, expanded: primaryMenuExpanded };\n setNavState(newState);\n dispatch({\n type: \"layout-resize\",\n path: \"#vuu-side-panel\",\n size: getFullWidth(activeTabIndex, primaryMenuExpanded),\n } as LayoutResizeAction);\n onTogglePrimaryMenu?.(primaryMenuExpanded);\n }, [dispatch, getFullWidth, navState, onTogglePrimaryMenu]);\n\n const style = {\n ...styleProp,\n \"--nav-menu-collapsed-width\": `${sizeCollapsed}px`,\n \"--nav-menu-expanded-width\": `${sizeExpanded}px`,\n \"--nav-menu-content-width\": `${sizeContent}px`,\n } as CSSProperties;\n\n return (\n <div\n {...htmlAttributes}\n className={cx(classBase, `${classBase}-${displayStatus}`)}\n style={style}\n >\n <div className={cx(`${classBase}-menu-primary`)} data-mode=\"dark\">\n <div className=\"vuuLeftNav-logo\">\n <VuuLogo />\n </div>\n <div className={`${classBase}-main`}>\n <Tabstrip\n activeTabIndex={navState.activeTabIndex}\n animateSelectionThumb={false}\n className={`${classBase}-Tabstrip`}\n onActiveChange={handleTabSelection}\n orientation=\"vertical\"\n >\n <Tab data-icon=\"demo\" label=\"DEMO\"></Tab>\n <Tab data-icon=\"features\" label=\"VUU FEATURES\"></Tab>\n <Tab data-icon=\"tables\" label=\"VUU TABLES\"></Tab>\n <Tab data-icon=\"layouts\" label=\"MY LAYOUTS\"></Tab>\n </Tabstrip>\n </div>\n <div className=\"vuuLeftNav-buttonBar\">\n <button\n className={cx(\"vuuLeftNav-toggleButton\", {\n \"vuuLeftNav-toggleButton-open\":\n displayStatus.startsWith(\"menu-full\"),\n \"vuuLeftNav-toggleButton-closed\":\n displayStatus.startsWith(\"menu-icons\"),\n })}\n data-icon={\n displayStatus.startsWith(\"menu-full\")\n ? \"chevron-left\"\n : \"chevron-right\"\n }\n onClick={toggleExpanded}\n />\n </div>\n </div>\n <Stack\n active={navState.activeTabIndex - 1}\n className={`${classBase}-menu-secondary`}\n showTabs={false}\n >\n <FeatureList features={dynamicFeatures} title=\"VUU FEATURES\" />\n <FeatureList features={tableFeaturesByGroup} title=\"VUU TABLES\" />\n <LayoutList title=\"MY LAYOUTS\" />\n </Stack>\n </div>\n );\n};\n"],"names":[],"mappings":"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"}
@@ -1,4 +0,0 @@
1
- var loginPanelCss = ".vuuLoginPanel {\n --saltInput-paddingLeft: 8px;\n --login-width: 856px;\n --login-height: 550px;\n --hwTextInput-border: solid 1px #ccc;\n --hwTextInput-height: 28px;\n --hwTextInput-padding: 0 12px;\n --hwTextInput-width: 100%;\n --login-row-height: 60px;\n border-radius: 16px;\n box-shadow: 0px 24px 44px 0px rgba(0, 0, 0, 0.25);\n display: flex;\n height: var(--login-height);\n margin: 0 auto;\n width: var(--login-width);\n}\n\n.vuuLoginPanel .saltInput-primary {\n--saltInput-height: 36px;\n}\n\n.vuuLoginPanel-title {\n justify-content: center;\nfont-size: 28px;\nfont-weight: 400;\ndisplay: flex;\n}\n\n\n.vuuLoginPanel-branding {\n align-items: center;\n background-color: var(--vuu-color-deep-purple);\n border-radius: 16px 0 0 16px;\n display: flex;\n flex: 0 0 368px;\n flex-direction: column;\n gap: 40px;\n justify-content: center;\n padding: 40px 100px;\n}\n\n.vuuLoginPanel-form {\n background-color: white;\n border-radius: 0 16px 16px 0px;\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n gap: 32px;\n justify-content: center;\n padding: 0 40px;\n}\n\n.vuuLoginPanel-password {\n --vuu-icon-size: 16px;\n}\n\n.vuuLoginPanel-appName {\n color: white;\n font-size: 18px;\n font-weight: 700;\n text-transform: uppercase;\n}\n\n.vuuLoginPanel-login {\n --saltButton-height: 36px;\n --saltButton-borderRadius: 6px;\n width: 100%\n}\n\n\n";
2
-
3
- export { loginPanelCss as default };
4
- //# sourceMappingURL=LoginPanel.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"LoginPanel.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
@@ -1,108 +0,0 @@
1
- import { jsxs, jsx } from 'react/jsx-runtime';
2
- import { VuuInput } from '@vuu-ui/vuu-ui-controls';
3
- import { FormField, FormFieldLabel, Button } from '@salt-ds/core';
4
- import { useComponentCssInjection } from '@salt-ds/styles';
5
- import { useWindow } from '@salt-ds/window';
6
- import cx from 'clsx';
7
- import { useState, useRef, useCallback, useEffect } from 'react';
8
- import { VuuLogo } from './VuuLogo.js';
9
- import loginPanelCss from './LoginPanel.css.js';
10
-
11
- const classBase = "vuuLoginPanel";
12
- const LoginPanel = ({
13
- appName = "Demo App",
14
- className,
15
- onSubmit,
16
- ...htmlAttributes
17
- }) => {
18
- const targetWindow = useWindow();
19
- useComponentCssInjection({
20
- testId: "vuu-login-panel",
21
- css: loginPanelCss,
22
- window: targetWindow
23
- });
24
- const [username, setUserName] = useState("");
25
- const [password, setPassword] = useState("");
26
- const inputRef = useRef(null);
27
- const login = () => {
28
- onSubmit(username, password);
29
- };
30
- const handleUsername = (evt) => {
31
- setUserName(evt.target.value);
32
- };
33
- const handlePassword = (evt) => {
34
- setPassword(evt.target.value);
35
- };
36
- const handleCommitName = useCallback(() => {
37
- if (password) {
38
- onSubmit(username, password);
39
- }
40
- }, [onSubmit, password, username]);
41
- const handleCommitPassword = useCallback(() => {
42
- if (username) {
43
- onSubmit(username, password);
44
- }
45
- }, [onSubmit, password, username]);
46
- const dataIsValid = username.trim() !== "" && password.trim() !== "";
47
- useEffect(() => {
48
- console.log(`inputRef`, {
49
- input: inputRef.current
50
- });
51
- inputRef.current?.focus();
52
- }, []);
53
- return /* @__PURE__ */ jsxs("div", { ...htmlAttributes, className: cx(classBase, className), children: [
54
- /* @__PURE__ */ jsxs("div", { className: `${classBase}-branding`, children: [
55
- /* @__PURE__ */ jsx(VuuLogo, {}),
56
- /* @__PURE__ */ jsx("div", { className: `${classBase}-appName`, children: appName })
57
- ] }),
58
- /* @__PURE__ */ jsxs("div", { className: `${classBase}-form`, children: [
59
- /* @__PURE__ */ jsx("div", { className: `${classBase}-title`, children: "Welcome Back" }),
60
- /* @__PURE__ */ jsxs(FormField, { children: [
61
- /* @__PURE__ */ jsx(FormFieldLabel, { children: "Username" }),
62
- /* @__PURE__ */ jsx(
63
- VuuInput,
64
- {
65
- bordered: true,
66
- value: username,
67
- id: "text-username",
68
- inputRef,
69
- onChange: handleUsername,
70
- onCommit: handleCommitName
71
- }
72
- )
73
- ] }),
74
- /* @__PURE__ */ jsxs(FormField, { children: [
75
- /* @__PURE__ */ jsx(FormFieldLabel, { children: "Password" }),
76
- /* @__PURE__ */ jsx(
77
- VuuInput,
78
- {
79
- bordered: true,
80
- className: `${classBase}-password`,
81
- inputProps: {
82
- type: "password"
83
- },
84
- value: password,
85
- id: "text-password",
86
- onChange: handlePassword,
87
- onCommit: handleCommitPassword,
88
- endAdornment: /* @__PURE__ */ jsx("span", { "data-icon": "eye", style: { cursor: "pointer" } })
89
- }
90
- )
91
- ] }),
92
- /* @__PURE__ */ jsx(
93
- Button,
94
- {
95
- appearance: "solid",
96
- className: `${classBase}-login`,
97
- disabled: !dataIsValid,
98
- onClick: login,
99
- sentiment: "accented",
100
- children: "Login"
101
- }
102
- )
103
- ] })
104
- ] });
105
- };
106
-
107
- export { LoginPanel };
108
- //# sourceMappingURL=LoginPanel.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"LoginPanel.js","sources":["../../../../packages/vuu-shell/src/login/LoginPanel.tsx"],"sourcesContent":["import { VuuInput } from \"@vuu-ui/vuu-ui-controls\";\nimport { Button, FormField, FormFieldLabel } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n ChangeEvent,\n HTMLAttributes,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport { VuuLogo } from \"./VuuLogo\";\n\nimport loginPanelCss from \"./LoginPanel.css\";\n\nconst classBase = \"vuuLoginPanel\";\n\nexport interface LoginPanelProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"onSubmit\"> {\n appName?: string;\n onSubmit: (username: string, password: string) => void;\n}\n\nexport const LoginPanel = ({\n appName = \"Demo App\",\n className,\n onSubmit,\n ...htmlAttributes\n}: LoginPanelProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-login-panel\",\n css: loginPanelCss,\n window: targetWindow,\n });\n\n const [username, setUserName] = useState(\"\");\n const [password, setPassword] = useState(\"\");\n const inputRef = useRef<HTMLInputElement>(null);\n\n const login = () => {\n onSubmit(username, password);\n };\n\n const handleUsername = (evt: ChangeEvent<HTMLInputElement>) => {\n setUserName(evt.target.value);\n };\n\n const handlePassword = (evt: ChangeEvent<HTMLInputElement>) => {\n setPassword(evt.target.value);\n };\n\n const handleCommitName = useCallback(() => {\n if (password) {\n onSubmit(username, password);\n }\n }, [onSubmit, password, username]);\n\n const handleCommitPassword = useCallback(() => {\n if (username) {\n onSubmit(username, password);\n }\n }, [onSubmit, password, username]);\n\n const dataIsValid = username.trim() !== \"\" && password.trim() !== \"\";\n\n useEffect(() => {\n console.log(`inputRef`, {\n input: inputRef.current,\n });\n inputRef.current?.focus();\n }, []);\n\n return (\n <div {...htmlAttributes} className={cx(classBase, className)}>\n <div className={`${classBase}-branding`}>\n <VuuLogo />\n <div className={`${classBase}-appName`}>{appName}</div>\n </div>\n <div className={`${classBase}-form`}>\n <div className={`${classBase}-title`}>Welcome Back</div>\n <FormField>\n <FormFieldLabel>Username</FormFieldLabel>\n <VuuInput\n bordered\n value={username}\n id=\"text-username\"\n inputRef={inputRef}\n onChange={handleUsername}\n onCommit={handleCommitName}\n />\n </FormField>\n\n <FormField>\n <FormFieldLabel>Password</FormFieldLabel>\n <VuuInput\n bordered\n className={`${classBase}-password`}\n inputProps={{\n type: \"password\",\n }}\n value={password}\n id=\"text-password\"\n onChange={handlePassword}\n onCommit={handleCommitPassword}\n endAdornment={\n <span data-icon=\"eye\" style={{ cursor: \"pointer\" }} />\n }\n />\n </FormField>\n\n <Button\n appearance=\"solid\"\n className={`${classBase}-login`}\n disabled={!dataIsValid}\n onClick={login}\n sentiment=\"accented\"\n >\n Login\n </Button>\n </div>\n </div>\n );\n};\n"],"names":[],"mappings":"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"}