@vuu-ui/vuu-shell 1.0.3 → 2.0.0
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/application-provider/ApplicationProvider.js +4 -1
- package/cjs/application-provider/ApplicationProvider.js.map +1 -1
- package/cjs/login/LoginPanel.js +1 -0
- package/cjs/login/LoginPanel.js.map +1 -1
- package/cjs/shell-layout-templates/context-panel/ContextPanel.css.js +1 -1
- package/esm/application-provider/ApplicationProvider.js +5 -2
- package/esm/application-provider/ApplicationProvider.js.map +1 -1
- package/esm/login/LoginPanel.js +1 -0
- package/esm/login/LoginPanel.js.map +1 -1
- package/esm/shell-layout-templates/context-panel/ContextPanel.css.js +1 -1
- package/package.json +13 -13
|
@@ -8,6 +8,7 @@ var PersistenceProvider = require('../persistence-manager/PersistenceProvider.js
|
|
|
8
8
|
require('../persistence-manager/LocalPersistenceManager.js');
|
|
9
9
|
require('../persistence-manager/StaticPersistenceManager.js');
|
|
10
10
|
|
|
11
|
+
const accentPurple = "purple";
|
|
11
12
|
const getThemeMode = (mode = "light", userSettings) => {
|
|
12
13
|
const themeMode = userSettings?.themeMode;
|
|
13
14
|
if (themeMode === "light" || themeMode === "dark") {
|
|
@@ -59,8 +60,10 @@ const ApplicationProvider = ({
|
|
|
59
60
|
user: user ?? context.user
|
|
60
61
|
},
|
|
61
62
|
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
62
|
-
core.
|
|
63
|
+
core.SaltProviderNext,
|
|
63
64
|
{
|
|
65
|
+
accent: accentPurple,
|
|
66
|
+
corner: "rounded",
|
|
64
67
|
theme: theme ?? inheritedTheme ?? "vuu-theme",
|
|
65
68
|
density,
|
|
66
69
|
mode: getThemeMode(mode ?? inheritedMode, userSettings),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ApplicationProvider.js","sources":["../../../../packages/vuu-shell/src/application-provider/ApplicationProvider.tsx"],"sourcesContent":["import { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport {\n Density,\n Mode,\n
|
|
1
|
+
{"version":3,"file":"ApplicationProvider.js","sources":["../../../../packages/vuu-shell/src/application-provider/ApplicationProvider.tsx"],"sourcesContent":["import { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport {\n Accent,\n Density,\n Mode,\n SaltProviderNext,\n ThemeContextProps,\n useDensity,\n useTheme,\n} from \"@salt-ds/core\";\nimport {\n ReactElement,\n ReactNode,\n useCallback,\n useContext,\n useMemo,\n useState,\n} from \"react\";\nimport {\n ApplicationContext,\n ApplicationContextProps,\n} from \"./ApplicationContext\";\nimport { usePersistenceManager } from \"../persistence-manager\";\n\nexport interface ApplicationProviderProps\n extends Partial<Pick<ThemeContextProps, \"theme\" | \"mode\">>,\n Partial<Omit<ApplicationContextProps, \"userSettings\">> {\n children: ReactNode;\n density?: Density;\n}\n\nconst accentPurple = \"purple\" as Accent;\n\nconst getThemeMode = (\n mode: Mode = \"light\",\n userSettings?: Record<string, string | number | boolean>,\n) => {\n const themeMode = userSettings?.themeMode;\n if (themeMode === \"light\" || themeMode === \"dark\") {\n return themeMode;\n }\n return mode;\n};\n\nexport const ApplicationProvider = ({\n children,\n density: densityProp,\n logout,\n mode,\n theme,\n userSettingsSchema: userSettingsSchema,\n user,\n}: ApplicationProviderProps): ReactElement | null => {\n const { mode: inheritedMode, theme: inheritedTheme } = useTheme();\n const density = useDensity(densityProp);\n const persistenceManager = usePersistenceManager();\n const context = useContext(ApplicationContext);\n const [userSettings, setSettings] =\n useState<Record<string, string | number | boolean>>();\n\n useMemo(async () => {\n if (persistenceManager) {\n const userSettings = await persistenceManager.getUserSettings();\n setSettings(userSettings);\n } else {\n setSettings({});\n }\n }, [persistenceManager]);\n\n const onUserSettingChanged = useCallback(\n (propertyName: string, value: VuuRowDataItemType) => {\n setSettings((currentSettings) => {\n const newSettings = { ...currentSettings, [propertyName]: value };\n persistenceManager?.saveUserSettings(newSettings);\n return newSettings;\n });\n },\n [persistenceManager],\n );\n\n return userSettings ? (\n <ApplicationContext.Provider\n value={{\n ...context,\n logout,\n onUserSettingChanged,\n userSettings,\n userSettingsSchema,\n user: user ?? context.user,\n }}\n >\n <SaltProviderNext\n accent={accentPurple}\n corner=\"rounded\"\n theme={theme ?? inheritedTheme ?? \"vuu-theme\"}\n density={density}\n mode={getThemeMode(mode ?? inheritedMode, userSettings)}\n >\n {children}\n </SaltProviderNext>\n </ApplicationContext.Provider>\n ) : null;\n};\n\nexport const useApplicationUser = () => {\n const { user } = useContext(ApplicationContext);\n return user;\n};\n\n//Setter method (only used within the shell)\nexport const useApplicationSettings = () => {\n const { onUserSettingChanged, userSettings, userSettingsSchema } =\n useContext(ApplicationContext);\n return {\n onUserSettingChanged,\n userSettings,\n userSettingsSchema,\n };\n};\n\n//Getter method (read only access to applicationSetting)\nexport const useUserSetting = () => {\n const { userSettings } = useContext(ApplicationContext);\n return userSettings;\n};\n\nexport const useLogout = () => {\n const { logout } = useContext(ApplicationContext);\n return logout;\n};\n"],"names":["useTheme","useDensity","usePersistenceManager","useContext","ApplicationContext","useState","useMemo","userSettings","useCallback","jsx","SaltProviderNext"],"mappings":"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"}
|
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 bordered\n value={username}\n id=\"text-username\"\n inputRef={inputRef}\n onChange={handleUsername}\n onCommit={handleCommitName}\n />\n </FormField>\n\n <FormField>\n <FormFieldLabel>Password</FormFieldLabel>\n <VuuInput\n 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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"}
|
|
1
|
+
{"version":3,"file":"LoginPanel.js","sources":["../../../../packages/vuu-shell/src/login/LoginPanel.tsx"],"sourcesContent":["import { VuuInput } from \"@vuu-ui/vuu-ui-controls\";\nimport { Button, FormField, FormFieldLabel } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n ChangeEvent,\n HTMLAttributes,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport { VuuLogo } from \"./VuuLogo\";\n\nimport loginPanelCss from \"./LoginPanel.css\";\n\nconst classBase = \"vuuLoginPanel\";\n\nexport interface LoginPanelProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"onSubmit\"> {\n appName?: string;\n onSubmit: (username: string, password: string) => void;\n}\n\nexport const LoginPanel = ({\n appName = \"Demo App\",\n className,\n onSubmit,\n ...htmlAttributes\n}: LoginPanelProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-login-panel\",\n css: loginPanelCss,\n window: targetWindow,\n });\n\n const [username, setUserName] = useState(\"\");\n const [password, setPassword] = useState(\"\");\n const inputRef = useRef<HTMLInputElement>(null);\n\n const login = () => {\n onSubmit(username, password);\n };\n\n const handleUsername = (evt: ChangeEvent<HTMLInputElement>) => {\n setUserName(evt.target.value);\n };\n\n const handlePassword = (evt: ChangeEvent<HTMLInputElement>) => {\n setPassword(evt.target.value);\n };\n\n const handleCommitName = useCallback(() => {\n if (password) {\n onSubmit(username, password);\n }\n }, [onSubmit, password, username]);\n\n const handleCommitPassword = useCallback(() => {\n if (username) {\n onSubmit(username, password);\n }\n }, [onSubmit, password, username]);\n\n const dataIsValid = username.trim() !== \"\" && password.trim() !== \"\";\n\n useEffect(() => {\n console.log(`inputRef`, {\n input: inputRef.current,\n });\n inputRef.current?.focus();\n }, []);\n\n return (\n <div {...htmlAttributes} className={cx(classBase, className)}>\n <div className={`${classBase}-branding`}>\n <VuuLogo />\n <div className={`${classBase}-appName`}>{appName}</div>\n </div>\n <div className={`${classBase}-form`}>\n <div className={`${classBase}-title`}>Welcome Back</div>\n <FormField>\n <FormFieldLabel>Username</FormFieldLabel>\n <VuuInput\n bordered\n value={username}\n id=\"text-username\"\n inputRef={inputRef}\n onChange={handleUsername}\n onCommit={handleCommitName}\n />\n </FormField>\n\n <FormField>\n <FormFieldLabel>Password</FormFieldLabel>\n <VuuInput\n bordered\n className={`${classBase}-password`}\n inputProps={{\n type: \"password\",\n }}\n value={password}\n id=\"text-password\"\n onChange={handlePassword}\n onCommit={handleCommitPassword}\n endAdornment={\n <span data-icon=\"eye\" style={{ cursor: \"pointer\" }} />\n }\n />\n </FormField>\n\n <Button\n appearance=\"solid\"\n className={`${classBase}-login`}\n disabled={!dataIsValid}\n onClick={login}\n sentiment=\"accented\"\n >\n Login\n </Button>\n </div>\n </div>\n );\n};\n"],"names":["useWindow","useComponentCssInjection","loginPanelCss","useState","useRef","useCallback","useEffect","jsxs","jsx","VuuLogo","FormField","FormFieldLabel","VuuInput","Button"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var contextPanelCss = ".vuuContextPanel {\n background: var(--vuuContextPanel-background, var(--salt-container-primary-background));\n position: relative;\n transition: width 0.3s ease-in-out;\n width: var(--vuu-side-panel-width, 0px) !important;\n z-index: 1;\n}\n\n.vuuContextPanel-expanded {\n --vuu-side-panel-width: var(--vuuContextPanel-width, 300px) !important;\n --vuu-side-panel-shadow: -4px 4px 4px rgba(0, 0, 0, 0.1);\n --vuu-side-panel-padding: var(--vuuContextPanel-padding, 24px);\n\n .vuuView.vuuContextPanel-inner {\n padding: 24px 8px 24px
|
|
3
|
+
var contextPanelCss = ".vuuContextPanel {\n --header-height: var(--vuuContextPanel-header-height, 48px);\n background: var(--vuuContextPanel-background, var(--salt-container-primary-background));\n position: relative;\n transition: width 0.3s ease-in-out;\n width: var(--vuu-side-panel-width, 0px) !important;\n z-index: 1;\n}\n\n.vuuContextPanel-expanded {\n --vuu-side-panel-width: var(--vuuContextPanel-width, 300px) !important;\n --vuu-side-panel-shadow: -4px 4px 4px rgba(0, 0, 0, 0.1);\n --vuu-side-panel-padding: var(--vuuContextPanel-padding, 24px);\n\n .vuuView.vuuContextPanel-inner {\n padding: 24px 8px 24px 18px;\n }\n}\n\n.vuuContextPanel-overlay {\n width: 0px !important;\n}\n\n.vuuView.vuuContextPanel-inner {\n background-color: inherit;\n box-shadow: var(--vuu-side-panel-shadow, none);\n display: flex;\n flex-direction: column;\n height: 100%;\n min-width: 0 !important;\n overflow: auto;\n position: absolute !important;\n right: 0;\n top: 0;\n transition-property: padding-left, padding-right, width;\n transition-duration: 0.3s;\n transition-timing-function: ease-in-out;\n width: var(--vuu-side-panel-width, 0px);\n}\n\n.vuuContextPanel-header {\n align-items: center;\n display: flex;\n flex-wrap: nowrap;\n flex: 0 0 var(--header-height) !important;\n justify-content: space-between;\n}\n\n.vuuContextPanel-title {\n font-size: 20px;\n font-weight: 700;\n white-space: nowrap;\n}\n\n.vuuContextPanel-content {\n flex: 1 1 auto;\n overflow-y: auto;\n padding-right: 16px;\n position: relative;\n width: 100%;\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = contextPanelCss;
|
|
6
6
|
//# sourceMappingURL=ContextPanel.css.js.map
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { useTheme, useDensity,
|
|
2
|
+
import { useTheme, useDensity, SaltProviderNext } from '@salt-ds/core';
|
|
3
3
|
import { useContext, useState, useMemo, useCallback } from 'react';
|
|
4
4
|
import { ApplicationContext } from './ApplicationContext.js';
|
|
5
5
|
import { usePersistenceManager } from '../persistence-manager/PersistenceProvider.js';
|
|
6
6
|
import '../persistence-manager/LocalPersistenceManager.js';
|
|
7
7
|
import '../persistence-manager/StaticPersistenceManager.js';
|
|
8
8
|
|
|
9
|
+
const accentPurple = "purple";
|
|
9
10
|
const getThemeMode = (mode = "light", userSettings) => {
|
|
10
11
|
const themeMode = userSettings?.themeMode;
|
|
11
12
|
if (themeMode === "light" || themeMode === "dark") {
|
|
@@ -57,8 +58,10 @@ const ApplicationProvider = ({
|
|
|
57
58
|
user: user ?? context.user
|
|
58
59
|
},
|
|
59
60
|
children: /* @__PURE__ */ jsx(
|
|
60
|
-
|
|
61
|
+
SaltProviderNext,
|
|
61
62
|
{
|
|
63
|
+
accent: accentPurple,
|
|
64
|
+
corner: "rounded",
|
|
62
65
|
theme: theme ?? inheritedTheme ?? "vuu-theme",
|
|
63
66
|
density,
|
|
64
67
|
mode: getThemeMode(mode ?? inheritedMode, userSettings),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ApplicationProvider.js","sources":["../../../../packages/vuu-shell/src/application-provider/ApplicationProvider.tsx"],"sourcesContent":["import { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport {\n Density,\n Mode,\n
|
|
1
|
+
{"version":3,"file":"ApplicationProvider.js","sources":["../../../../packages/vuu-shell/src/application-provider/ApplicationProvider.tsx"],"sourcesContent":["import { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport {\n Accent,\n Density,\n Mode,\n SaltProviderNext,\n ThemeContextProps,\n useDensity,\n useTheme,\n} from \"@salt-ds/core\";\nimport {\n ReactElement,\n ReactNode,\n useCallback,\n useContext,\n useMemo,\n useState,\n} from \"react\";\nimport {\n ApplicationContext,\n ApplicationContextProps,\n} from \"./ApplicationContext\";\nimport { usePersistenceManager } from \"../persistence-manager\";\n\nexport interface ApplicationProviderProps\n extends Partial<Pick<ThemeContextProps, \"theme\" | \"mode\">>,\n Partial<Omit<ApplicationContextProps, \"userSettings\">> {\n children: ReactNode;\n density?: Density;\n}\n\nconst accentPurple = \"purple\" as Accent;\n\nconst getThemeMode = (\n mode: Mode = \"light\",\n userSettings?: Record<string, string | number | boolean>,\n) => {\n const themeMode = userSettings?.themeMode;\n if (themeMode === \"light\" || themeMode === \"dark\") {\n return themeMode;\n }\n return mode;\n};\n\nexport const ApplicationProvider = ({\n children,\n density: densityProp,\n logout,\n mode,\n theme,\n userSettingsSchema: userSettingsSchema,\n user,\n}: ApplicationProviderProps): ReactElement | null => {\n const { mode: inheritedMode, theme: inheritedTheme } = useTheme();\n const density = useDensity(densityProp);\n const persistenceManager = usePersistenceManager();\n const context = useContext(ApplicationContext);\n const [userSettings, setSettings] =\n useState<Record<string, string | number | boolean>>();\n\n useMemo(async () => {\n if (persistenceManager) {\n const userSettings = await persistenceManager.getUserSettings();\n setSettings(userSettings);\n } else {\n setSettings({});\n }\n }, [persistenceManager]);\n\n const onUserSettingChanged = useCallback(\n (propertyName: string, value: VuuRowDataItemType) => {\n setSettings((currentSettings) => {\n const newSettings = { ...currentSettings, [propertyName]: value };\n persistenceManager?.saveUserSettings(newSettings);\n return newSettings;\n });\n },\n [persistenceManager],\n );\n\n return userSettings ? (\n <ApplicationContext.Provider\n value={{\n ...context,\n logout,\n onUserSettingChanged,\n userSettings,\n userSettingsSchema,\n user: user ?? context.user,\n }}\n >\n <SaltProviderNext\n accent={accentPurple}\n corner=\"rounded\"\n theme={theme ?? inheritedTheme ?? \"vuu-theme\"}\n density={density}\n mode={getThemeMode(mode ?? inheritedMode, userSettings)}\n >\n {children}\n </SaltProviderNext>\n </ApplicationContext.Provider>\n ) : null;\n};\n\nexport const useApplicationUser = () => {\n const { user } = useContext(ApplicationContext);\n return user;\n};\n\n//Setter method (only used within the shell)\nexport const useApplicationSettings = () => {\n const { onUserSettingChanged, userSettings, userSettingsSchema } =\n useContext(ApplicationContext);\n return {\n onUserSettingChanged,\n userSettings,\n userSettingsSchema,\n };\n};\n\n//Getter method (read only access to applicationSetting)\nexport const useUserSetting = () => {\n const { userSettings } = useContext(ApplicationContext);\n return userSettings;\n};\n\nexport const useLogout = () => {\n const { logout } = useContext(ApplicationContext);\n return logout;\n};\n"],"names":["userSettings"],"mappings":"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"}
|
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 bordered\n value={username}\n id=\"text-username\"\n inputRef={inputRef}\n onChange={handleUsername}\n onCommit={handleCommitName}\n />\n </FormField>\n\n <FormField>\n <FormFieldLabel>Password</FormFieldLabel>\n <VuuInput\n 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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"}
|
|
1
|
+
{"version":3,"file":"LoginPanel.js","sources":["../../../../packages/vuu-shell/src/login/LoginPanel.tsx"],"sourcesContent":["import { VuuInput } from \"@vuu-ui/vuu-ui-controls\";\nimport { Button, FormField, FormFieldLabel } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n ChangeEvent,\n HTMLAttributes,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport { VuuLogo } from \"./VuuLogo\";\n\nimport loginPanelCss from \"./LoginPanel.css\";\n\nconst classBase = \"vuuLoginPanel\";\n\nexport interface LoginPanelProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"onSubmit\"> {\n appName?: string;\n onSubmit: (username: string, password: string) => void;\n}\n\nexport const LoginPanel = ({\n appName = \"Demo App\",\n className,\n onSubmit,\n ...htmlAttributes\n}: LoginPanelProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-login-panel\",\n css: loginPanelCss,\n window: targetWindow,\n });\n\n const [username, setUserName] = useState(\"\");\n const [password, setPassword] = useState(\"\");\n const inputRef = useRef<HTMLInputElement>(null);\n\n const login = () => {\n onSubmit(username, password);\n };\n\n const handleUsername = (evt: ChangeEvent<HTMLInputElement>) => {\n setUserName(evt.target.value);\n };\n\n const handlePassword = (evt: ChangeEvent<HTMLInputElement>) => {\n setPassword(evt.target.value);\n };\n\n const handleCommitName = useCallback(() => {\n if (password) {\n onSubmit(username, password);\n }\n }, [onSubmit, password, username]);\n\n const handleCommitPassword = useCallback(() => {\n if (username) {\n onSubmit(username, password);\n }\n }, [onSubmit, password, username]);\n\n const dataIsValid = username.trim() !== \"\" && password.trim() !== \"\";\n\n useEffect(() => {\n console.log(`inputRef`, {\n input: inputRef.current,\n });\n inputRef.current?.focus();\n }, []);\n\n return (\n <div {...htmlAttributes} className={cx(classBase, className)}>\n <div className={`${classBase}-branding`}>\n <VuuLogo />\n <div className={`${classBase}-appName`}>{appName}</div>\n </div>\n <div className={`${classBase}-form`}>\n <div className={`${classBase}-title`}>Welcome Back</div>\n <FormField>\n <FormFieldLabel>Username</FormFieldLabel>\n <VuuInput\n bordered\n value={username}\n id=\"text-username\"\n inputRef={inputRef}\n onChange={handleUsername}\n onCommit={handleCommitName}\n />\n </FormField>\n\n <FormField>\n <FormFieldLabel>Password</FormFieldLabel>\n <VuuInput\n bordered\n className={`${classBase}-password`}\n inputProps={{\n type: \"password\",\n }}\n value={password}\n id=\"text-password\"\n onChange={handlePassword}\n onCommit={handleCommitPassword}\n endAdornment={\n <span data-icon=\"eye\" style={{ cursor: \"pointer\" }} />\n }\n />\n </FormField>\n\n <Button\n appearance=\"solid\"\n className={`${classBase}-login`}\n disabled={!dataIsValid}\n onClick={login}\n sentiment=\"accented\"\n >\n Login\n </Button>\n </div>\n </div>\n );\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var contextPanelCss = ".vuuContextPanel {\n background: var(--vuuContextPanel-background, var(--salt-container-primary-background));\n position: relative;\n transition: width 0.3s ease-in-out;\n width: var(--vuu-side-panel-width, 0px) !important;\n z-index: 1;\n}\n\n.vuuContextPanel-expanded {\n --vuu-side-panel-width: var(--vuuContextPanel-width, 300px) !important;\n --vuu-side-panel-shadow: -4px 4px 4px rgba(0, 0, 0, 0.1);\n --vuu-side-panel-padding: var(--vuuContextPanel-padding, 24px);\n\n .vuuView.vuuContextPanel-inner {\n padding: 24px 8px 24px
|
|
1
|
+
var contextPanelCss = ".vuuContextPanel {\n --header-height: var(--vuuContextPanel-header-height, 48px);\n background: var(--vuuContextPanel-background, var(--salt-container-primary-background));\n position: relative;\n transition: width 0.3s ease-in-out;\n width: var(--vuu-side-panel-width, 0px) !important;\n z-index: 1;\n}\n\n.vuuContextPanel-expanded {\n --vuu-side-panel-width: var(--vuuContextPanel-width, 300px) !important;\n --vuu-side-panel-shadow: -4px 4px 4px rgba(0, 0, 0, 0.1);\n --vuu-side-panel-padding: var(--vuuContextPanel-padding, 24px);\n\n .vuuView.vuuContextPanel-inner {\n padding: 24px 8px 24px 18px;\n }\n}\n\n.vuuContextPanel-overlay {\n width: 0px !important;\n}\n\n.vuuView.vuuContextPanel-inner {\n background-color: inherit;\n box-shadow: var(--vuu-side-panel-shadow, none);\n display: flex;\n flex-direction: column;\n height: 100%;\n min-width: 0 !important;\n overflow: auto;\n position: absolute !important;\n right: 0;\n top: 0;\n transition-property: padding-left, padding-right, width;\n transition-duration: 0.3s;\n transition-timing-function: ease-in-out;\n width: var(--vuu-side-panel-width, 0px);\n}\n\n.vuuContextPanel-header {\n align-items: center;\n display: flex;\n flex-wrap: nowrap;\n flex: 0 0 var(--header-height) !important;\n justify-content: space-between;\n}\n\n.vuuContextPanel-title {\n font-size: 20px;\n font-weight: 700;\n white-space: nowrap;\n}\n\n.vuuContextPanel-content {\n flex: 1 1 auto;\n overflow-y: auto;\n padding-right: 16px;\n position: relative;\n width: 100%;\n}\n";
|
|
2
2
|
|
|
3
3
|
export { contextPanelCss as default };
|
|
4
4
|
//# sourceMappingURL=ContextPanel.css.js.map
|
package/package.json
CHANGED
|
@@ -1,26 +1,26 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "
|
|
2
|
+
"version": "2.0.0",
|
|
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": "
|
|
8
|
-
"@vuu-ui/vuu-protocol-types": "
|
|
9
|
-
"@vuu-ui/vuu-table-types": "
|
|
7
|
+
"@vuu-ui/vuu-data-types": "2.0.0",
|
|
8
|
+
"@vuu-ui/vuu-protocol-types": "2.0.0",
|
|
9
|
+
"@vuu-ui/vuu-table-types": "2.0.0"
|
|
10
10
|
},
|
|
11
11
|
"dependencies": {
|
|
12
12
|
"@salt-ds/core": "1.54.1",
|
|
13
13
|
"@salt-ds/styles": "0.2.1",
|
|
14
14
|
"@salt-ds/window": "0.1.1",
|
|
15
|
-
"@vuu-ui/vuu-context-menu": "
|
|
16
|
-
"@vuu-ui/vuu-data-react": "
|
|
17
|
-
"@vuu-ui/vuu-data-remote": "
|
|
18
|
-
"@vuu-ui/vuu-icons": "
|
|
19
|
-
"@vuu-ui/vuu-layout": "
|
|
20
|
-
"@vuu-ui/vuu-notifications": "
|
|
21
|
-
"@vuu-ui/vuu-table": "
|
|
22
|
-
"@vuu-ui/vuu-ui-controls": "
|
|
23
|
-
"@vuu-ui/vuu-utils": "
|
|
15
|
+
"@vuu-ui/vuu-context-menu": "2.0.0",
|
|
16
|
+
"@vuu-ui/vuu-data-react": "2.0.0",
|
|
17
|
+
"@vuu-ui/vuu-data-remote": "2.0.0",
|
|
18
|
+
"@vuu-ui/vuu-icons": "2.0.0",
|
|
19
|
+
"@vuu-ui/vuu-layout": "2.0.0",
|
|
20
|
+
"@vuu-ui/vuu-notifications": "2.0.0",
|
|
21
|
+
"@vuu-ui/vuu-table": "2.0.0",
|
|
22
|
+
"@vuu-ui/vuu-ui-controls": "2.0.0",
|
|
23
|
+
"@vuu-ui/vuu-utils": "2.0.0",
|
|
24
24
|
"html-to-image": "^1.11.11"
|
|
25
25
|
},
|
|
26
26
|
"peerDependencies": {
|