@vuu-ui/vuu-shell 0.13.7 → 0.13.8
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.
- package/cjs/index.js +2826 -77
- package/cjs/index.js.map +1 -1
- package/esm/index.js +2780 -27
- package/esm/index.js.map +1 -1
- package/package.json +13 -13
- package/cjs/ShellContextProvider.js +0 -25
- package/cjs/ShellContextProvider.js.map +0 -1
- package/cjs/app-header/AppHeader.css.js +0 -6
- package/cjs/app-header/AppHeader.css.js.map +0 -1
- package/cjs/app-header/AppHeader.js +0 -85
- package/cjs/app-header/AppHeader.js.map +0 -1
- package/cjs/app-status-bar/AppStatusBar.css.js +0 -6
- package/cjs/app-status-bar/AppStatusBar.css.js.map +0 -1
- package/cjs/app-status-bar/AppStatusBar.js +0 -47
- package/cjs/app-status-bar/AppStatusBar.js.map +0 -1
- package/cjs/application-provider/ApplicationContext.js +0 -18
- package/cjs/application-provider/ApplicationContext.js.map +0 -1
- package/cjs/application-provider/ApplicationProvider.js +0 -104
- package/cjs/application-provider/ApplicationProvider.js.map +0 -1
- package/cjs/connection-status/ConnectionRetryCountdown.js +0 -36
- package/cjs/connection-status/ConnectionRetryCountdown.js.map +0 -1
- package/cjs/connection-status/ConnectionStateDisplay.css.js +0 -6
- package/cjs/connection-status/ConnectionStateDisplay.css.js.map +0 -1
- package/cjs/connection-status/ConnectionStateDisplay.js +0 -65
- package/cjs/connection-status/ConnectionStateDisplay.js.map +0 -1
- package/cjs/connection-status/ConnectionStatusIndicator.css.js +0 -6
- package/cjs/connection-status/ConnectionStatusIndicator.css.js.map +0 -1
- package/cjs/connection-status/ConnectionStatusIndicator.js +0 -81
- package/cjs/connection-status/ConnectionStatusIndicator.js.map +0 -1
- package/cjs/feature/Feature.js +0 -55
- package/cjs/feature/Feature.js.map +0 -1
- package/cjs/feature/FeatureErrorBoundary.js +0 -30
- package/cjs/feature/FeatureErrorBoundary.js.map +0 -1
- package/cjs/feature/Loader.js +0 -8
- package/cjs/feature/Loader.js.map +0 -1
- package/cjs/feature-and-layout-provider/FeatureAndLayoutProvider.js +0 -60
- package/cjs/feature-and-layout-provider/FeatureAndLayoutProvider.js.map +0 -1
- package/cjs/feature-list/FeatureList.css.js +0 -6
- package/cjs/feature-list/FeatureList.css.js.map +0 -1
- package/cjs/feature-list/FeatureList.js +0 -97
- package/cjs/feature-list/FeatureList.js.map +0 -1
- package/cjs/left-nav/LeftNav.css.js +0 -6
- package/cjs/left-nav/LeftNav.css.js.map +0 -1
- package/cjs/left-nav/LeftNav.js +0 -199
- package/cjs/left-nav/LeftNav.js.map +0 -1
- package/cjs/login/LoginPanel.css.js +0 -6
- package/cjs/login/LoginPanel.css.js.map +0 -1
- package/cjs/login/LoginPanel.js +0 -108
- package/cjs/login/LoginPanel.js.map +0 -1
- package/cjs/login/VuuLogo.js +0 -134
- package/cjs/login/VuuLogo.js.map +0 -1
- package/cjs/login/login-utils.js +0 -31
- package/cjs/login/login-utils.js.map +0 -1
- package/cjs/persistence-manager/LocalPersistenceManager.js +0 -197
- package/cjs/persistence-manager/LocalPersistenceManager.js.map +0 -1
- package/cjs/persistence-manager/PersistenceProvider.js +0 -21
- package/cjs/persistence-manager/PersistenceProvider.js.map +0 -1
- package/cjs/persistence-manager/RemotePersistenceManager.js +0 -175
- package/cjs/persistence-manager/RemotePersistenceManager.js.map +0 -1
- package/cjs/persistence-manager/StaticPersistenceManager.js +0 -71
- package/cjs/persistence-manager/StaticPersistenceManager.js.map +0 -1
- package/cjs/shell-layout-templates/context-panel/ContextPanel.css.js +0 -6
- package/cjs/shell-layout-templates/context-panel/ContextPanel.css.js.map +0 -1
- package/cjs/shell-layout-templates/context-panel/ContextPanel.js +0 -94
- package/cjs/shell-layout-templates/context-panel/ContextPanel.js.map +0 -1
- package/cjs/shell-layout-templates/full-height-left-panel/useFullHeightLeftPanel.js +0 -53
- package/cjs/shell-layout-templates/full-height-left-panel/useFullHeightLeftPanel.js.map +0 -1
- package/cjs/shell-layout-templates/inlay-left-panel/useInlayLeftPanel.js +0 -83
- package/cjs/shell-layout-templates/inlay-left-panel/useInlayLeftPanel.js.map +0 -1
- package/cjs/shell-layout-templates/left-main-tabs/useLeftMainTabs.js +0 -46
- package/cjs/shell-layout-templates/left-main-tabs/useLeftMainTabs.js.map +0 -1
- package/cjs/shell-layout-templates/side-panel/SidePanel.css.js +0 -6
- package/cjs/shell-layout-templates/side-panel/SidePanel.css.js.map +0 -1
- package/cjs/shell-layout-templates/side-panel/SidePanel.js +0 -36
- package/cjs/shell-layout-templates/side-panel/SidePanel.js.map +0 -1
- package/cjs/shell-layout-templates/simple-content-pane/useSimpleContentPane.js +0 -48
- package/cjs/shell-layout-templates/simple-content-pane/useSimpleContentPane.js.map +0 -1
- package/cjs/shell-layout-templates/useShellLayout.js +0 -23
- package/cjs/shell-layout-templates/useShellLayout.js.map +0 -1
- package/cjs/shell.css.js +0 -6
- package/cjs/shell.css.js.map +0 -1
- package/cjs/shell.js +0 -161
- package/cjs/shell.js.map +0 -1
- package/cjs/theme-switch/ThemeSwitch.css.js +0 -6
- package/cjs/theme-switch/ThemeSwitch.css.js.map +0 -1
- package/cjs/theme-switch/ThemeSwitch.js +0 -56
- package/cjs/theme-switch/ThemeSwitch.js.map +0 -1
- package/cjs/user-settings/SettingsForm.css.js +0 -6
- package/cjs/user-settings/SettingsForm.css.js.map +0 -1
- package/cjs/user-settings/SettingsForm.js +0 -168
- package/cjs/user-settings/SettingsForm.js.map +0 -1
- package/cjs/user-settings/UserSettingsPanel.css.js +0 -6
- package/cjs/user-settings/UserSettingsPanel.css.js.map +0 -1
- package/cjs/user-settings/UserSettingsPanel.js +0 -42
- package/cjs/user-settings/UserSettingsPanel.js.map +0 -1
- package/cjs/workspace-management/LayoutList.css.js +0 -6
- package/cjs/workspace-management/LayoutList.css.js.map +0 -1
- package/cjs/workspace-management/LayoutList.js +0 -116
- package/cjs/workspace-management/LayoutList.js.map +0 -1
- package/cjs/workspace-management/LayoutTile.css.js +0 -6
- package/cjs/workspace-management/LayoutTile.css.js.map +0 -1
- package/cjs/workspace-management/LayoutTile.js +0 -41
- package/cjs/workspace-management/LayoutTile.js.map +0 -1
- package/cjs/workspace-management/SaveLayoutPanel.css.js +0 -6
- package/cjs/workspace-management/SaveLayoutPanel.css.js.map +0 -1
- package/cjs/workspace-management/SaveLayoutPanel.js +0 -129
- package/cjs/workspace-management/SaveLayoutPanel.js.map +0 -1
- package/cjs/workspace-management/WorkspaceProvider.js +0 -264
- package/cjs/workspace-management/WorkspaceProvider.js.map +0 -1
- package/cjs/workspace-management/defaultWorkspaceJSON.js +0 -101
- package/cjs/workspace-management/defaultWorkspaceJSON.js.map +0 -1
- package/cjs/workspace-management/screenshot-utils.js +0 -25
- package/cjs/workspace-management/screenshot-utils.js.map +0 -1
- package/cjs/workspace-management/useWorkspaceContextMenuItems.js +0 -72
- package/cjs/workspace-management/useWorkspaceContextMenuItems.js.map +0 -1
- package/esm/ShellContextProvider.js +0 -23
- package/esm/ShellContextProvider.js.map +0 -1
- package/esm/app-header/AppHeader.css.js +0 -4
- package/esm/app-header/AppHeader.css.js.map +0 -1
- package/esm/app-header/AppHeader.js +0 -83
- package/esm/app-header/AppHeader.js.map +0 -1
- package/esm/app-status-bar/AppStatusBar.css.js +0 -4
- package/esm/app-status-bar/AppStatusBar.css.js.map +0 -1
- package/esm/app-status-bar/AppStatusBar.js +0 -45
- package/esm/app-status-bar/AppStatusBar.js.map +0 -1
- package/esm/application-provider/ApplicationContext.js +0 -16
- package/esm/application-provider/ApplicationContext.js.map +0 -1
- package/esm/application-provider/ApplicationProvider.js +0 -98
- package/esm/application-provider/ApplicationProvider.js.map +0 -1
- package/esm/connection-status/ConnectionRetryCountdown.js +0 -34
- package/esm/connection-status/ConnectionRetryCountdown.js.map +0 -1
- package/esm/connection-status/ConnectionStateDisplay.css.js +0 -4
- package/esm/connection-status/ConnectionStateDisplay.css.js.map +0 -1
- package/esm/connection-status/ConnectionStateDisplay.js +0 -63
- package/esm/connection-status/ConnectionStateDisplay.js.map +0 -1
- package/esm/connection-status/ConnectionStatusIndicator.css.js +0 -4
- package/esm/connection-status/ConnectionStatusIndicator.css.js.map +0 -1
- package/esm/connection-status/ConnectionStatusIndicator.js +0 -79
- package/esm/connection-status/ConnectionStatusIndicator.js.map +0 -1
- package/esm/feature/Feature.js +0 -53
- package/esm/feature/Feature.js.map +0 -1
- package/esm/feature/FeatureErrorBoundary.js +0 -28
- package/esm/feature/FeatureErrorBoundary.js.map +0 -1
- package/esm/feature/Loader.js +0 -6
- package/esm/feature/Loader.js.map +0 -1
- package/esm/feature-and-layout-provider/FeatureAndLayoutProvider.js +0 -56
- package/esm/feature-and-layout-provider/FeatureAndLayoutProvider.js.map +0 -1
- package/esm/feature-list/FeatureList.css.js +0 -4
- package/esm/feature-list/FeatureList.css.js.map +0 -1
- package/esm/feature-list/FeatureList.js +0 -95
- package/esm/feature-list/FeatureList.js.map +0 -1
- package/esm/left-nav/LeftNav.css.js +0 -4
- package/esm/left-nav/LeftNav.css.js.map +0 -1
- package/esm/left-nav/LeftNav.js +0 -197
- package/esm/left-nav/LeftNav.js.map +0 -1
- package/esm/login/LoginPanel.css.js +0 -4
- package/esm/login/LoginPanel.css.js.map +0 -1
- package/esm/login/LoginPanel.js +0 -106
- package/esm/login/LoginPanel.js.map +0 -1
- package/esm/login/VuuLogo.js +0 -132
- package/esm/login/VuuLogo.js.map +0 -1
- package/esm/login/login-utils.js +0 -26
- package/esm/login/login-utils.js.map +0 -1
- package/esm/persistence-manager/LocalPersistenceManager.js +0 -195
- package/esm/persistence-manager/LocalPersistenceManager.js.map +0 -1
- package/esm/persistence-manager/PersistenceProvider.js +0 -17
- package/esm/persistence-manager/PersistenceProvider.js.map +0 -1
- package/esm/persistence-manager/RemotePersistenceManager.js +0 -173
- package/esm/persistence-manager/RemotePersistenceManager.js.map +0 -1
- package/esm/persistence-manager/StaticPersistenceManager.js +0 -69
- package/esm/persistence-manager/StaticPersistenceManager.js.map +0 -1
- package/esm/shell-layout-templates/context-panel/ContextPanel.css.js +0 -4
- package/esm/shell-layout-templates/context-panel/ContextPanel.css.js.map +0 -1
- package/esm/shell-layout-templates/context-panel/ContextPanel.js +0 -92
- package/esm/shell-layout-templates/context-panel/ContextPanel.js.map +0 -1
- package/esm/shell-layout-templates/full-height-left-panel/useFullHeightLeftPanel.js +0 -51
- package/esm/shell-layout-templates/full-height-left-panel/useFullHeightLeftPanel.js.map +0 -1
- package/esm/shell-layout-templates/inlay-left-panel/useInlayLeftPanel.js +0 -81
- package/esm/shell-layout-templates/inlay-left-panel/useInlayLeftPanel.js.map +0 -1
- package/esm/shell-layout-templates/left-main-tabs/useLeftMainTabs.js +0 -44
- package/esm/shell-layout-templates/left-main-tabs/useLeftMainTabs.js.map +0 -1
- package/esm/shell-layout-templates/side-panel/SidePanel.css.js +0 -4
- package/esm/shell-layout-templates/side-panel/SidePanel.css.js.map +0 -1
- package/esm/shell-layout-templates/side-panel/SidePanel.js +0 -34
- package/esm/shell-layout-templates/side-panel/SidePanel.js.map +0 -1
- package/esm/shell-layout-templates/simple-content-pane/useSimpleContentPane.js +0 -46
- package/esm/shell-layout-templates/simple-content-pane/useSimpleContentPane.js.map +0 -1
- package/esm/shell-layout-templates/useShellLayout.js +0 -21
- package/esm/shell-layout-templates/useShellLayout.js.map +0 -1
- package/esm/shell.css.js +0 -4
- package/esm/shell.css.js.map +0 -1
- package/esm/shell.js +0 -159
- package/esm/shell.js.map +0 -1
- package/esm/theme-switch/ThemeSwitch.css.js +0 -4
- package/esm/theme-switch/ThemeSwitch.css.js.map +0 -1
- package/esm/theme-switch/ThemeSwitch.js +0 -54
- package/esm/theme-switch/ThemeSwitch.js.map +0 -1
- package/esm/user-settings/SettingsForm.css.js +0 -4
- package/esm/user-settings/SettingsForm.css.js.map +0 -1
- package/esm/user-settings/SettingsForm.js +0 -162
- package/esm/user-settings/SettingsForm.js.map +0 -1
- package/esm/user-settings/UserSettingsPanel.css.js +0 -4
- package/esm/user-settings/UserSettingsPanel.css.js.map +0 -1
- package/esm/user-settings/UserSettingsPanel.js +0 -40
- package/esm/user-settings/UserSettingsPanel.js.map +0 -1
- package/esm/workspace-management/LayoutList.css.js +0 -4
- package/esm/workspace-management/LayoutList.css.js.map +0 -1
- package/esm/workspace-management/LayoutList.js +0 -114
- package/esm/workspace-management/LayoutList.js.map +0 -1
- package/esm/workspace-management/LayoutTile.css.js +0 -4
- package/esm/workspace-management/LayoutTile.css.js.map +0 -1
- package/esm/workspace-management/LayoutTile.js +0 -39
- package/esm/workspace-management/LayoutTile.js.map +0 -1
- package/esm/workspace-management/SaveLayoutPanel.css.js +0 -4
- package/esm/workspace-management/SaveLayoutPanel.css.js.map +0 -1
- package/esm/workspace-management/SaveLayoutPanel.js +0 -127
- package/esm/workspace-management/SaveLayoutPanel.js.map +0 -1
- package/esm/workspace-management/WorkspaceProvider.js +0 -261
- package/esm/workspace-management/WorkspaceProvider.js.map +0 -1
- package/esm/workspace-management/defaultWorkspaceJSON.js +0 -95
- package/esm/workspace-management/defaultWorkspaceJSON.js.map +0 -1
- package/esm/workspace-management/screenshot-utils.js +0 -23
- package/esm/workspace-management/screenshot-utils.js.map +0 -1
- package/esm/workspace-management/useWorkspaceContextMenuItems.js +0 -70
- package/esm/workspace-management/useWorkspaceContextMenuItems.js.map +0 -1
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var React = require('react');
|
|
5
|
-
|
|
6
|
-
class FeatureErrorBoundary extends React.Component {
|
|
7
|
-
constructor(props) {
|
|
8
|
-
super(props);
|
|
9
|
-
this.state = { errorMessage: null };
|
|
10
|
-
}
|
|
11
|
-
static getDerivedStateFromError(error) {
|
|
12
|
-
return { errorMessage: error.message };
|
|
13
|
-
}
|
|
14
|
-
componentDidCatch(error, errorInfo) {
|
|
15
|
-
console.log(`error creating component at ${this.props.url}`);
|
|
16
|
-
console.log(error, errorInfo);
|
|
17
|
-
}
|
|
18
|
-
render() {
|
|
19
|
-
if (this.state.errorMessage) {
|
|
20
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
21
|
-
/* @__PURE__ */ jsxRuntime.jsx("h1", { children: "An error occured while creating component." }),
|
|
22
|
-
/* @__PURE__ */ jsxRuntime.jsx("p", { children: this.state.errorMessage })
|
|
23
|
-
] });
|
|
24
|
-
}
|
|
25
|
-
return this.props.children;
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
exports.FeatureErrorBoundary = FeatureErrorBoundary;
|
|
30
|
-
//# sourceMappingURL=FeatureErrorBoundary.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"FeatureErrorBoundary.js","sources":["../../src/feature/FeatureErrorBoundary.tsx"],"sourcesContent":["import { DynamicFeatureProps } from \"@vuu-ui/vuu-utils\";\nimport React, { ErrorInfo, ReactNode } from \"react\";\n\nexport interface FeatureErrorBoundaryProps extends DynamicFeatureProps {\n children: ReactNode;\n}\n\nexport class FeatureErrorBoundary extends React.Component<\n FeatureErrorBoundaryProps,\n any\n> {\n constructor(props: FeatureErrorBoundaryProps) {\n super(props);\n this.state = { errorMessage: null };\n }\n\n static getDerivedStateFromError(error: Error) {\n // Update state so the next render will show the fallback UI.\n return { errorMessage: error.message };\n }\n\n componentDidCatch(error: Error, errorInfo: ErrorInfo) {\n // You can also log the error to an error reporting service\n console.log(`error creating component at ${this.props.url}`);\n console.log(error, errorInfo);\n }\n\n render() {\n if (this.state.errorMessage) {\n return (\n <>\n <h1>An error occured while creating component.</h1>\n <p>{this.state.errorMessage}</p>\n </>\n );\n }\n\n return this.props.children;\n }\n}\n"],"names":["jsxs","Fragment","jsx"],"mappings":";;;;;AAOa,MAAA,oBAAA,SAA6B,MAAM,SAG9C,CAAA;AAAA,EACA,YAAY,KAAkC,EAAA;AAC5C,IAAA,KAAA,CAAM,KAAK,CAAA;AACX,IAAK,IAAA,CAAA,KAAA,GAAQ,EAAE,YAAA,EAAc,IAAK,EAAA;AAAA;AACpC,EAEA,OAAO,yBAAyB,KAAc,EAAA;AAE5C,IAAO,OAAA,EAAE,YAAc,EAAA,KAAA,CAAM,OAAQ,EAAA;AAAA;AACvC,EAEA,iBAAA,CAAkB,OAAc,SAAsB,EAAA;AAEpD,IAAA,OAAA,CAAQ,GAAI,CAAA,CAAA,4BAAA,EAA+B,IAAK,CAAA,KAAA,CAAM,GAAG,CAAE,CAAA,CAAA;AAC3D,IAAQ,OAAA,CAAA,GAAA,CAAI,OAAO,SAAS,CAAA;AAAA;AAC9B,EAEA,MAAS,GAAA;AACP,IAAI,IAAA,IAAA,CAAK,MAAM,YAAc,EAAA;AAC3B,MAAA,uBAEIA,eAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAAC,QAAG,QAA0C,EAAA,4CAAA,EAAA,CAAA;AAAA,wBAC7CA,cAAA,CAAA,GAAA,EAAA,EAAG,QAAK,EAAA,IAAA,CAAA,KAAA,CAAM,YAAa,EAAA;AAAA,OAC9B,EAAA,CAAA;AAAA;AAIJ,IAAA,OAAO,KAAK,KAAM,CAAA,QAAA;AAAA;AAEtB;;;;"}
|
package/cjs/feature/Loader.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Loader.js","sources":["../../src/feature/Loader.tsx"],"sourcesContent":["// TODO\nexport const Loader = () => <div className=\"hwLoader\"></div>;\n"],"names":["jsx"],"mappings":";;;;AACO,MAAM,MAAS,GAAA,sBAAOA,cAAA,CAAA,KAAA,EAAA,EAAI,WAAU,UAAW,EAAA;;;;"}
|
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var vuuUtils = require('@vuu-ui/vuu-utils');
|
|
5
|
-
var React = require('react');
|
|
6
|
-
var vuuDataReact = require('@vuu-ui/vuu-data-react');
|
|
7
|
-
|
|
8
|
-
const NO_FEATURES = [];
|
|
9
|
-
const NO_STATICFEATURES = [];
|
|
10
|
-
const NO_SYSTEMLAYOUTS = [];
|
|
11
|
-
const NO_FEATURES_VUU = {
|
|
12
|
-
dynamicFeatures: NO_FEATURES,
|
|
13
|
-
tableFeatures: NO_FEATURES
|
|
14
|
-
};
|
|
15
|
-
const FeatureContext = React.createContext({
|
|
16
|
-
dynamicFeatures: NO_FEATURES,
|
|
17
|
-
tableFeatures: NO_FEATURES,
|
|
18
|
-
staticFeatures: NO_STATICFEATURES
|
|
19
|
-
});
|
|
20
|
-
const LayoutContext = React.createContext({
|
|
21
|
-
systemLayouts: NO_SYSTEMLAYOUTS
|
|
22
|
-
});
|
|
23
|
-
const FeatureAndLayoutProvider = ({
|
|
24
|
-
children,
|
|
25
|
-
dynamicFeatures: dynamicFeaturesProp = [],
|
|
26
|
-
staticFeatures,
|
|
27
|
-
systemLayouts
|
|
28
|
-
}) => {
|
|
29
|
-
const tableSchemas = vuuDataReact.useVuuTables();
|
|
30
|
-
const { dynamicFeatures, tableFeatures } = React.useMemo(
|
|
31
|
-
() => tableSchemas ? vuuUtils.getCustomAndTableFeatures(dynamicFeaturesProp, tableSchemas) : NO_FEATURES_VUU,
|
|
32
|
-
[dynamicFeaturesProp, tableSchemas]
|
|
33
|
-
);
|
|
34
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
35
|
-
FeatureContext.Provider,
|
|
36
|
-
{
|
|
37
|
-
value: {
|
|
38
|
-
dynamicFeatures,
|
|
39
|
-
tableFeatures,
|
|
40
|
-
staticFeatures
|
|
41
|
-
},
|
|
42
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
43
|
-
LayoutContext.Provider,
|
|
44
|
-
{
|
|
45
|
-
value: {
|
|
46
|
-
systemLayouts
|
|
47
|
-
},
|
|
48
|
-
children
|
|
49
|
-
}
|
|
50
|
-
)
|
|
51
|
-
}
|
|
52
|
-
);
|
|
53
|
-
};
|
|
54
|
-
const useFeatures = () => React.useContext(FeatureContext);
|
|
55
|
-
const useLayouts = () => React.useContext(LayoutContext);
|
|
56
|
-
|
|
57
|
-
exports.FeatureAndLayoutProvider = FeatureAndLayoutProvider;
|
|
58
|
-
exports.useFeatures = useFeatures;
|
|
59
|
-
exports.useLayouts = useLayouts;
|
|
60
|
-
//# sourceMappingURL=FeatureAndLayoutProvider.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"FeatureAndLayoutProvider.js","sources":["../../src/feature-and-layout-provider/FeatureAndLayoutProvider.tsx"],"sourcesContent":["import {\n DynamicFeatureDescriptor,\n DynamicFeatureProps,\n FilterTableFeatureProps,\n StaticFeatureDescriptor,\n SystemLayoutMetadata,\n getCustomAndTableFeatures,\n} from \"@vuu-ui/vuu-utils\";\nimport {\n ReactElement,\n ReactNode,\n createContext,\n useContext,\n useMemo,\n} from \"react\";\nimport { useVuuTables } from \"@vuu-ui/vuu-data-react\";\n\nexport interface FeatureContextProps {\n dynamicFeatures?: DynamicFeatureProps[];\n tableFeatures?: DynamicFeatureProps<FilterTableFeatureProps>[];\n staticFeatures?: StaticFeatureDescriptor[];\n}\n\nexport interface LayoutContextProps {\n systemLayouts?: SystemLayoutMetadata[];\n}\n\nconst NO_FEATURES: DynamicFeatureDescriptor[] = [];\nconst NO_STATICFEATURES: StaticFeatureDescriptor[] = [];\nconst NO_SYSTEMLAYOUTS: SystemLayoutMetadata[] = [];\n\nconst NO_FEATURES_VUU = {\n dynamicFeatures: NO_FEATURES,\n tableFeatures: NO_FEATURES,\n};\n\nconst FeatureContext = createContext<FeatureContextProps>({\n dynamicFeatures: NO_FEATURES,\n tableFeatures: NO_FEATURES,\n staticFeatures: NO_STATICFEATURES,\n});\n\nconst LayoutContext = createContext<LayoutContextProps>({\n systemLayouts: NO_SYSTEMLAYOUTS,\n});\n\nexport interface FeatureAndLayoutProviderProps\n extends Partial<FeatureContextProps> {\n children: ReactNode;\n dynamicFeatures?: DynamicFeatureDescriptor[];\n staticFeatures?: StaticFeatureDescriptor[];\n systemLayouts?: SystemLayoutMetadata[];\n}\n\nexport const FeatureAndLayoutProvider = ({\n children,\n dynamicFeatures: dynamicFeaturesProp = [],\n staticFeatures,\n systemLayouts,\n}: FeatureAndLayoutProviderProps): ReactElement => {\n const tableSchemas = useVuuTables();\n\n const { dynamicFeatures, tableFeatures } = useMemo<{\n dynamicFeatures: DynamicFeatureProps[];\n tableFeatures: DynamicFeatureProps<FilterTableFeatureProps>[];\n }>(\n () =>\n tableSchemas\n ? getCustomAndTableFeatures(dynamicFeaturesProp, tableSchemas)\n : NO_FEATURES_VUU,\n [dynamicFeaturesProp, tableSchemas],\n );\n\n return (\n <FeatureContext.Provider\n value={{\n dynamicFeatures,\n tableFeatures,\n staticFeatures,\n }}\n >\n <LayoutContext.Provider\n value={{\n systemLayouts,\n }}\n >\n {children}\n </LayoutContext.Provider>\n </FeatureContext.Provider>\n );\n};\n\nexport const useFeatures = () => useContext(FeatureContext);\nexport const useLayouts = () => useContext(LayoutContext);\n"],"names":["createContext","useVuuTables","useMemo","getCustomAndTableFeatures","jsx","useContext"],"mappings":";;;;;;;AA2BA,MAAM,cAA0C,EAAC;AACjD,MAAM,oBAA+C,EAAC;AACtD,MAAM,mBAA2C,EAAC;AAElD,MAAM,eAAkB,GAAA;AAAA,EACtB,eAAiB,EAAA,WAAA;AAAA,EACjB,aAAe,EAAA;AACjB,CAAA;AAEA,MAAM,iBAAiBA,mBAAmC,CAAA;AAAA,EACxD,eAAiB,EAAA,WAAA;AAAA,EACjB,aAAe,EAAA,WAAA;AAAA,EACf,cAAgB,EAAA;AAClB,CAAC,CAAA;AAED,MAAM,gBAAgBA,mBAAkC,CAAA;AAAA,EACtD,aAAe,EAAA;AACjB,CAAC,CAAA;AAUM,MAAM,2BAA2B,CAAC;AAAA,EACvC,QAAA;AAAA,EACA,eAAA,EAAiB,sBAAsB,EAAC;AAAA,EACxC,cAAA;AAAA,EACA;AACF,CAAmD,KAAA;AACjD,EAAA,MAAM,eAAeC,yBAAa,EAAA;AAElC,EAAM,MAAA,EAAE,eAAiB,EAAA,aAAA,EAAkB,GAAAC,aAAA;AAAA,IAIzC,MACE,YAAA,GACIC,kCAA0B,CAAA,mBAAA,EAAqB,YAAY,CAC3D,GAAA,eAAA;AAAA,IACN,CAAC,qBAAqB,YAAY;AAAA,GACpC;AAEA,EACE,uBAAAC,cAAA;AAAA,IAAC,cAAe,CAAA,QAAA;AAAA,IAAf;AAAA,MACC,KAAO,EAAA;AAAA,QACL,eAAA;AAAA,QACA,aAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEA,QAAA,kBAAAA,cAAA;AAAA,QAAC,aAAc,CAAA,QAAA;AAAA,QAAd;AAAA,UACC,KAAO,EAAA;AAAA,YACL;AAAA,WACF;AAAA,UAEC;AAAA;AAAA;AACH;AAAA,GACF;AAEJ;AAEa,MAAA,WAAA,GAAc,MAAMC,gBAAA,CAAW,cAAc;AAC7C,MAAA,UAAA,GAAa,MAAMA,gBAAA,CAAW,aAAa;;;;;;"}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var featureListCss = ".vuuFeatureList {\n --vuuListItem-padding: var(--salt-spacing-200);\n background: var(\n --vuuFeatureList-background,\n var(--salt-container-primary-background)\n );\n display: flex;\n flex-direction: column;\n height: 100%;\n padding: 0 var(--vuuFeatureList-padding, 0);\n}\n\n.vuuFeatureList-header {\n align-items: center;\n display: flex;\n flex: 0 0 48px;\n font-weight: 700;\n line-height: 2;\n}\n\n.vuuFeatureList-content {\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n font-size: 12px;\n font-weight: 700;\n overflow: auto;\n}\n\n.vuuFeatureList-standalone {\n margin-top: 24px;\n}\n\n.vuuFeatureList-group {\n --vuuMeasuredContainer-flex: 0 0 auto;\n\n display: flex;\n flex-direction: column;\n\n .vuuFeatureList-groupHeader {\n flex: 0 0 32px;\n padding: 8px 0;\n }\n\n .vuuPalette {\n flex: 1 1 auto;\n height: auto;\n }\n}\n\n.vuuFeatureList-group:first-child {\n margin-top: 12px;\n}\n\n.vuuFeatureList-group + .vuuFeatureList-group {\n margin-top: 24px;\n}\n\n.vuuFeatureList-itemName {\n font-weight: 700;\n}\n";
|
|
4
|
-
|
|
5
|
-
module.exports = featureListCss;
|
|
6
|
-
//# sourceMappingURL=FeatureList.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"FeatureList.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
|
@@ -1,97 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var vuuLayout = require('@vuu-ui/vuu-layout');
|
|
5
|
-
var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
|
|
6
|
-
var vuuUtils = require('@vuu-ui/vuu-utils');
|
|
7
|
-
var styles = require('@salt-ds/styles');
|
|
8
|
-
var window = require('@salt-ds/window');
|
|
9
|
-
var cx = require('clsx');
|
|
10
|
-
var React = require('react');
|
|
11
|
-
var Feature = require('../feature/Feature.js');
|
|
12
|
-
var FeatureList$1 = require('./FeatureList.css.js');
|
|
13
|
-
|
|
14
|
-
const classBase = "vuuFeatureList";
|
|
15
|
-
const FeatureList = ({
|
|
16
|
-
features,
|
|
17
|
-
title = "VUU TABLES",
|
|
18
|
-
...htmlAttributes
|
|
19
|
-
}) => {
|
|
20
|
-
const targetWindow = window.useWindow();
|
|
21
|
-
styles.useComponentCssInjection({
|
|
22
|
-
testId: "vuu-feature-list",
|
|
23
|
-
css: FeatureList$1,
|
|
24
|
-
window: targetWindow
|
|
25
|
-
});
|
|
26
|
-
const content = React.useMemo(() => {
|
|
27
|
-
if (vuuUtils.isStaticFeatures(features)) {
|
|
28
|
-
return features.map(({ label, type }, idx) => {
|
|
29
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
30
|
-
vuuLayout.PaletteItem,
|
|
31
|
-
{
|
|
32
|
-
closeable: true,
|
|
33
|
-
component: vuuUtils.featureFromJson({ type }),
|
|
34
|
-
value: label,
|
|
35
|
-
resizeable: true,
|
|
36
|
-
resize: "defer",
|
|
37
|
-
header: true,
|
|
38
|
-
children: [
|
|
39
|
-
/* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Icon, { name: "draggable", size: 18 }),
|
|
40
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase}-itemName`, children: label })
|
|
41
|
-
]
|
|
42
|
-
},
|
|
43
|
-
idx
|
|
44
|
-
);
|
|
45
|
-
});
|
|
46
|
-
}
|
|
47
|
-
if (Array.isArray(features)) {
|
|
48
|
-
return [
|
|
49
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-standalone`, children: /* @__PURE__ */ jsxRuntime.jsx(vuuLayout.Palette, { orientation: "vertical", children: features.map((featureProps, i) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
50
|
-
vuuLayout.PaletteItem,
|
|
51
|
-
{
|
|
52
|
-
closeable: true,
|
|
53
|
-
component: /* @__PURE__ */ jsxRuntime.jsx(Feature.Feature, { ...featureProps }),
|
|
54
|
-
value: featureProps.title,
|
|
55
|
-
resizeable: true,
|
|
56
|
-
resize: "defer",
|
|
57
|
-
header: true,
|
|
58
|
-
children: [
|
|
59
|
-
/* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Icon, { name: "draggable", size: 18 }),
|
|
60
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase}-itemName`, children: featureProps.title })
|
|
61
|
-
]
|
|
62
|
-
},
|
|
63
|
-
i
|
|
64
|
-
)) }, "0") }, 0)
|
|
65
|
-
];
|
|
66
|
-
} else {
|
|
67
|
-
return Object.entries(features).map(([heading, featureList], index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${classBase}-group`, children: [
|
|
68
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-groupHeader`, children: heading }),
|
|
69
|
-
/* @__PURE__ */ jsxRuntime.jsx(vuuLayout.Palette, { orientation: "vertical", children: featureList.map(
|
|
70
|
-
(featureProps, i) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
71
|
-
vuuLayout.PaletteItem,
|
|
72
|
-
{
|
|
73
|
-
closeable: true,
|
|
74
|
-
component: /* @__PURE__ */ jsxRuntime.jsx(Feature.Feature, { ...featureProps }),
|
|
75
|
-
value: featureProps.title,
|
|
76
|
-
resizeable: true,
|
|
77
|
-
resize: "defer",
|
|
78
|
-
header: true,
|
|
79
|
-
children: [
|
|
80
|
-
/* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Icon, { name: "draggable", size: 18 }),
|
|
81
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: `${classBase}-itemName`, children: featureProps.title })
|
|
82
|
-
]
|
|
83
|
-
},
|
|
84
|
-
i
|
|
85
|
-
)
|
|
86
|
-
) })
|
|
87
|
-
] }, index));
|
|
88
|
-
}
|
|
89
|
-
}, [features]);
|
|
90
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...htmlAttributes, className: cx(classBase, "vuuScrollable"), children: [
|
|
91
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-header`, children: title }),
|
|
92
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-content`, children: content })
|
|
93
|
-
] });
|
|
94
|
-
};
|
|
95
|
-
|
|
96
|
-
exports.FeatureList = FeatureList;
|
|
97
|
-
//# sourceMappingURL=FeatureList.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"FeatureList.js","sources":["../../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 closeable\n component={featureFromJson({ type })}\n key={idx}\n value={label}\n resizeable\n resize=\"defer\"\n header\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((featureProps, i) => (\n <PaletteItem\n closeable\n component={<Feature {...featureProps} />}\n key={i}\n value={featureProps.title}\n resizeable\n resize=\"defer\"\n header\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 (featureProps: DynamicFeatureProps<object>, i: Key) => (\n <PaletteItem\n closeable\n component={<Feature {...featureProps} />}\n key={i}\n value={featureProps.title}\n resizeable\n resize=\"defer\"\n header\n >\n <Icon name=\"draggable\" size={18} />\n <span className={`${classBase}-itemName`}>\n {featureProps.title}\n </span>\n </PaletteItem>\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":["useWindow","useComponentCssInjection","featureListCss","useMemo","isStaticFeatures","jsxs","PaletteItem","featureFromJson","jsx","Icon","Palette","Feature"],"mappings":"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"}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
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";
|
|
4
|
-
|
|
5
|
-
module.exports = leftNavCss;
|
|
6
|
-
//# sourceMappingURL=LeftNav.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"LeftNav.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
package/cjs/left-nav/LeftNav.js
DELETED
|
@@ -1,199 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var vuuIcons = require('@vuu-ui/vuu-icons');
|
|
5
|
-
var vuuLayout = require('@vuu-ui/vuu-layout');
|
|
6
|
-
var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
|
|
7
|
-
var vuuUtils = require('@vuu-ui/vuu-utils');
|
|
8
|
-
var styles = require('@salt-ds/styles');
|
|
9
|
-
var window = require('@salt-ds/window');
|
|
10
|
-
var cx = require('clsx');
|
|
11
|
-
var React = require('react');
|
|
12
|
-
var FeatureList = require('../feature-list/FeatureList.js');
|
|
13
|
-
require('@salt-ds/core');
|
|
14
|
-
require('html-to-image');
|
|
15
|
-
var LayoutList = require('../workspace-management/LayoutList.js');
|
|
16
|
-
require('../workspace-management/WorkspaceProvider.js');
|
|
17
|
-
require('../workspace-management/defaultWorkspaceJSON.js');
|
|
18
|
-
require('@vuu-ui/vuu-popups');
|
|
19
|
-
var LeftNav$1 = require('./LeftNav.css.js');
|
|
20
|
-
var FeatureAndLayoutProvider = require('../feature-and-layout-provider/FeatureAndLayoutProvider.js');
|
|
21
|
-
|
|
22
|
-
const classBase = "vuuLeftNav";
|
|
23
|
-
const getDisplayStatus = (activeTabIndex, expanded) => {
|
|
24
|
-
if (activeTabIndex === 0) {
|
|
25
|
-
return expanded ? "menu-full" : "menu-icons";
|
|
26
|
-
} else {
|
|
27
|
-
return expanded ? "menu-full-content" : "menu-icons-content";
|
|
28
|
-
}
|
|
29
|
-
};
|
|
30
|
-
const byModule = (f1, f2) => {
|
|
31
|
-
const t1 = f1.ComponentProps?.tableSchema.table;
|
|
32
|
-
const t2 = f2.ComponentProps?.tableSchema.table;
|
|
33
|
-
if (t1 && t2) {
|
|
34
|
-
const m1 = t1.module.toLowerCase();
|
|
35
|
-
const m2 = t2.module.toLowerCase();
|
|
36
|
-
if (m1 < m2) {
|
|
37
|
-
return -1;
|
|
38
|
-
} else if (m1 > m2) {
|
|
39
|
-
return 1;
|
|
40
|
-
} else if (t1.table < t2.table) {
|
|
41
|
-
return -1;
|
|
42
|
-
} else if (t1.table > t2.table) {
|
|
43
|
-
return 1;
|
|
44
|
-
} else {
|
|
45
|
-
return 0;
|
|
46
|
-
}
|
|
47
|
-
} else {
|
|
48
|
-
throw Error("Invalid tableFeature");
|
|
49
|
-
}
|
|
50
|
-
};
|
|
51
|
-
const LeftNav = (props) => {
|
|
52
|
-
const dispatch = vuuLayout.useLayoutProviderDispatch();
|
|
53
|
-
const {
|
|
54
|
-
"data-path": path,
|
|
55
|
-
defaultExpanded = true,
|
|
56
|
-
defaultActiveTabIndex = 0,
|
|
57
|
-
onActiveChange,
|
|
58
|
-
onTogglePrimaryMenu,
|
|
59
|
-
sizeCollapsed = 80,
|
|
60
|
-
sizeContent = 300,
|
|
61
|
-
sizeExpanded = 240,
|
|
62
|
-
style: styleProp,
|
|
63
|
-
...htmlAttributes
|
|
64
|
-
} = props;
|
|
65
|
-
const targetWindow = window.useWindow();
|
|
66
|
-
styles.useComponentCssInjection({
|
|
67
|
-
testId: "vuu-left-nav",
|
|
68
|
-
css: LeftNav$1,
|
|
69
|
-
window: targetWindow
|
|
70
|
-
});
|
|
71
|
-
const { dynamicFeatures = [], tableFeatures = [] } = FeatureAndLayoutProvider.useFeatures();
|
|
72
|
-
const [navState, setNavState] = React.useState({
|
|
73
|
-
activeTabIndex: defaultActiveTabIndex,
|
|
74
|
-
expanded: defaultExpanded
|
|
75
|
-
});
|
|
76
|
-
const tableFeaturesByGroup = React.useMemo(
|
|
77
|
-
() => tableFeatures?.sort(byModule).reduce((acc, filterTableFeature) => {
|
|
78
|
-
if (vuuUtils.hasFilterTableFeatureProps(filterTableFeature)) {
|
|
79
|
-
const { table } = filterTableFeature.ComponentProps.tableSchema;
|
|
80
|
-
const key = `${table.module} Tables`;
|
|
81
|
-
if (!acc[key]) {
|
|
82
|
-
acc[key] = [];
|
|
83
|
-
}
|
|
84
|
-
return {
|
|
85
|
-
...acc,
|
|
86
|
-
[key]: acc[key].concat(filterTableFeature)
|
|
87
|
-
};
|
|
88
|
-
} else {
|
|
89
|
-
return acc;
|
|
90
|
-
}
|
|
91
|
-
}, {}),
|
|
92
|
-
[tableFeatures]
|
|
93
|
-
);
|
|
94
|
-
const getFullWidth = React.useCallback(
|
|
95
|
-
(tabIndex, expanded) => {
|
|
96
|
-
if (tabIndex === 0) {
|
|
97
|
-
return expanded ? sizeExpanded : sizeCollapsed;
|
|
98
|
-
} else {
|
|
99
|
-
return expanded ? sizeExpanded + sizeContent : sizeCollapsed + sizeContent;
|
|
100
|
-
}
|
|
101
|
-
},
|
|
102
|
-
[sizeCollapsed, sizeContent, sizeExpanded]
|
|
103
|
-
);
|
|
104
|
-
const handleTabSelection = React.useCallback(
|
|
105
|
-
(activeTabIndex) => {
|
|
106
|
-
const { activeTabIndex: currentIndex, expanded } = navState;
|
|
107
|
-
const newState = { activeTabIndex, expanded };
|
|
108
|
-
setNavState(newState);
|
|
109
|
-
if (activeTabIndex === 0 || currentIndex === 0) {
|
|
110
|
-
const width = getFullWidth(activeTabIndex, expanded);
|
|
111
|
-
dispatch({
|
|
112
|
-
type: "layout-resize",
|
|
113
|
-
path: "#vuu-side-panel",
|
|
114
|
-
size: width
|
|
115
|
-
});
|
|
116
|
-
}
|
|
117
|
-
onActiveChange?.(activeTabIndex);
|
|
118
|
-
},
|
|
119
|
-
[dispatch, getFullWidth, navState, onActiveChange]
|
|
120
|
-
);
|
|
121
|
-
const displayStatus = getDisplayStatus(
|
|
122
|
-
navState.activeTabIndex,
|
|
123
|
-
navState.expanded
|
|
124
|
-
);
|
|
125
|
-
const toggleExpanded = React.useCallback(() => {
|
|
126
|
-
const { activeTabIndex, expanded } = navState;
|
|
127
|
-
const primaryMenuExpanded = !expanded;
|
|
128
|
-
const newState = { activeTabIndex, expanded: primaryMenuExpanded };
|
|
129
|
-
setNavState(newState);
|
|
130
|
-
dispatch({
|
|
131
|
-
type: "layout-resize",
|
|
132
|
-
path: "#vuu-side-panel",
|
|
133
|
-
size: getFullWidth(activeTabIndex, primaryMenuExpanded)
|
|
134
|
-
});
|
|
135
|
-
onTogglePrimaryMenu?.(primaryMenuExpanded);
|
|
136
|
-
}, [dispatch, getFullWidth, navState, onTogglePrimaryMenu]);
|
|
137
|
-
const style = {
|
|
138
|
-
...styleProp,
|
|
139
|
-
"--nav-menu-collapsed-width": `${sizeCollapsed}px`,
|
|
140
|
-
"--nav-menu-expanded-width": `${sizeExpanded}px`,
|
|
141
|
-
"--nav-menu-content-width": `${sizeContent}px`
|
|
142
|
-
};
|
|
143
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
144
|
-
"div",
|
|
145
|
-
{
|
|
146
|
-
...htmlAttributes,
|
|
147
|
-
className: cx(classBase, `${classBase}-${displayStatus}`),
|
|
148
|
-
style,
|
|
149
|
-
children: [
|
|
150
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(`${classBase}-menu-primary`), "data-mode": "dark", children: [
|
|
151
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "vuuLeftNav-logo", children: /* @__PURE__ */ jsxRuntime.jsx(vuuIcons.VuuLogo, {}) }),
|
|
152
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-main`, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
153
|
-
vuuUiControls.Tabstrip,
|
|
154
|
-
{
|
|
155
|
-
activeTabIndex: navState.activeTabIndex,
|
|
156
|
-
animateSelectionThumb: false,
|
|
157
|
-
className: `${classBase}-Tabstrip`,
|
|
158
|
-
onActiveChange: handleTabSelection,
|
|
159
|
-
orientation: "vertical",
|
|
160
|
-
children: [
|
|
161
|
-
/* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Tab, { "data-icon": "demo", label: "DEMO" }),
|
|
162
|
-
/* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Tab, { "data-icon": "features", label: "VUU FEATURES" }),
|
|
163
|
-
/* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Tab, { "data-icon": "tables", label: "VUU TABLES" }),
|
|
164
|
-
/* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Tab, { "data-icon": "layouts", label: "MY LAYOUTS" })
|
|
165
|
-
]
|
|
166
|
-
}
|
|
167
|
-
) }),
|
|
168
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "vuuLeftNav-buttonBar", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
169
|
-
"button",
|
|
170
|
-
{
|
|
171
|
-
className: cx("vuuLeftNav-toggleButton", {
|
|
172
|
-
"vuuLeftNav-toggleButton-open": displayStatus.startsWith("menu-full"),
|
|
173
|
-
"vuuLeftNav-toggleButton-closed": displayStatus.startsWith("menu-icons")
|
|
174
|
-
}),
|
|
175
|
-
"data-icon": displayStatus.startsWith("menu-full") ? "chevron-left" : "chevron-right",
|
|
176
|
-
onClick: toggleExpanded
|
|
177
|
-
}
|
|
178
|
-
) })
|
|
179
|
-
] }),
|
|
180
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
181
|
-
vuuLayout.Stack,
|
|
182
|
-
{
|
|
183
|
-
active: navState.activeTabIndex - 1,
|
|
184
|
-
className: `${classBase}-menu-secondary`,
|
|
185
|
-
showTabs: false,
|
|
186
|
-
children: [
|
|
187
|
-
/* @__PURE__ */ jsxRuntime.jsx(FeatureList.FeatureList, { features: dynamicFeatures, title: "VUU FEATURES" }),
|
|
188
|
-
/* @__PURE__ */ jsxRuntime.jsx(FeatureList.FeatureList, { features: tableFeaturesByGroup, title: "VUU TABLES" }),
|
|
189
|
-
/* @__PURE__ */ jsxRuntime.jsx(LayoutList.LayoutList, { title: "MY LAYOUTS" })
|
|
190
|
-
]
|
|
191
|
-
}
|
|
192
|
-
)
|
|
193
|
-
]
|
|
194
|
-
}
|
|
195
|
-
);
|
|
196
|
-
};
|
|
197
|
-
|
|
198
|
-
exports.LeftNav = LeftNav;
|
|
199
|
-
//# sourceMappingURL=LeftNav.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"LeftNav.js","sources":["../../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":["useLayoutProviderDispatch","useWindow","useComponentCssInjection","leftNavCss","useFeatures","useState","useMemo","hasFilterTableFeatureProps","useCallback","jsxs","jsx","VuuLogo","Tabstrip","Tab","Stack","FeatureList","LayoutList"],"mappings":"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"}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
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-purple-50);\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";
|
|
4
|
-
|
|
5
|
-
module.exports = loginPanelCss;
|
|
6
|
-
//# sourceMappingURL=LoginPanel.css.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"LoginPanel.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
|
package/cjs/login/LoginPanel.js
DELETED
|
@@ -1,108 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
|
|
5
|
-
var core = require('@salt-ds/core');
|
|
6
|
-
var styles = require('@salt-ds/styles');
|
|
7
|
-
var window = require('@salt-ds/window');
|
|
8
|
-
var cx = require('clsx');
|
|
9
|
-
var React = require('react');
|
|
10
|
-
var VuuLogo = require('./VuuLogo.js');
|
|
11
|
-
var LoginPanel$1 = require('./LoginPanel.css.js');
|
|
12
|
-
|
|
13
|
-
const classBase = "vuuLoginPanel";
|
|
14
|
-
const LoginPanel = ({
|
|
15
|
-
appName = "Demo App",
|
|
16
|
-
className,
|
|
17
|
-
requirePassword = true,
|
|
18
|
-
onSubmit,
|
|
19
|
-
...htmlAttributes
|
|
20
|
-
}) => {
|
|
21
|
-
const targetWindow = window.useWindow();
|
|
22
|
-
styles.useComponentCssInjection({
|
|
23
|
-
testId: "vuu-login-panel",
|
|
24
|
-
css: LoginPanel$1,
|
|
25
|
-
window: targetWindow
|
|
26
|
-
});
|
|
27
|
-
const [username, setUserName] = React.useState("");
|
|
28
|
-
const [password, setPassword] = React.useState("");
|
|
29
|
-
const inputRef = React.useRef(null);
|
|
30
|
-
const login = () => {
|
|
31
|
-
onSubmit(username, password);
|
|
32
|
-
};
|
|
33
|
-
const handleUsername = (evt) => {
|
|
34
|
-
setUserName(evt.target.value);
|
|
35
|
-
};
|
|
36
|
-
const handlePassword = (evt) => {
|
|
37
|
-
setPassword(evt.target.value);
|
|
38
|
-
};
|
|
39
|
-
const handleCommitName = React.useCallback(() => {
|
|
40
|
-
if (!requirePassword) {
|
|
41
|
-
onSubmit(username);
|
|
42
|
-
}
|
|
43
|
-
}, [onSubmit, requirePassword, username]);
|
|
44
|
-
const handleCommitPassword = React.useCallback(() => {
|
|
45
|
-
if (username) {
|
|
46
|
-
onSubmit(username, password);
|
|
47
|
-
}
|
|
48
|
-
}, [onSubmit, password, username]);
|
|
49
|
-
const dataIsValid = username.trim() !== "" && (requirePassword === false || password.trim() !== "");
|
|
50
|
-
React.useEffect(() => {
|
|
51
|
-
console.log(`inputRef`, {
|
|
52
|
-
input: inputRef.current
|
|
53
|
-
});
|
|
54
|
-
inputRef.current?.focus();
|
|
55
|
-
}, []);
|
|
56
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...htmlAttributes, className: cx(classBase, className), children: [
|
|
57
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${classBase}-branding`, children: [
|
|
58
|
-
/* @__PURE__ */ jsxRuntime.jsx(VuuLogo.VuuLogo, {}),
|
|
59
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-appName`, children: appName })
|
|
60
|
-
] }),
|
|
61
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${classBase}-form`, children: [
|
|
62
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-title`, children: "Welcome Back" }),
|
|
63
|
-
/* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { children: [
|
|
64
|
-
/* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: "Username" }),
|
|
65
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
66
|
-
vuuUiControls.VuuInput,
|
|
67
|
-
{
|
|
68
|
-
value: username,
|
|
69
|
-
id: "text-username",
|
|
70
|
-
inputRef,
|
|
71
|
-
onChange: handleUsername,
|
|
72
|
-
onCommit: handleCommitName
|
|
73
|
-
}
|
|
74
|
-
)
|
|
75
|
-
] }),
|
|
76
|
-
requirePassword ? /* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { children: [
|
|
77
|
-
/* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: "Password" }),
|
|
78
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
79
|
-
vuuUiControls.VuuInput,
|
|
80
|
-
{
|
|
81
|
-
className: `${classBase}-password`,
|
|
82
|
-
inputProps: {
|
|
83
|
-
type: "password"
|
|
84
|
-
},
|
|
85
|
-
value: password,
|
|
86
|
-
id: "text-password",
|
|
87
|
-
onChange: handlePassword,
|
|
88
|
-
onCommit: handleCommitPassword,
|
|
89
|
-
endAdornment: /* @__PURE__ */ jsxRuntime.jsx("span", { "data-icon": "eye", style: { cursor: "pointer" } })
|
|
90
|
-
}
|
|
91
|
-
)
|
|
92
|
-
] }) : null,
|
|
93
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
94
|
-
core.Button,
|
|
95
|
-
{
|
|
96
|
-
className: `${classBase}-login`,
|
|
97
|
-
disabled: !dataIsValid,
|
|
98
|
-
onClick: login,
|
|
99
|
-
variant: "cta",
|
|
100
|
-
children: "Login"
|
|
101
|
-
}
|
|
102
|
-
)
|
|
103
|
-
] })
|
|
104
|
-
] });
|
|
105
|
-
};
|
|
106
|
-
|
|
107
|
-
exports.LoginPanel = LoginPanel;
|
|
108
|
-
//# sourceMappingURL=LoginPanel.js.map
|