@vuu-ui/vuu-shell 0.13.110-alpha.4 → 0.13.110
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/app-header/AppHeader.css.js +1 -1
- package/cjs/app-header/AppHeader.js +5 -5
- package/cjs/app-header/AppHeader.js.map +1 -1
- package/cjs/login/LoginPanel.css.js +1 -1
- package/cjs/login/LoginPanel.js +0 -1
- package/cjs/login/LoginPanel.js.map +1 -1
- package/cjs/shell.css.js +1 -1
- package/esm/app-header/AppHeader.css.js +1 -1
- package/esm/app-header/AppHeader.js +5 -5
- package/esm/app-header/AppHeader.js.map +1 -1
- package/esm/login/LoginPanel.css.js +1 -1
- package/esm/login/LoginPanel.js +0 -1
- package/esm/login/LoginPanel.js.map +1 -1
- package/esm/shell.css.js +1 -1
- package/package.json +14 -14
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var appHeaderCss = ".vuuAppHeader {\n --saltButton-borderRadius: 6px;\n --saltButton-text-color: var(--vuu-color-gray-50);\n --saltButton-padding: 12px;\n --vuuToolbarItem-height: 26px;\n --vuuOverflowContainer-gap: 8px;\n --
|
|
3
|
+
var appHeaderCss = ".vuuAppHeader {\n --saltButton-borderRadius: 6px;\n --saltButton-text-color: var(--vuu-color-gray-50);\n --saltButton-padding: 12px;\n --vuuToolbarItem-height: 26px;\n --vuuOverflowContainer-gap: 8px;\n --vuu-icon-color: var(--vuu-color-gray-45);\n --vuu-icon-size: 16px;\n --vuuToolbar-borderWidth: 1px;\n --vuuToolbar-borderStyle: solid;\n --vuuToolbar-borderColor: var(--salt-separable-primary-borderColor);\n\n align-items: center;\n display: flex;\n justify-content: flex-end;\n}\n\n.vuu-theme .vuuAppHeader {\n border-radius: 8px;\n\n margin-bottom: 8px;\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = appHeaderCss;
|
|
6
6
|
//# sourceMappingURL=AppHeader.css.js.map
|
|
@@ -8,12 +8,12 @@ var vuuLayout = require('@vuu-ui/vuu-layout');
|
|
|
8
8
|
var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
|
|
9
9
|
var cx = require('clsx');
|
|
10
10
|
var React = require('react');
|
|
11
|
+
var AppHeader$1 = require('./AppHeader.css.js');
|
|
11
12
|
var PersistenceProvider = require('../persistence-manager/PersistenceProvider.js');
|
|
12
13
|
require('../persistence-manager/LocalPersistenceManager.js');
|
|
13
14
|
require('../persistence-manager/StaticPersistenceManager.js');
|
|
14
15
|
var vuuNotifications = require('@vuu-ui/vuu-notifications');
|
|
15
16
|
var ApplicationProvider = require('../application-provider/ApplicationProvider.js');
|
|
16
|
-
var AppHeader$1 = require('./AppHeader.css.js');
|
|
17
17
|
|
|
18
18
|
const classBase = "vuuAppHeader";
|
|
19
19
|
const AppHeader = ({
|
|
@@ -67,7 +67,7 @@ const AppHeader = ({
|
|
|
67
67
|
core.Button,
|
|
68
68
|
{
|
|
69
69
|
className: `${classBase}-menuItem`,
|
|
70
|
-
appearance: "
|
|
70
|
+
appearance: "bordered",
|
|
71
71
|
sentiment: "neutral",
|
|
72
72
|
children: "Help"
|
|
73
73
|
}
|
|
@@ -75,7 +75,7 @@ const AppHeader = ({
|
|
|
75
75
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
76
76
|
core.Button,
|
|
77
77
|
{
|
|
78
|
-
appearance: "
|
|
78
|
+
appearance: "bordered",
|
|
79
79
|
className: `${classBase}-menuItem`,
|
|
80
80
|
onClick: handleReset,
|
|
81
81
|
sentiment: "neutral",
|
|
@@ -88,7 +88,7 @@ const AppHeader = ({
|
|
|
88
88
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
89
89
|
core.Button,
|
|
90
90
|
{
|
|
91
|
-
appearance: "
|
|
91
|
+
appearance: "bordered",
|
|
92
92
|
className: `${classBase}-menuItem`,
|
|
93
93
|
onClick: handleShowSettings,
|
|
94
94
|
ref: settingsButtonRef,
|
|
@@ -102,7 +102,7 @@ const AppHeader = ({
|
|
|
102
102
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
103
103
|
core.Button,
|
|
104
104
|
{
|
|
105
|
-
appearance: "
|
|
105
|
+
appearance: "bordered",
|
|
106
106
|
className: `${classBase}-menuItem`,
|
|
107
107
|
onClick: logout,
|
|
108
108
|
sentiment: "neutral",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppHeader.js","sources":["../../../../packages/vuu-shell/src/app-header/AppHeader.tsx"],"sourcesContent":["import { Button } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useLayoutOperation } from \"@vuu-ui/vuu-layout\";\nimport { Toolbar } from \"@vuu-ui/vuu-ui-controls\";\nimport type { ThemeMode } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, useCallback, useRef } from \"react\";\nimport { usePersistenceManager } from \"../persistence-manager\";\nimport { NotificationType, useNotifications } from \"@vuu-ui/vuu-notifications\";\nimport { useLogout } from \"../application-provider\";\n\
|
|
1
|
+
{"version":3,"file":"AppHeader.js","sources":["../../../../packages/vuu-shell/src/app-header/AppHeader.tsx"],"sourcesContent":["import { Button } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useLayoutOperation } from \"@vuu-ui/vuu-layout\";\nimport { Toolbar } from \"@vuu-ui/vuu-ui-controls\";\nimport type { ThemeMode } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, useCallback, useRef } from \"react\";\n\nimport appHeaderCss from \"./AppHeader.css\";\nimport { usePersistenceManager } from \"../persistence-manager\";\nimport { NotificationType, useNotifications } from \"@vuu-ui/vuu-notifications\";\nimport { useLogout } from \"../application-provider\";\n\nconst classBase = \"vuuAppHeader\";\nexport interface AppHeaderProps extends HTMLAttributes<HTMLDivElement> {\n themeMode?: ThemeMode;\n}\n\nexport const AppHeader = ({\n className: classNameProp,\n themeMode: _,\n ...htmlAttributes\n}: AppHeaderProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-app-header\",\n css: appHeaderCss,\n window: targetWindow,\n });\n\n const persistenceManager = usePersistenceManager();\n const settingsButtonRef = useRef<HTMLButtonElement>(null);\n\n const className = cx(classBase, classNameProp);\n const logout = useLogout();\n\n const { showComponentInContextPanel } = useLayoutOperation();\n const { showNotification } = useNotifications();\n\n const handleReset = useCallback(() => {\n persistenceManager?.clearUserSettings();\n showNotification({\n animationType: \"slide-out\",\n renderPostRefresh: true,\n type: NotificationType.Toast,\n header: \"Success\",\n content: \"Settings cleared\",\n status: \"success\",\n });\n location.reload();\n }, [persistenceManager, showNotification]);\n\n const handleShowSettings = useCallback(() => {\n showComponentInContextPanel(\n {\n type: \"ApplicationSettings\",\n },\n \"Settings\",\n () => settingsButtonRef.current?.focus(),\n );\n }, [showComponentInContextPanel]);\n\n return (\n <Toolbar\n alignItems=\"end\"\n className={className}\n role=\"banner\"\n showSeparators\n {...htmlAttributes}\n >\n <Button\n className={`${classBase}-menuItem`}\n appearance=\"bordered\"\n sentiment=\"neutral\"\n >\n Help\n </Button>\n <Button\n appearance=\"bordered\"\n className={`${classBase}-menuItem`}\n onClick={handleReset}\n sentiment=\"neutral\"\n >\n Reset <span data-icon=\"history\" />\n </Button>\n <Button\n appearance=\"bordered\"\n className={`${classBase}-menuItem`}\n onClick={handleShowSettings}\n ref={settingsButtonRef}\n sentiment=\"neutral\"\n >\n Settings <span data-icon=\"settings\" />\n </Button>\n <Button\n appearance=\"bordered\"\n className={`${classBase}-menuItem`}\n onClick={logout}\n sentiment=\"neutral\"\n >\n Log out\n </Button>\n </Toolbar>\n );\n};\n"],"names":["useWindow","useComponentCssInjection","appHeaderCss","usePersistenceManager","useRef","useLogout","useLayoutOperation","useNotifications","useCallback","NotificationType","jsxs","Toolbar","jsx","Button"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
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-
|
|
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
4
|
|
|
5
5
|
module.exports = loginPanelCss;
|
|
6
6
|
//# sourceMappingURL=LoginPanel.css.js.map
|
package/cjs/login/LoginPanel.js
CHANGED
|
@@ -1 +1 @@
|
|
|
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
|
|
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 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 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":["useWindow","useComponentCssInjection","loginPanelCss","useState","useRef","useCallback","useEffect","jsxs","jsx","VuuLogo","FormField","FormFieldLabel","VuuInput","Button"],"mappings":"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"}
|
package/cjs/shell.css.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var shellCss = ".vuuShell {\n background-color: var(\n --vuuShell-background,\n var(--salt-container-primary-background)\n );\n height: var(--vuuShell-height, 100vh);\n width: var(--vuuShell-width, 100vw);\n\n .left-main-tabs {\n --vuuOverflowContainer-width: 48px;\n }\n}\n\n.vuu-workspace-tabs {\n background: var(\n --vuuWorkspace-background,\n var(--salt-container-primary-background)\n );\n}\n\n.vuuShell-palette {\n --vuuView-border: none;\n --vuuView-margin: 0;\n}\n\n.vuuShell-warningPlaceholder {\n background-color: var(--salt-container-background-high);\n height: 100%;\n}\n\n/* until we reinstat5e the toolbar */\n.vuuToolbarProxy {\n background: var(--salt-container-primary-background);\n}\n\n.vuu-workspace-tabs > .vuuTabstrip > .vuuOverflowContainer-wrapContainer {\n background: var(--vuuShell-background, var(--
|
|
3
|
+
var shellCss = ".vuuShell {\n background-color: var(\n --vuuShell-background,\n var(--salt-container-primary-background)\n );\n height: var(--vuuShell-height, 100vh);\n width: var(--vuuShell-width, 100vw);\n\n .left-main-tabs {\n --vuuOverflowContainer-width: 48px;\n }\n}\n\n.vuu-workspace-tabs {\n background: var(\n --vuuWorkspace-background,\n var(--salt-container-primary-background)\n );\n}\n\n.vuuShell-palette {\n --vuuView-border: none;\n --vuuView-margin: 0;\n}\n\n.vuuShell-warningPlaceholder {\n background-color: var(--salt-container-background-high);\n height: 100%;\n}\n\n/* until we reinstat5e the toolbar */\n.vuuToolbarProxy {\n background: var(--salt-container-primary-background);\n}\n\n.vuu-workspace-tabs > .vuuTabstrip > .vuuOverflowContainer-wrapContainer {\n background: var(--vuuShell-background, var(--vuu-color-gray-25));\n}\n\n.vuu-workspace-tabs {\n --vuuTab-height: 28px;\n border: solid 1px var(--salt-separable-primary-borderColor);\n border-top: none !important;\n border-radius: 6px;\n height: 100%;\n padding: 36px 8px 8px 8px;\n position: relative;\n width: 100%;\n}\n\n.vuu-workspace-tabs > .vuuTabstrip {\n left: 0px;\n padding-bottom: 7px;\n position: absolute !important;\n right: 0px;\n top: 0;\n}\n\n.vuuShell-content {\n padding: var(--vuuShell-content-padding, 8px);\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = shellCss;
|
|
6
6
|
//# sourceMappingURL=shell.css.js.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var appHeaderCss = ".vuuAppHeader {\n --saltButton-borderRadius: 6px;\n --saltButton-text-color: var(--vuu-color-gray-50);\n --saltButton-padding: 12px;\n --vuuToolbarItem-height: 26px;\n --vuuOverflowContainer-gap: 8px;\n --
|
|
1
|
+
var appHeaderCss = ".vuuAppHeader {\n --saltButton-borderRadius: 6px;\n --saltButton-text-color: var(--vuu-color-gray-50);\n --saltButton-padding: 12px;\n --vuuToolbarItem-height: 26px;\n --vuuOverflowContainer-gap: 8px;\n --vuu-icon-color: var(--vuu-color-gray-45);\n --vuu-icon-size: 16px;\n --vuuToolbar-borderWidth: 1px;\n --vuuToolbar-borderStyle: solid;\n --vuuToolbar-borderColor: var(--salt-separable-primary-borderColor);\n\n align-items: center;\n display: flex;\n justify-content: flex-end;\n}\n\n.vuu-theme .vuuAppHeader {\n border-radius: 8px;\n\n margin-bottom: 8px;\n}\n";
|
|
2
2
|
|
|
3
3
|
export { appHeaderCss as default };
|
|
4
4
|
//# sourceMappingURL=AppHeader.css.js.map
|
|
@@ -6,12 +6,12 @@ import { useLayoutOperation } from '@vuu-ui/vuu-layout';
|
|
|
6
6
|
import { Toolbar } from '@vuu-ui/vuu-ui-controls';
|
|
7
7
|
import cx from 'clsx';
|
|
8
8
|
import { useRef, useCallback } from 'react';
|
|
9
|
+
import appHeaderCss from './AppHeader.css.js';
|
|
9
10
|
import { usePersistenceManager } from '../persistence-manager/PersistenceProvider.js';
|
|
10
11
|
import '../persistence-manager/LocalPersistenceManager.js';
|
|
11
12
|
import '../persistence-manager/StaticPersistenceManager.js';
|
|
12
13
|
import { useNotifications, NotificationType } from '@vuu-ui/vuu-notifications';
|
|
13
14
|
import { useLogout } from '../application-provider/ApplicationProvider.js';
|
|
14
|
-
import appHeaderCss from './AppHeader.css.js';
|
|
15
15
|
|
|
16
16
|
const classBase = "vuuAppHeader";
|
|
17
17
|
const AppHeader = ({
|
|
@@ -65,7 +65,7 @@ const AppHeader = ({
|
|
|
65
65
|
Button,
|
|
66
66
|
{
|
|
67
67
|
className: `${classBase}-menuItem`,
|
|
68
|
-
appearance: "
|
|
68
|
+
appearance: "bordered",
|
|
69
69
|
sentiment: "neutral",
|
|
70
70
|
children: "Help"
|
|
71
71
|
}
|
|
@@ -73,7 +73,7 @@ const AppHeader = ({
|
|
|
73
73
|
/* @__PURE__ */ jsxs(
|
|
74
74
|
Button,
|
|
75
75
|
{
|
|
76
|
-
appearance: "
|
|
76
|
+
appearance: "bordered",
|
|
77
77
|
className: `${classBase}-menuItem`,
|
|
78
78
|
onClick: handleReset,
|
|
79
79
|
sentiment: "neutral",
|
|
@@ -86,7 +86,7 @@ const AppHeader = ({
|
|
|
86
86
|
/* @__PURE__ */ jsxs(
|
|
87
87
|
Button,
|
|
88
88
|
{
|
|
89
|
-
appearance: "
|
|
89
|
+
appearance: "bordered",
|
|
90
90
|
className: `${classBase}-menuItem`,
|
|
91
91
|
onClick: handleShowSettings,
|
|
92
92
|
ref: settingsButtonRef,
|
|
@@ -100,7 +100,7 @@ const AppHeader = ({
|
|
|
100
100
|
/* @__PURE__ */ jsx(
|
|
101
101
|
Button,
|
|
102
102
|
{
|
|
103
|
-
appearance: "
|
|
103
|
+
appearance: "bordered",
|
|
104
104
|
className: `${classBase}-menuItem`,
|
|
105
105
|
onClick: logout,
|
|
106
106
|
sentiment: "neutral",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppHeader.js","sources":["../../../../packages/vuu-shell/src/app-header/AppHeader.tsx"],"sourcesContent":["import { Button } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useLayoutOperation } from \"@vuu-ui/vuu-layout\";\nimport { Toolbar } from \"@vuu-ui/vuu-ui-controls\";\nimport type { ThemeMode } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, useCallback, useRef } from \"react\";\nimport { usePersistenceManager } from \"../persistence-manager\";\nimport { NotificationType, useNotifications } from \"@vuu-ui/vuu-notifications\";\nimport { useLogout } from \"../application-provider\";\n\
|
|
1
|
+
{"version":3,"file":"AppHeader.js","sources":["../../../../packages/vuu-shell/src/app-header/AppHeader.tsx"],"sourcesContent":["import { Button } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useLayoutOperation } from \"@vuu-ui/vuu-layout\";\nimport { Toolbar } from \"@vuu-ui/vuu-ui-controls\";\nimport type { ThemeMode } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, useCallback, useRef } from \"react\";\n\nimport appHeaderCss from \"./AppHeader.css\";\nimport { usePersistenceManager } from \"../persistence-manager\";\nimport { NotificationType, useNotifications } from \"@vuu-ui/vuu-notifications\";\nimport { useLogout } from \"../application-provider\";\n\nconst classBase = \"vuuAppHeader\";\nexport interface AppHeaderProps extends HTMLAttributes<HTMLDivElement> {\n themeMode?: ThemeMode;\n}\n\nexport const AppHeader = ({\n className: classNameProp,\n themeMode: _,\n ...htmlAttributes\n}: AppHeaderProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-app-header\",\n css: appHeaderCss,\n window: targetWindow,\n });\n\n const persistenceManager = usePersistenceManager();\n const settingsButtonRef = useRef<HTMLButtonElement>(null);\n\n const className = cx(classBase, classNameProp);\n const logout = useLogout();\n\n const { showComponentInContextPanel } = useLayoutOperation();\n const { showNotification } = useNotifications();\n\n const handleReset = useCallback(() => {\n persistenceManager?.clearUserSettings();\n showNotification({\n animationType: \"slide-out\",\n renderPostRefresh: true,\n type: NotificationType.Toast,\n header: \"Success\",\n content: \"Settings cleared\",\n status: \"success\",\n });\n location.reload();\n }, [persistenceManager, showNotification]);\n\n const handleShowSettings = useCallback(() => {\n showComponentInContextPanel(\n {\n type: \"ApplicationSettings\",\n },\n \"Settings\",\n () => settingsButtonRef.current?.focus(),\n );\n }, [showComponentInContextPanel]);\n\n return (\n <Toolbar\n alignItems=\"end\"\n className={className}\n role=\"banner\"\n showSeparators\n {...htmlAttributes}\n >\n <Button\n className={`${classBase}-menuItem`}\n appearance=\"bordered\"\n sentiment=\"neutral\"\n >\n Help\n </Button>\n <Button\n appearance=\"bordered\"\n className={`${classBase}-menuItem`}\n onClick={handleReset}\n sentiment=\"neutral\"\n >\n Reset <span data-icon=\"history\" />\n </Button>\n <Button\n appearance=\"bordered\"\n className={`${classBase}-menuItem`}\n onClick={handleShowSettings}\n ref={settingsButtonRef}\n sentiment=\"neutral\"\n >\n Settings <span data-icon=\"settings\" />\n </Button>\n <Button\n appearance=\"bordered\"\n className={`${classBase}-menuItem`}\n onClick={logout}\n sentiment=\"neutral\"\n >\n Log out\n </Button>\n </Toolbar>\n );\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
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-
|
|
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-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";
|
|
2
2
|
|
|
3
3
|
export { loginPanelCss as default };
|
|
4
4
|
//# sourceMappingURL=LoginPanel.css.js.map
|
package/esm/login/LoginPanel.js
CHANGED
|
@@ -1 +1 @@
|
|
|
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
|
|
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 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 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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"}
|
package/esm/shell.css.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var shellCss = ".vuuShell {\n background-color: var(\n --vuuShell-background,\n var(--salt-container-primary-background)\n );\n height: var(--vuuShell-height, 100vh);\n width: var(--vuuShell-width, 100vw);\n\n .left-main-tabs {\n --vuuOverflowContainer-width: 48px;\n }\n}\n\n.vuu-workspace-tabs {\n background: var(\n --vuuWorkspace-background,\n var(--salt-container-primary-background)\n );\n}\n\n.vuuShell-palette {\n --vuuView-border: none;\n --vuuView-margin: 0;\n}\n\n.vuuShell-warningPlaceholder {\n background-color: var(--salt-container-background-high);\n height: 100%;\n}\n\n/* until we reinstat5e the toolbar */\n.vuuToolbarProxy {\n background: var(--salt-container-primary-background);\n}\n\n.vuu-workspace-tabs > .vuuTabstrip > .vuuOverflowContainer-wrapContainer {\n background: var(--vuuShell-background, var(--
|
|
1
|
+
var shellCss = ".vuuShell {\n background-color: var(\n --vuuShell-background,\n var(--salt-container-primary-background)\n );\n height: var(--vuuShell-height, 100vh);\n width: var(--vuuShell-width, 100vw);\n\n .left-main-tabs {\n --vuuOverflowContainer-width: 48px;\n }\n}\n\n.vuu-workspace-tabs {\n background: var(\n --vuuWorkspace-background,\n var(--salt-container-primary-background)\n );\n}\n\n.vuuShell-palette {\n --vuuView-border: none;\n --vuuView-margin: 0;\n}\n\n.vuuShell-warningPlaceholder {\n background-color: var(--salt-container-background-high);\n height: 100%;\n}\n\n/* until we reinstat5e the toolbar */\n.vuuToolbarProxy {\n background: var(--salt-container-primary-background);\n}\n\n.vuu-workspace-tabs > .vuuTabstrip > .vuuOverflowContainer-wrapContainer {\n background: var(--vuuShell-background, var(--vuu-color-gray-25));\n}\n\n.vuu-workspace-tabs {\n --vuuTab-height: 28px;\n border: solid 1px var(--salt-separable-primary-borderColor);\n border-top: none !important;\n border-radius: 6px;\n height: 100%;\n padding: 36px 8px 8px 8px;\n position: relative;\n width: 100%;\n}\n\n.vuu-workspace-tabs > .vuuTabstrip {\n left: 0px;\n padding-bottom: 7px;\n position: absolute !important;\n right: 0px;\n top: 0;\n}\n\n.vuuShell-content {\n padding: var(--vuuShell-content-padding, 8px);\n}\n";
|
|
2
2
|
|
|
3
3
|
export { shellCss as default };
|
|
4
4
|
//# sourceMappingURL=shell.css.js.map
|
package/package.json
CHANGED
|
@@ -1,26 +1,26 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "0.13.110
|
|
2
|
+
"version": "0.13.110",
|
|
3
3
|
"description": "VUU UI Shell",
|
|
4
4
|
"author": "heswell",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"devDependencies": {
|
|
7
|
-
"@vuu-ui/vuu-data-types": "0.13.110
|
|
8
|
-
"@vuu-ui/vuu-protocol-types": "0.13.110
|
|
9
|
-
"@vuu-ui/vuu-table-types": "0.13.110
|
|
7
|
+
"@vuu-ui/vuu-data-types": "0.13.110",
|
|
8
|
+
"@vuu-ui/vuu-protocol-types": "0.13.110",
|
|
9
|
+
"@vuu-ui/vuu-table-types": "0.13.110"
|
|
10
10
|
},
|
|
11
11
|
"dependencies": {
|
|
12
|
-
"@salt-ds/core": "1.
|
|
12
|
+
"@salt-ds/core": "1.48.0",
|
|
13
13
|
"@salt-ds/styles": "0.2.1",
|
|
14
14
|
"@salt-ds/window": "0.1.1",
|
|
15
|
-
"@vuu-ui/vuu-context-menu": "0.13.110
|
|
16
|
-
"@vuu-ui/vuu-data-react": "0.13.110
|
|
17
|
-
"@vuu-ui/vuu-data-remote": "0.13.110
|
|
18
|
-
"@vuu-ui/vuu-icons": "0.13.110
|
|
19
|
-
"@vuu-ui/vuu-layout": "0.13.110
|
|
20
|
-
"@vuu-ui/vuu-notifications": "0.13.110
|
|
21
|
-
"@vuu-ui/vuu-table": "0.13.110
|
|
22
|
-
"@vuu-ui/vuu-ui-controls": "0.13.110
|
|
23
|
-
"@vuu-ui/vuu-utils": "0.13.110
|
|
15
|
+
"@vuu-ui/vuu-context-menu": "0.13.110",
|
|
16
|
+
"@vuu-ui/vuu-data-react": "0.13.110",
|
|
17
|
+
"@vuu-ui/vuu-data-remote": "0.13.110",
|
|
18
|
+
"@vuu-ui/vuu-icons": "0.13.110",
|
|
19
|
+
"@vuu-ui/vuu-layout": "0.13.110",
|
|
20
|
+
"@vuu-ui/vuu-notifications": "0.13.110",
|
|
21
|
+
"@vuu-ui/vuu-table": "0.13.110",
|
|
22
|
+
"@vuu-ui/vuu-ui-controls": "0.13.110",
|
|
23
|
+
"@vuu-ui/vuu-utils": "0.13.110",
|
|
24
24
|
"html-to-image": "^1.11.11"
|
|
25
25
|
},
|
|
26
26
|
"peerDependencies": {
|