@vuu-ui/vuu-layout 0.8.60 → 0.8.62
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/layout-header/Header.js +1 -0
- package/cjs/layout-header/Header.js.map +1 -1
- package/cjs/palette/Palette.css.js +1 -1
- package/cjs/palette/Palette.js +2 -3
- package/cjs/palette/Palette.js.map +1 -1
- package/esm/layout-header/Header.js +1 -0
- package/esm/layout-header/Header.js.map +1 -1
- package/esm/palette/Palette.css.js +1 -1
- package/esm/palette/Palette.js +2 -3
- package/esm/palette/Palette.js.map +1 -1
- package/package.json +9 -9
- package/types/palette/Palette.d.ts +6 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Header.js","sources":["../../src/layout-header/Header.tsx"],"sourcesContent":["import { EditableLabel, IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n cloneElement,\n HTMLAttributes,\n KeyboardEvent,\n MouseEvent,\n ReactElement,\n useRef,\n useState,\n} from \"react\";\nimport { Contribution, useViewDispatch } from \"../layout-view-actions\";\n\nimport headerCss from \"./Header.css\";\n\nexport interface HeaderProps extends HTMLAttributes<HTMLDivElement> {\n collapsed?: boolean;\n contributions?: Contribution[];\n expanded?: boolean;\n closeable?: boolean;\n onEditTitle: (value: string) => void;\n orientation?: \"horizontal\" | \"vertical\";\n tearOut?: boolean;\n}\n\nconst classBase = \"vuuHeader\";\n\nexport const Header = ({\n className: classNameProp,\n contributions,\n collapsed,\n closeable,\n onEditTitle,\n orientation: orientationProp = \"horizontal\",\n style,\n title = \"Untitled\",\n}: HeaderProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-header\",\n css: headerCss,\n window: targetWindow,\n });\n\n const labelFieldRef = useRef<HTMLDivElement>(null);\n const [value, setValue] = useState<string>(title);\n const [editing, setEditing] = useState<boolean>(false);\n\n const viewDispatch = useViewDispatch();\n const handleClose = (evt: MouseEvent) =>\n viewDispatch?.({ type: \"remove\" }, evt);\n\n const handleTitleMouseDown = () => {\n labelFieldRef.current?.focus();\n };\n\n const handleButtonMouseDown = (evt: MouseEvent) => {\n // do not allow drag to be initiated\n evt.stopPropagation();\n };\n\n const orientation = collapsed || orientationProp;\n\n const className = cx(classBase, classNameProp, `${classBase}-${orientation}`);\n\n const handleEnterEditMode = () => {\n setEditing(true);\n };\n\n const handleTitleKeyDown = (evt: KeyboardEvent<HTMLDivElement>) => {\n if (evt.key === \"Enter\") {\n setEditing(true);\n }\n };\n\n const handleExitEditMode = (\n originalValue = \"\",\n finalValue = \"\",\n allowDeactivation = true,\n editCancelled = false\n ) => {\n setEditing(false);\n if (editCancelled) {\n setValue(originalValue);\n } else if (finalValue !== originalValue) {\n setValue(finalValue);\n onEditTitle?.(finalValue);\n }\n if (allowDeactivation === false) {\n labelFieldRef.current?.focus();\n }\n };\n\n const handleMouseDown = (e: MouseEvent) => {\n viewDispatch?.({ type: \"mousedown\" }, e);\n };\n\n const toolbarItems: ReactElement[] = [];\n const postTitleContributedItems: ReactElement[] = [];\n const actionButtons: ReactElement[] = [];\n\n contributions?.forEach((contribution, i) => {\n switch (contribution.location) {\n case \"pre-title\":\n toolbarItems.push(cloneElement(contribution.content, { key: i }));\n break;\n default:\n postTitleContributedItems.push(\n cloneElement(contribution.content, { key: i })\n );\n }\n });\n\n title &&\n toolbarItems.push(\n <EditableLabel\n className={`${classBase}-title`}\n editing={editing}\n key=\"title\"\n value={value}\n onChange={setValue}\n onMouseDownCapture={handleTitleMouseDown}\n onEnterEditMode={handleEnterEditMode}\n onExitEditMode={handleExitEditMode}\n onKeyDown={handleTitleKeyDown}\n ref={labelFieldRef}\n tabIndex={0}\n />\n );\n\n closeable &&\n actionButtons.push(\n <IconButton\n icon=\"close\"\n key=\"close\"\n onClick={handleClose}\n onMouseDown={handleButtonMouseDown}\n variant=\"secondary\"\n />\n );\n\n postTitleContributedItems.length > 0 &&\n toolbarItems.push(\n <div className=\"vuuTooltrayProxy\" data-align=\"end\" key=\"contributions\">\n {postTitleContributedItems}\n </div>\n );\n\n actionButtons.length > 0 &&\n toolbarItems.push(\n <div className=\"vuuTooltrayProxy\" data-align=\"end\" key=\"actions\">\n {actionButtons}\n </div>\n );\n\n return (\n <div\n className={cx(\"vuuToolbarProxy\", className)}\n style={style}\n onMouseDown={handleMouseDown}\n >\n {toolbarItems}\n {/* \n {collapsed === false ? (\n <ActionButton\n aria-label=\"Minimize View\"\n actionId=\"minimize\"\n iconName=\"minimize\"\n onClick={handleAction}\n onMouseDown={handleButtonMouseDown}\n />\n ) : null}\n {collapsed ? (\n <ActionButton\n aria-label=\"Restore View\"\n actionId=\"restore\"\n iconName=\"double-chevron-right\"\n onClick={handleAction}\n onMouseDown={handleButtonMouseDown}\n />\n ) : null}\n {expanded === false ? (\n <ActionButton\n aria-label=\"Maximize View\"\n actionId=\"maximize\"\n iconName=\"maximize\"\n onClick={handleAction}\n onMouseDown={handleButtonMouseDown}\n />\n ) : null}\n {expanded ? (\n <ActionButton\n aria-label=\"Restore View\"\n actionId=\"restore\"\n iconName=\"restore\"\n onClick={handleAction}\n onMouseDown={handleButtonMouseDown}\n />\n ) : null}\n {tearOut ? (\n <ActionButton\n aria-label=\"Tear out View\"\n actionId=\"tearout\"\n iconName=\"tear-out\"\n onClick={handleAction}\n onMouseDown={handleButtonMouseDown}\n />\n ) : null}\n {closeable ? (\n <Button\n aria-label=\"close\"\n data-icon\n onClick={handleClose}\n onMouseDown={handleButtonMouseDown}\n />\n ) : null} */}\n </div>\n );\n};\n"],"names":["useWindow","useComponentCssInjection","headerCss","useRef","useState","useViewDispatch","cloneElement","jsx","EditableLabel","IconButton"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Header.js","sources":["../../src/layout-header/Header.tsx"],"sourcesContent":["import { EditableLabel, IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n cloneElement,\n HTMLAttributes,\n KeyboardEvent,\n MouseEvent,\n ReactElement,\n useRef,\n useState,\n} from \"react\";\nimport { Contribution, useViewDispatch } from \"../layout-view-actions\";\n\nimport headerCss from \"./Header.css\";\n\nexport interface HeaderProps extends HTMLAttributes<HTMLDivElement> {\n collapsed?: boolean;\n contributions?: Contribution[];\n expanded?: boolean;\n closeable?: boolean;\n onEditTitle: (value: string) => void;\n orientation?: \"horizontal\" | \"vertical\";\n tearOut?: boolean;\n}\n\nconst classBase = \"vuuHeader\";\n\nexport const Header = ({\n className: classNameProp,\n contributions,\n collapsed,\n closeable,\n onEditTitle,\n orientation: orientationProp = \"horizontal\",\n style,\n title = \"Untitled\",\n}: HeaderProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-header\",\n css: headerCss,\n window: targetWindow,\n });\n\n const labelFieldRef = useRef<HTMLDivElement>(null);\n const [value, setValue] = useState<string>(title);\n const [editing, setEditing] = useState<boolean>(false);\n\n const viewDispatch = useViewDispatch();\n const handleClose = (evt: MouseEvent) =>\n viewDispatch?.({ type: \"remove\" }, evt);\n\n const handleTitleMouseDown = () => {\n labelFieldRef.current?.focus();\n };\n\n const handleButtonMouseDown = (evt: MouseEvent) => {\n // do not allow drag to be initiated\n evt.stopPropagation();\n };\n\n const orientation = collapsed || orientationProp;\n\n const className = cx(classBase, classNameProp, `${classBase}-${orientation}`);\n\n const handleEnterEditMode = () => {\n setEditing(true);\n };\n\n const handleTitleKeyDown = (evt: KeyboardEvent<HTMLDivElement>) => {\n if (evt.key === \"Enter\") {\n setEditing(true);\n }\n };\n\n const handleExitEditMode = (\n originalValue = \"\",\n finalValue = \"\",\n allowDeactivation = true,\n editCancelled = false\n ) => {\n setEditing(false);\n if (editCancelled) {\n setValue(originalValue);\n } else if (finalValue !== originalValue) {\n setValue(finalValue);\n onEditTitle?.(finalValue);\n }\n if (allowDeactivation === false) {\n labelFieldRef.current?.focus();\n }\n };\n\n const handleMouseDown = (e: MouseEvent) => {\n viewDispatch?.({ type: \"mousedown\" }, e);\n };\n\n const toolbarItems: ReactElement[] = [];\n const postTitleContributedItems: ReactElement[] = [];\n const actionButtons: ReactElement[] = [];\n\n contributions?.forEach((contribution, i) => {\n switch (contribution.location) {\n case \"pre-title\":\n toolbarItems.push(cloneElement(contribution.content, { key: i }));\n break;\n default:\n postTitleContributedItems.push(\n cloneElement(contribution.content, { key: i })\n );\n }\n });\n\n title &&\n toolbarItems.push(\n <EditableLabel\n className={`${classBase}-title`}\n editing={editing}\n key=\"title\"\n value={value}\n onChange={setValue}\n onMouseDownCapture={handleTitleMouseDown}\n onEnterEditMode={handleEnterEditMode}\n onExitEditMode={handleExitEditMode}\n onKeyDown={handleTitleKeyDown}\n ref={labelFieldRef}\n tabIndex={0}\n />\n );\n\n closeable &&\n actionButtons.push(\n <IconButton\n data-embedded\n icon=\"close\"\n key=\"close\"\n onClick={handleClose}\n onMouseDown={handleButtonMouseDown}\n variant=\"secondary\"\n />\n );\n\n postTitleContributedItems.length > 0 &&\n toolbarItems.push(\n <div className=\"vuuTooltrayProxy\" data-align=\"end\" key=\"contributions\">\n {postTitleContributedItems}\n </div>\n );\n\n actionButtons.length > 0 &&\n toolbarItems.push(\n <div className=\"vuuTooltrayProxy\" data-align=\"end\" key=\"actions\">\n {actionButtons}\n </div>\n );\n\n return (\n <div\n className={cx(\"vuuToolbarProxy\", className)}\n style={style}\n onMouseDown={handleMouseDown}\n >\n {toolbarItems}\n {/* \n {collapsed === false ? (\n <ActionButton\n aria-label=\"Minimize View\"\n actionId=\"minimize\"\n iconName=\"minimize\"\n onClick={handleAction}\n onMouseDown={handleButtonMouseDown}\n />\n ) : null}\n {collapsed ? (\n <ActionButton\n aria-label=\"Restore View\"\n actionId=\"restore\"\n iconName=\"double-chevron-right\"\n onClick={handleAction}\n onMouseDown={handleButtonMouseDown}\n />\n ) : null}\n {expanded === false ? (\n <ActionButton\n aria-label=\"Maximize View\"\n actionId=\"maximize\"\n iconName=\"maximize\"\n onClick={handleAction}\n onMouseDown={handleButtonMouseDown}\n />\n ) : null}\n {expanded ? (\n <ActionButton\n aria-label=\"Restore View\"\n actionId=\"restore\"\n iconName=\"restore\"\n onClick={handleAction}\n onMouseDown={handleButtonMouseDown}\n />\n ) : null}\n {tearOut ? (\n <ActionButton\n aria-label=\"Tear out View\"\n actionId=\"tearout\"\n iconName=\"tear-out\"\n onClick={handleAction}\n onMouseDown={handleButtonMouseDown}\n />\n ) : null}\n {closeable ? (\n <Button\n aria-label=\"close\"\n data-icon\n onClick={handleClose}\n onMouseDown={handleButtonMouseDown}\n />\n ) : null} */}\n </div>\n );\n};\n"],"names":["useWindow","useComponentCssInjection","headerCss","useRef","useState","useViewDispatch","cloneElement","jsx","EditableLabel","IconButton"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var paletteCss = ".vuuPalette {\n --vuuList-borderStyle: none;\n}\n\n.vuuPalette-horizontal {\n align-items: center;\n display: flex;\n}\n\n.vuuPaletteItem {\n --vuu-icon-color: var(--salt-content-
|
|
3
|
+
var paletteCss = ".vuuPalette {\n --vuu-svg-draggable: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 17\"><path d=\"M12.6666 6.5H3.33329C2.96663 6.5 2.66663 6.8 2.66663 7.16667C2.66663 7.53333 2.96663 7.83333 3.33329 7.83333H12.6666C13.0333 7.83333 13.3333 7.53333 13.3333 7.16667C13.3333 6.8 13.0333 6.5 12.6666 6.5ZM3.33329 10.5H12.6666C13.0333 10.5 13.3333 10.2 13.3333 9.83333C13.3333 9.46667 13.0333 9.16667 12.6666 9.16667H3.33329C2.96663 9.16667 2.66663 9.46667 2.66663 9.83333C2.66663 10.2 2.96663 10.5 3.33329 10.5Z\" /></svg>');\n --vuuList-borderStyle: none;\n}\n\n.vuuPalette-horizontal {\n align-items: center;\n display: flex;\n}\n\n.vuuPaletteItem {\n --vuu-icon-color: var(--salt-content-secondary-foreground);\n --list-item-text-padding: 0 0 0 calc(var(--salt-size-unit) * 3);\n padding-left: 12px;\n font-size: 12px;\n font-weight: 600;\n gap: var(--salt-spacing-200);\n}\n\n.vuuSimpleDraggableWrapper > .vuuPaletteItem {\n --vuu-icon-color: var(--salt-selectable-foreground);\n}\n\n.salt-theme .vuuPaletteItem {\n font-size: 11px;\n font-weight: normal;\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = paletteCss;
|
|
6
6
|
//# sourceMappingURL=Palette.css.js.map
|
package/cjs/palette/Palette.js
CHANGED
|
@@ -21,7 +21,7 @@ const clonePaletteItem = (paletteItem) => {
|
|
|
21
21
|
const PaletteItem = React.memo(
|
|
22
22
|
({
|
|
23
23
|
className,
|
|
24
|
-
|
|
24
|
+
component,
|
|
25
25
|
idx,
|
|
26
26
|
resizeable,
|
|
27
27
|
header,
|
|
@@ -39,7 +39,6 @@ const PaletteItem = React.memo(
|
|
|
39
39
|
{
|
|
40
40
|
className: cx("vuuPaletteItem", className),
|
|
41
41
|
"data-draggable": true,
|
|
42
|
-
"data-icon": "draggable",
|
|
43
42
|
...props
|
|
44
43
|
}
|
|
45
44
|
);
|
|
@@ -62,7 +61,7 @@ const Palette = ({
|
|
|
62
61
|
const listItemElement = target.closest(".vuuPaletteItem");
|
|
63
62
|
const idx = parseInt(listItemElement.dataset?.index ?? "-1");
|
|
64
63
|
const {
|
|
65
|
-
props: { caption,
|
|
64
|
+
props: { caption, component: payload, template, ...props2 }
|
|
66
65
|
} = children[idx];
|
|
67
66
|
const { ViewProps: componentViewProps } = payload.props;
|
|
68
67
|
const { height, left, top, width } = listItemElement.getBoundingClientRect();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Palette.js","sources":["../../src/palette/Palette.tsx"],"sourcesContent":["import {\n List,\n ListItem,\n ListItemProps,\n ListProps,\n} from \"@vuu-ui/vuu-ui-controls\";\nimport { registerComponent, uuid } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n HTMLAttributes,\n MouseEvent,\n ReactElement,\n cloneElement,\n memo,\n} from \"react\";\nimport { useLayoutProviderDispatch } from \"../layout-provider\";\nimport { View, ViewProps } from \"../layout-view\";\n\nimport paletteCss from \"./Palette.css\";\n\nconst clonePaletteItem = (paletteItem: HTMLElement) => {\n const dolly = paletteItem.cloneNode(true) as HTMLElement;\n dolly.id = \"\";\n delete dolly.dataset.idx;\n return dolly;\n};\n\nexport interface PaletteItemProps extends ListItemProps {\n
|
|
1
|
+
{"version":3,"file":"Palette.js","sources":["../../src/palette/Palette.tsx"],"sourcesContent":["import {\n List,\n ListItem,\n ListItemProps,\n ListProps,\n} from \"@vuu-ui/vuu-ui-controls\";\nimport { registerComponent, uuid } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n HTMLAttributes,\n MouseEvent,\n ReactElement,\n cloneElement,\n memo,\n} from \"react\";\nimport { useLayoutProviderDispatch } from \"../layout-provider\";\nimport { View, ViewProps } from \"../layout-view\";\n\nimport paletteCss from \"./Palette.css\";\n\nconst clonePaletteItem = (paletteItem: HTMLElement) => {\n const dolly = paletteItem.cloneNode(true) as HTMLElement;\n dolly.id = \"\";\n delete dolly.dataset.idx;\n return dolly;\n};\n\nexport interface PaletteItemProps extends ListItemProps {\n /**\n * This is the payload that will be created when the\n * palette item is dropped\n */\n component: ReactElement;\n closeable?: boolean;\n header?: boolean;\n idx?: number;\n resize?: \"defer\";\n resizeable?: boolean;\n}\n\nexport const PaletteItem = memo(\n ({\n className,\n component,\n idx,\n resizeable,\n header,\n closeable,\n ...props\n }: PaletteItemProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-palette\",\n css: paletteCss,\n window: targetWindow,\n });\n\n return (\n <ListItem\n className={cx(\"vuuPaletteItem\", className)}\n data-draggable\n {...props}\n />\n );\n }\n);\n\nPaletteItem.displayName = \"PaletteItem\";\n\nexport interface PaletteProps\n extends Omit<\n HTMLAttributes<HTMLDivElement>,\n \"onDragStart\" | \"onDrop\" | \"onSelect\"\n > {\n ListProps?: Partial<ListProps>;\n ViewProps?: Partial<ViewProps>;\n children: ReactElement[];\n itemHeight?: number;\n orientation: \"horizontal\" | \"vertical\";\n selection?: string;\n}\n\nexport const Palette = ({\n ListProps,\n ViewProps,\n children,\n className,\n itemHeight = 41,\n orientation = \"horizontal\",\n ...props\n}: PaletteProps) => {\n const dispatch = useLayoutProviderDispatch();\n const classBase = \"vuuPalette\";\n\n function handleMouseDown(evt: MouseEvent) {\n const target = evt.target as HTMLElement;\n const listItemElement = target.closest(\".vuuPaletteItem\") as HTMLElement;\n const idx = parseInt(listItemElement.dataset?.index ?? \"-1\");\n const {\n props: { caption, component: payload, template, ...props },\n } = children[idx];\n const { ViewProps: componentViewProps } = payload.props;\n const { height, left, top, width } =\n listItemElement.getBoundingClientRect();\n const id = uuid();\n const identifiers = { id, key: id };\n const component = template ? (\n payload\n ) : (\n <View\n {...ViewProps}\n {...identifiers}\n {...props}\n {...componentViewProps}\n title={props.label}\n >\n {payload}\n </View>\n );\n\n dispatch({\n dragRect: {\n left,\n top,\n right: left + width,\n bottom: top + 150,\n width,\n height,\n },\n dragElement: clonePaletteItem(listItemElement),\n evt: evt.nativeEvent,\n instructions: {\n DoNotRemove: true,\n DoNotTransform: true,\n DriftHomeIfNoDropTarget: true,\n RemoveDraggableOnDragEnd: true,\n dragThreshold: 10,\n },\n path: \"*\",\n payload: component,\n type: \"drag-start\",\n });\n }\n\n return (\n <List\n {...ListProps}\n {...props}\n className={cx(classBase, className, `${classBase}-${orientation}`)}\n itemHeight={itemHeight}\n selected={null}\n >\n {children.map((child, idx) =>\n child.type === PaletteItem\n ? cloneElement(child, {\n key: idx,\n onMouseDown: handleMouseDown,\n })\n : child\n )}\n </List>\n );\n};\n\nregisterComponent(\"Palette\", Palette, \"view\");\n"],"names":["memo","useWindow","useComponentCssInjection","paletteCss","jsx","ListItem","ListProps","ViewProps","useLayoutProviderDispatch","props","uuid","View","List","cloneElement","registerComponent"],"mappings":";;;;;;;;;;;;;;AAsBA,MAAM,gBAAA,GAAmB,CAAC,WAA6B,KAAA;AACrD,EAAM,MAAA,KAAA,GAAQ,WAAY,CAAA,SAAA,CAAU,IAAI,CAAA,CAAA;AACxC,EAAA,KAAA,CAAM,EAAK,GAAA,EAAA,CAAA;AACX,EAAA,OAAO,MAAM,OAAQ,CAAA,GAAA,CAAA;AACrB,EAAO,OAAA,KAAA,CAAA;AACT,CAAA,CAAA;AAeO,MAAM,WAAc,GAAAA,UAAA;AAAA,EACzB,CAAC;AAAA,IACC,SAAA;AAAA,IACA,SAAA;AAAA,IACA,GAAA;AAAA,IACA,UAAA;AAAA,IACA,MAAA;AAAA,IACA,SAAA;AAAA,IACA,GAAG,KAAA;AAAA,GACmB,KAAA;AACtB,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,aAAA;AAAA,MACR,GAAK,EAAAC,SAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IACE,uBAAAC,cAAA;AAAA,MAACC,sBAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,EAAG,CAAA,gBAAA,EAAkB,SAAS,CAAA;AAAA,QACzC,gBAAc,EAAA,IAAA;AAAA,QACb,GAAG,KAAA;AAAA,OAAA;AAAA,KACN,CAAA;AAAA,GAEJ;AACF,EAAA;AAEA,WAAA,CAAY,WAAc,GAAA,aAAA,CAAA;AAenB,MAAM,UAAU,CAAC;AAAA,EACtB,SAAAC,EAAAA,UAAAA;AAAA,EACA,SAAAC,EAAAA,UAAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAa,GAAA,EAAA;AAAA,EACb,WAAc,GAAA,YAAA;AAAA,EACd,GAAG,KAAA;AACL,CAAoB,KAAA;AAClB,EAAA,MAAM,WAAWC,wCAA0B,EAAA,CAAA;AAC3C,EAAA,MAAM,SAAY,GAAA,YAAA,CAAA;AAElB,EAAA,SAAS,gBAAgB,GAAiB,EAAA;AACxC,IAAA,MAAM,SAAS,GAAI,CAAA,MAAA,CAAA;AACnB,IAAM,MAAA,eAAA,GAAkB,MAAO,CAAA,OAAA,CAAQ,iBAAiB,CAAA,CAAA;AACxD,IAAA,MAAM,GAAM,GAAA,QAAA,CAAS,eAAgB,CAAA,OAAA,EAAS,SAAS,IAAI,CAAA,CAAA;AAC3D,IAAM,MAAA;AAAA,MACJ,OAAO,EAAE,OAAA,EAAS,WAAW,OAAS,EAAA,QAAA,EAAU,GAAGC,MAAM,EAAA;AAAA,KAC3D,GAAI,SAAS,GAAG,CAAA,CAAA;AAChB,IAAA,MAAM,EAAE,SAAA,EAAW,kBAAmB,EAAA,GAAI,OAAQ,CAAA,KAAA,CAAA;AAClD,IAAA,MAAM,EAAE,MAAQ,EAAA,IAAA,EAAM,KAAK,KAAM,EAAA,GAC/B,gBAAgB,qBAAsB,EAAA,CAAA;AACxC,IAAA,MAAM,KAAKC,aAAK,EAAA,CAAA;AAChB,IAAA,MAAM,WAAc,GAAA,EAAE,EAAI,EAAA,GAAA,EAAK,EAAG,EAAA,CAAA;AAClC,IAAM,MAAA,SAAA,GAAY,WAChB,OAEA,mBAAAN,cAAA;AAAA,MAACO,SAAA;AAAA,MAAA;AAAA,QACE,GAAGJ,UAAAA;AAAA,QACH,GAAG,WAAA;AAAA,QACH,GAAGE,MAAAA;AAAA,QACH,GAAG,kBAAA;AAAA,QACJ,OAAOA,MAAM,CAAA,KAAA;AAAA,QAEZ,QAAA,EAAA,OAAA;AAAA,OAAA;AAAA,KACH,CAAA;AAGF,IAAS,QAAA,CAAA;AAAA,MACP,QAAU,EAAA;AAAA,QACR,IAAA;AAAA,QACA,GAAA;AAAA,QACA,OAAO,IAAO,GAAA,KAAA;AAAA,QACd,QAAQ,GAAM,GAAA,GAAA;AAAA,QACd,KAAA;AAAA,QACA,MAAA;AAAA,OACF;AAAA,MACA,WAAA,EAAa,iBAAiB,eAAe,CAAA;AAAA,MAC7C,KAAK,GAAI,CAAA,WAAA;AAAA,MACT,YAAc,EAAA;AAAA,QACZ,WAAa,EAAA,IAAA;AAAA,QACb,cAAgB,EAAA,IAAA;AAAA,QAChB,uBAAyB,EAAA,IAAA;AAAA,QACzB,wBAA0B,EAAA,IAAA;AAAA,QAC1B,aAAe,EAAA,EAAA;AAAA,OACjB;AAAA,MACA,IAAM,EAAA,GAAA;AAAA,MACN,OAAS,EAAA,SAAA;AAAA,MACT,IAAM,EAAA,YAAA;AAAA,KACP,CAAA,CAAA;AAAA,GACH;AAEA,EACE,uBAAAL,cAAA;AAAA,IAACQ,kBAAA;AAAA,IAAA;AAAA,MACE,GAAGN,UAAAA;AAAA,MACH,GAAG,KAAA;AAAA,MACJ,SAAA,EAAW,GAAG,SAAW,EAAA,SAAA,EAAW,GAAG,SAAS,CAAA,CAAA,EAAI,WAAW,CAAE,CAAA,CAAA;AAAA,MACjE,UAAA;AAAA,MACA,QAAU,EAAA,IAAA;AAAA,MAET,QAAS,EAAA,QAAA,CAAA,GAAA;AAAA,QAAI,CAAC,KAAO,EAAA,GAAA,KACpB,MAAM,IAAS,KAAA,WAAA,GACXO,mBAAa,KAAO,EAAA;AAAA,UAClB,GAAK,EAAA,GAAA;AAAA,UACL,WAAa,EAAA,eAAA;AAAA,SACd,CACD,GAAA,KAAA;AAAA,OACN;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ,EAAA;AAEAC,0BAAkB,CAAA,SAAA,EAAW,SAAS,MAAM,CAAA;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Header.js","sources":["../../src/layout-header/Header.tsx"],"sourcesContent":["import { EditableLabel, IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n cloneElement,\n HTMLAttributes,\n KeyboardEvent,\n MouseEvent,\n ReactElement,\n useRef,\n useState,\n} from \"react\";\nimport { Contribution, useViewDispatch } from \"../layout-view-actions\";\n\nimport headerCss from \"./Header.css\";\n\nexport interface HeaderProps extends HTMLAttributes<HTMLDivElement> {\n collapsed?: boolean;\n contributions?: Contribution[];\n expanded?: boolean;\n closeable?: boolean;\n onEditTitle: (value: string) => void;\n orientation?: \"horizontal\" | \"vertical\";\n tearOut?: boolean;\n}\n\nconst classBase = \"vuuHeader\";\n\nexport const Header = ({\n className: classNameProp,\n contributions,\n collapsed,\n closeable,\n onEditTitle,\n orientation: orientationProp = \"horizontal\",\n style,\n title = \"Untitled\",\n}: HeaderProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-header\",\n css: headerCss,\n window: targetWindow,\n });\n\n const labelFieldRef = useRef<HTMLDivElement>(null);\n const [value, setValue] = useState<string>(title);\n const [editing, setEditing] = useState<boolean>(false);\n\n const viewDispatch = useViewDispatch();\n const handleClose = (evt: MouseEvent) =>\n viewDispatch?.({ type: \"remove\" }, evt);\n\n const handleTitleMouseDown = () => {\n labelFieldRef.current?.focus();\n };\n\n const handleButtonMouseDown = (evt: MouseEvent) => {\n // do not allow drag to be initiated\n evt.stopPropagation();\n };\n\n const orientation = collapsed || orientationProp;\n\n const className = cx(classBase, classNameProp, `${classBase}-${orientation}`);\n\n const handleEnterEditMode = () => {\n setEditing(true);\n };\n\n const handleTitleKeyDown = (evt: KeyboardEvent<HTMLDivElement>) => {\n if (evt.key === \"Enter\") {\n setEditing(true);\n }\n };\n\n const handleExitEditMode = (\n originalValue = \"\",\n finalValue = \"\",\n allowDeactivation = true,\n editCancelled = false\n ) => {\n setEditing(false);\n if (editCancelled) {\n setValue(originalValue);\n } else if (finalValue !== originalValue) {\n setValue(finalValue);\n onEditTitle?.(finalValue);\n }\n if (allowDeactivation === false) {\n labelFieldRef.current?.focus();\n }\n };\n\n const handleMouseDown = (e: MouseEvent) => {\n viewDispatch?.({ type: \"mousedown\" }, e);\n };\n\n const toolbarItems: ReactElement[] = [];\n const postTitleContributedItems: ReactElement[] = [];\n const actionButtons: ReactElement[] = [];\n\n contributions?.forEach((contribution, i) => {\n switch (contribution.location) {\n case \"pre-title\":\n toolbarItems.push(cloneElement(contribution.content, { key: i }));\n break;\n default:\n postTitleContributedItems.push(\n cloneElement(contribution.content, { key: i })\n );\n }\n });\n\n title &&\n toolbarItems.push(\n <EditableLabel\n className={`${classBase}-title`}\n editing={editing}\n key=\"title\"\n value={value}\n onChange={setValue}\n onMouseDownCapture={handleTitleMouseDown}\n onEnterEditMode={handleEnterEditMode}\n onExitEditMode={handleExitEditMode}\n onKeyDown={handleTitleKeyDown}\n ref={labelFieldRef}\n tabIndex={0}\n />\n );\n\n closeable &&\n actionButtons.push(\n <IconButton\n icon=\"close\"\n key=\"close\"\n onClick={handleClose}\n onMouseDown={handleButtonMouseDown}\n variant=\"secondary\"\n />\n );\n\n postTitleContributedItems.length > 0 &&\n toolbarItems.push(\n <div className=\"vuuTooltrayProxy\" data-align=\"end\" key=\"contributions\">\n {postTitleContributedItems}\n </div>\n );\n\n actionButtons.length > 0 &&\n toolbarItems.push(\n <div className=\"vuuTooltrayProxy\" data-align=\"end\" key=\"actions\">\n {actionButtons}\n </div>\n );\n\n return (\n <div\n className={cx(\"vuuToolbarProxy\", className)}\n style={style}\n onMouseDown={handleMouseDown}\n >\n {toolbarItems}\n {/* \n {collapsed === false ? (\n <ActionButton\n aria-label=\"Minimize View\"\n actionId=\"minimize\"\n iconName=\"minimize\"\n onClick={handleAction}\n onMouseDown={handleButtonMouseDown}\n />\n ) : null}\n {collapsed ? (\n <ActionButton\n aria-label=\"Restore View\"\n actionId=\"restore\"\n iconName=\"double-chevron-right\"\n onClick={handleAction}\n onMouseDown={handleButtonMouseDown}\n />\n ) : null}\n {expanded === false ? (\n <ActionButton\n aria-label=\"Maximize View\"\n actionId=\"maximize\"\n iconName=\"maximize\"\n onClick={handleAction}\n onMouseDown={handleButtonMouseDown}\n />\n ) : null}\n {expanded ? (\n <ActionButton\n aria-label=\"Restore View\"\n actionId=\"restore\"\n iconName=\"restore\"\n onClick={handleAction}\n onMouseDown={handleButtonMouseDown}\n />\n ) : null}\n {tearOut ? (\n <ActionButton\n aria-label=\"Tear out View\"\n actionId=\"tearout\"\n iconName=\"tear-out\"\n onClick={handleAction}\n onMouseDown={handleButtonMouseDown}\n />\n ) : null}\n {closeable ? (\n <Button\n aria-label=\"close\"\n data-icon\n onClick={handleClose}\n onMouseDown={handleButtonMouseDown}\n />\n ) : null} */}\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;AA2BA,MAAM,SAAY,GAAA,WAAA,CAAA;AAEX,MAAM,SAAS,CAAC;AAAA,EACrB,SAAW,EAAA,aAAA;AAAA,EACX,aAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,WAAA;AAAA,EACA,aAAa,eAAkB,GAAA,YAAA;AAAA,EAC/B,KAAA;AAAA,EACA,KAAQ,GAAA,UAAA;AACV,CAAmB,KAAA;AACjB,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,YAAA;AAAA,IACR,GAAK,EAAA,SAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAM,MAAA,aAAA,GAAgB,OAAuB,IAAI,CAAA,CAAA;AACjD,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,SAAiB,KAAK,CAAA,CAAA;AAChD,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAkB,KAAK,CAAA,CAAA;AAErD,EAAA,MAAM,eAAe,eAAgB,EAAA,CAAA;AACrC,EAAM,MAAA,WAAA,GAAc,CAAC,GACnB,KAAA,YAAA,GAAe,EAAE,IAAM,EAAA,QAAA,IAAY,GAAG,CAAA,CAAA;AAExC,EAAA,MAAM,uBAAuB,MAAM;AACjC,IAAA,aAAA,CAAc,SAAS,KAAM,EAAA,CAAA;AAAA,GAC/B,CAAA;AAEA,EAAM,MAAA,qBAAA,GAAwB,CAAC,GAAoB,KAAA;AAEjD,IAAA,GAAA,CAAI,eAAgB,EAAA,CAAA;AAAA,GACtB,CAAA;AAEA,EAAA,MAAM,cAAc,SAAa,IAAA,eAAA,CAAA;AAEjC,EAAM,MAAA,SAAA,GAAY,GAAG,SAAW,EAAA,aAAA,EAAe,GAAG,SAAS,CAAA,CAAA,EAAI,WAAW,CAAE,CAAA,CAAA,CAAA;AAE5E,EAAA,MAAM,sBAAsB,MAAM;AAChC,IAAA,UAAA,CAAW,IAAI,CAAA,CAAA;AAAA,GACjB,CAAA;AAEA,EAAM,MAAA,kBAAA,GAAqB,CAAC,GAAuC,KAAA;AACjE,IAAI,IAAA,GAAA,CAAI,QAAQ,OAAS,EAAA;AACvB,MAAA,UAAA,CAAW,IAAI,CAAA,CAAA;AAAA,KACjB;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,kBAAA,GAAqB,CACzB,aAAgB,GAAA,EAAA,EAChB,aAAa,EACb,EAAA,iBAAA,GAAoB,IACpB,EAAA,aAAA,GAAgB,KACb,KAAA;AACH,IAAA,UAAA,CAAW,KAAK,CAAA,CAAA;AAChB,IAAA,IAAI,aAAe,EAAA;AACjB,MAAA,QAAA,CAAS,aAAa,CAAA,CAAA;AAAA,KACxB,MAAA,IAAW,eAAe,aAAe,EAAA;AACvC,MAAA,QAAA,CAAS,UAAU,CAAA,CAAA;AACnB,MAAA,WAAA,GAAc,UAAU,CAAA,CAAA;AAAA,KAC1B;AACA,IAAA,IAAI,sBAAsB,KAAO,EAAA;AAC/B,MAAA,aAAA,CAAc,SAAS,KAAM,EAAA,CAAA;AAAA,KAC/B;AAAA,GACF,CAAA;AAEA,EAAM,MAAA,eAAA,GAAkB,CAAC,CAAkB,KAAA;AACzC,IAAA,YAAA,GAAe,EAAE,IAAA,EAAM,WAAY,EAAA,EAAG,CAAC,CAAA,CAAA;AAAA,GACzC,CAAA;AAEA,EAAA,MAAM,eAA+B,EAAC,CAAA;AACtC,EAAA,MAAM,4BAA4C,EAAC,CAAA;AACnD,EAAA,MAAM,gBAAgC,EAAC,CAAA;AAEvC,EAAe,aAAA,EAAA,OAAA,CAAQ,CAAC,YAAA,EAAc,CAAM,KAAA;AAC1C,IAAA,QAAQ,aAAa,QAAU;AAAA,MAC7B,KAAK,WAAA;AACH,QAAa,YAAA,CAAA,IAAA,CAAK,aAAa,YAAa,CAAA,OAAA,EAAS,EAAE,GAAK,EAAA,CAAA,EAAG,CAAC,CAAA,CAAA;AAChE,QAAA,MAAA;AAAA,MACF;AACE,QAA0B,yBAAA,CAAA,IAAA;AAAA,UACxB,aAAa,YAAa,CAAA,OAAA,EAAS,EAAE,GAAA,EAAK,GAAG,CAAA;AAAA,SAC/C,CAAA;AAAA,KACJ;AAAA,GACD,CAAA,CAAA;AAED,EAAA,KAAA,IACE,YAAa,CAAA,IAAA;AAAA,oBACX,GAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,GAAG,SAAS,CAAA,MAAA,CAAA;AAAA,QACvB,OAAA;AAAA,QAEA,KAAA;AAAA,QACA,QAAU,EAAA,QAAA;AAAA,QACV,kBAAoB,EAAA,oBAAA;AAAA,QACpB,eAAiB,EAAA,mBAAA;AAAA,QACjB,cAAgB,EAAA,kBAAA;AAAA,QAChB,SAAW,EAAA,kBAAA;AAAA,QACX,GAAK,EAAA,aAAA;AAAA,QACL,QAAU,EAAA,CAAA;AAAA,OAAA;AAAA,MARN,OAAA;AAAA,KASN;AAAA,GACF,CAAA;AAEF,EAAA,SAAA,IACE,aAAc,CAAA,IAAA;AAAA,oBACZ,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,IAAK,EAAA,OAAA;AAAA,QAEL,OAAS,EAAA,WAAA;AAAA,QACT,WAAa,EAAA,qBAAA;AAAA,QACb,OAAQ,EAAA,WAAA;AAAA,OAAA;AAAA,MAHJ,OAAA;AAAA,KAIN;AAAA,GACF,CAAA;AAEF,EAA0B,yBAAA,CAAA,MAAA,GAAS,KACjC,YAAa,CAAA,IAAA;AAAA,wBACV,KAAI,EAAA,EAAA,SAAA,EAAU,oBAAmB,YAAW,EAAA,KAAA,EAC1C,uCADoD,eAEvD,CAAA;AAAA,GACF,CAAA;AAEF,EAAc,aAAA,CAAA,MAAA,GAAS,KACrB,YAAa,CAAA,IAAA;AAAA,wBACV,KAAI,EAAA,EAAA,SAAA,EAAU,oBAAmB,YAAW,EAAA,KAAA,EAC1C,2BADoD,SAEvD,CAAA;AAAA,GACF,CAAA;AAEF,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAG,CAAA,iBAAA,EAAmB,SAAS,CAAA;AAAA,MAC1C,KAAA;AAAA,MACA,WAAa,EAAA,eAAA;AAAA,MAEZ,QAAA,EAAA,YAAA;AAAA,KAAA;AAAA,GAuDH,CAAA;AAEJ;;;;"}
|
|
1
|
+
{"version":3,"file":"Header.js","sources":["../../src/layout-header/Header.tsx"],"sourcesContent":["import { EditableLabel, IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n cloneElement,\n HTMLAttributes,\n KeyboardEvent,\n MouseEvent,\n ReactElement,\n useRef,\n useState,\n} from \"react\";\nimport { Contribution, useViewDispatch } from \"../layout-view-actions\";\n\nimport headerCss from \"./Header.css\";\n\nexport interface HeaderProps extends HTMLAttributes<HTMLDivElement> {\n collapsed?: boolean;\n contributions?: Contribution[];\n expanded?: boolean;\n closeable?: boolean;\n onEditTitle: (value: string) => void;\n orientation?: \"horizontal\" | \"vertical\";\n tearOut?: boolean;\n}\n\nconst classBase = \"vuuHeader\";\n\nexport const Header = ({\n className: classNameProp,\n contributions,\n collapsed,\n closeable,\n onEditTitle,\n orientation: orientationProp = \"horizontal\",\n style,\n title = \"Untitled\",\n}: HeaderProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-header\",\n css: headerCss,\n window: targetWindow,\n });\n\n const labelFieldRef = useRef<HTMLDivElement>(null);\n const [value, setValue] = useState<string>(title);\n const [editing, setEditing] = useState<boolean>(false);\n\n const viewDispatch = useViewDispatch();\n const handleClose = (evt: MouseEvent) =>\n viewDispatch?.({ type: \"remove\" }, evt);\n\n const handleTitleMouseDown = () => {\n labelFieldRef.current?.focus();\n };\n\n const handleButtonMouseDown = (evt: MouseEvent) => {\n // do not allow drag to be initiated\n evt.stopPropagation();\n };\n\n const orientation = collapsed || orientationProp;\n\n const className = cx(classBase, classNameProp, `${classBase}-${orientation}`);\n\n const handleEnterEditMode = () => {\n setEditing(true);\n };\n\n const handleTitleKeyDown = (evt: KeyboardEvent<HTMLDivElement>) => {\n if (evt.key === \"Enter\") {\n setEditing(true);\n }\n };\n\n const handleExitEditMode = (\n originalValue = \"\",\n finalValue = \"\",\n allowDeactivation = true,\n editCancelled = false\n ) => {\n setEditing(false);\n if (editCancelled) {\n setValue(originalValue);\n } else if (finalValue !== originalValue) {\n setValue(finalValue);\n onEditTitle?.(finalValue);\n }\n if (allowDeactivation === false) {\n labelFieldRef.current?.focus();\n }\n };\n\n const handleMouseDown = (e: MouseEvent) => {\n viewDispatch?.({ type: \"mousedown\" }, e);\n };\n\n const toolbarItems: ReactElement[] = [];\n const postTitleContributedItems: ReactElement[] = [];\n const actionButtons: ReactElement[] = [];\n\n contributions?.forEach((contribution, i) => {\n switch (contribution.location) {\n case \"pre-title\":\n toolbarItems.push(cloneElement(contribution.content, { key: i }));\n break;\n default:\n postTitleContributedItems.push(\n cloneElement(contribution.content, { key: i })\n );\n }\n });\n\n title &&\n toolbarItems.push(\n <EditableLabel\n className={`${classBase}-title`}\n editing={editing}\n key=\"title\"\n value={value}\n onChange={setValue}\n onMouseDownCapture={handleTitleMouseDown}\n onEnterEditMode={handleEnterEditMode}\n onExitEditMode={handleExitEditMode}\n onKeyDown={handleTitleKeyDown}\n ref={labelFieldRef}\n tabIndex={0}\n />\n );\n\n closeable &&\n actionButtons.push(\n <IconButton\n data-embedded\n icon=\"close\"\n key=\"close\"\n onClick={handleClose}\n onMouseDown={handleButtonMouseDown}\n variant=\"secondary\"\n />\n );\n\n postTitleContributedItems.length > 0 &&\n toolbarItems.push(\n <div className=\"vuuTooltrayProxy\" data-align=\"end\" key=\"contributions\">\n {postTitleContributedItems}\n </div>\n );\n\n actionButtons.length > 0 &&\n toolbarItems.push(\n <div className=\"vuuTooltrayProxy\" data-align=\"end\" key=\"actions\">\n {actionButtons}\n </div>\n );\n\n return (\n <div\n className={cx(\"vuuToolbarProxy\", className)}\n style={style}\n onMouseDown={handleMouseDown}\n >\n {toolbarItems}\n {/* \n {collapsed === false ? (\n <ActionButton\n aria-label=\"Minimize View\"\n actionId=\"minimize\"\n iconName=\"minimize\"\n onClick={handleAction}\n onMouseDown={handleButtonMouseDown}\n />\n ) : null}\n {collapsed ? (\n <ActionButton\n aria-label=\"Restore View\"\n actionId=\"restore\"\n iconName=\"double-chevron-right\"\n onClick={handleAction}\n onMouseDown={handleButtonMouseDown}\n />\n ) : null}\n {expanded === false ? (\n <ActionButton\n aria-label=\"Maximize View\"\n actionId=\"maximize\"\n iconName=\"maximize\"\n onClick={handleAction}\n onMouseDown={handleButtonMouseDown}\n />\n ) : null}\n {expanded ? (\n <ActionButton\n aria-label=\"Restore View\"\n actionId=\"restore\"\n iconName=\"restore\"\n onClick={handleAction}\n onMouseDown={handleButtonMouseDown}\n />\n ) : null}\n {tearOut ? (\n <ActionButton\n aria-label=\"Tear out View\"\n actionId=\"tearout\"\n iconName=\"tear-out\"\n onClick={handleAction}\n onMouseDown={handleButtonMouseDown}\n />\n ) : null}\n {closeable ? (\n <Button\n aria-label=\"close\"\n data-icon\n onClick={handleClose}\n onMouseDown={handleButtonMouseDown}\n />\n ) : null} */}\n </div>\n );\n};\n"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var paletteCss = ".vuuPalette {\n --vuuList-borderStyle: none;\n}\n\n.vuuPalette-horizontal {\n align-items: center;\n display: flex;\n}\n\n.vuuPaletteItem {\n --vuu-icon-color: var(--salt-content-
|
|
1
|
+
var paletteCss = ".vuuPalette {\n --vuu-svg-draggable: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 17\"><path d=\"M12.6666 6.5H3.33329C2.96663 6.5 2.66663 6.8 2.66663 7.16667C2.66663 7.53333 2.96663 7.83333 3.33329 7.83333H12.6666C13.0333 7.83333 13.3333 7.53333 13.3333 7.16667C13.3333 6.8 13.0333 6.5 12.6666 6.5ZM3.33329 10.5H12.6666C13.0333 10.5 13.3333 10.2 13.3333 9.83333C13.3333 9.46667 13.0333 9.16667 12.6666 9.16667H3.33329C2.96663 9.16667 2.66663 9.46667 2.66663 9.83333C2.66663 10.2 2.96663 10.5 3.33329 10.5Z\" /></svg>');\n --vuuList-borderStyle: none;\n}\n\n.vuuPalette-horizontal {\n align-items: center;\n display: flex;\n}\n\n.vuuPaletteItem {\n --vuu-icon-color: var(--salt-content-secondary-foreground);\n --list-item-text-padding: 0 0 0 calc(var(--salt-size-unit) * 3);\n padding-left: 12px;\n font-size: 12px;\n font-weight: 600;\n gap: var(--salt-spacing-200);\n}\n\n.vuuSimpleDraggableWrapper > .vuuPaletteItem {\n --vuu-icon-color: var(--salt-selectable-foreground);\n}\n\n.salt-theme .vuuPaletteItem {\n font-size: 11px;\n font-weight: normal;\n}\n";
|
|
2
2
|
|
|
3
3
|
export { paletteCss as default };
|
|
4
4
|
//# sourceMappingURL=Palette.css.js.map
|
package/esm/palette/Palette.js
CHANGED
|
@@ -19,7 +19,7 @@ const clonePaletteItem = (paletteItem) => {
|
|
|
19
19
|
const PaletteItem = memo(
|
|
20
20
|
({
|
|
21
21
|
className,
|
|
22
|
-
|
|
22
|
+
component,
|
|
23
23
|
idx,
|
|
24
24
|
resizeable,
|
|
25
25
|
header,
|
|
@@ -37,7 +37,6 @@ const PaletteItem = memo(
|
|
|
37
37
|
{
|
|
38
38
|
className: cx("vuuPaletteItem", className),
|
|
39
39
|
"data-draggable": true,
|
|
40
|
-
"data-icon": "draggable",
|
|
41
40
|
...props
|
|
42
41
|
}
|
|
43
42
|
);
|
|
@@ -60,7 +59,7 @@ const Palette = ({
|
|
|
60
59
|
const listItemElement = target.closest(".vuuPaletteItem");
|
|
61
60
|
const idx = parseInt(listItemElement.dataset?.index ?? "-1");
|
|
62
61
|
const {
|
|
63
|
-
props: { caption,
|
|
62
|
+
props: { caption, component: payload, template, ...props2 }
|
|
64
63
|
} = children[idx];
|
|
65
64
|
const { ViewProps: componentViewProps } = payload.props;
|
|
66
65
|
const { height, left, top, width } = listItemElement.getBoundingClientRect();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Palette.js","sources":["../../src/palette/Palette.tsx"],"sourcesContent":["import {\n List,\n ListItem,\n ListItemProps,\n ListProps,\n} from \"@vuu-ui/vuu-ui-controls\";\nimport { registerComponent, uuid } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n HTMLAttributes,\n MouseEvent,\n ReactElement,\n cloneElement,\n memo,\n} from \"react\";\nimport { useLayoutProviderDispatch } from \"../layout-provider\";\nimport { View, ViewProps } from \"../layout-view\";\n\nimport paletteCss from \"./Palette.css\";\n\nconst clonePaletteItem = (paletteItem: HTMLElement) => {\n const dolly = paletteItem.cloneNode(true) as HTMLElement;\n dolly.id = \"\";\n delete dolly.dataset.idx;\n return dolly;\n};\n\nexport interface PaletteItemProps extends ListItemProps {\n
|
|
1
|
+
{"version":3,"file":"Palette.js","sources":["../../src/palette/Palette.tsx"],"sourcesContent":["import {\n List,\n ListItem,\n ListItemProps,\n ListProps,\n} from \"@vuu-ui/vuu-ui-controls\";\nimport { registerComponent, uuid } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport {\n HTMLAttributes,\n MouseEvent,\n ReactElement,\n cloneElement,\n memo,\n} from \"react\";\nimport { useLayoutProviderDispatch } from \"../layout-provider\";\nimport { View, ViewProps } from \"../layout-view\";\n\nimport paletteCss from \"./Palette.css\";\n\nconst clonePaletteItem = (paletteItem: HTMLElement) => {\n const dolly = paletteItem.cloneNode(true) as HTMLElement;\n dolly.id = \"\";\n delete dolly.dataset.idx;\n return dolly;\n};\n\nexport interface PaletteItemProps extends ListItemProps {\n /**\n * This is the payload that will be created when the\n * palette item is dropped\n */\n component: ReactElement;\n closeable?: boolean;\n header?: boolean;\n idx?: number;\n resize?: \"defer\";\n resizeable?: boolean;\n}\n\nexport const PaletteItem = memo(\n ({\n className,\n component,\n idx,\n resizeable,\n header,\n closeable,\n ...props\n }: PaletteItemProps) => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"vuu-palette\",\n css: paletteCss,\n window: targetWindow,\n });\n\n return (\n <ListItem\n className={cx(\"vuuPaletteItem\", className)}\n data-draggable\n {...props}\n />\n );\n }\n);\n\nPaletteItem.displayName = \"PaletteItem\";\n\nexport interface PaletteProps\n extends Omit<\n HTMLAttributes<HTMLDivElement>,\n \"onDragStart\" | \"onDrop\" | \"onSelect\"\n > {\n ListProps?: Partial<ListProps>;\n ViewProps?: Partial<ViewProps>;\n children: ReactElement[];\n itemHeight?: number;\n orientation: \"horizontal\" | \"vertical\";\n selection?: string;\n}\n\nexport const Palette = ({\n ListProps,\n ViewProps,\n children,\n className,\n itemHeight = 41,\n orientation = \"horizontal\",\n ...props\n}: PaletteProps) => {\n const dispatch = useLayoutProviderDispatch();\n const classBase = \"vuuPalette\";\n\n function handleMouseDown(evt: MouseEvent) {\n const target = evt.target as HTMLElement;\n const listItemElement = target.closest(\".vuuPaletteItem\") as HTMLElement;\n const idx = parseInt(listItemElement.dataset?.index ?? \"-1\");\n const {\n props: { caption, component: payload, template, ...props },\n } = children[idx];\n const { ViewProps: componentViewProps } = payload.props;\n const { height, left, top, width } =\n listItemElement.getBoundingClientRect();\n const id = uuid();\n const identifiers = { id, key: id };\n const component = template ? (\n payload\n ) : (\n <View\n {...ViewProps}\n {...identifiers}\n {...props}\n {...componentViewProps}\n title={props.label}\n >\n {payload}\n </View>\n );\n\n dispatch({\n dragRect: {\n left,\n top,\n right: left + width,\n bottom: top + 150,\n width,\n height,\n },\n dragElement: clonePaletteItem(listItemElement),\n evt: evt.nativeEvent,\n instructions: {\n DoNotRemove: true,\n DoNotTransform: true,\n DriftHomeIfNoDropTarget: true,\n RemoveDraggableOnDragEnd: true,\n dragThreshold: 10,\n },\n path: \"*\",\n payload: component,\n type: \"drag-start\",\n });\n }\n\n return (\n <List\n {...ListProps}\n {...props}\n className={cx(classBase, className, `${classBase}-${orientation}`)}\n itemHeight={itemHeight}\n selected={null}\n >\n {children.map((child, idx) =>\n child.type === PaletteItem\n ? cloneElement(child, {\n key: idx,\n onMouseDown: handleMouseDown,\n })\n : child\n )}\n </List>\n );\n};\n\nregisterComponent(\"Palette\", Palette, \"view\");\n"],"names":["ListProps","ViewProps","props","View"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,23 +1,23 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "0.8.
|
|
2
|
+
"version": "0.8.62",
|
|
3
3
|
"description": "VUU Layout Components",
|
|
4
4
|
"author": "heswell",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"types": "types/index.d.ts",
|
|
7
7
|
"devDependencies": {
|
|
8
|
-
"@vuu-ui/vuu-data-types": "0.8.
|
|
9
|
-
"@vuu-ui/vuu-filter-types": "0.8.
|
|
8
|
+
"@vuu-ui/vuu-data-types": "0.8.62",
|
|
9
|
+
"@vuu-ui/vuu-filter-types": "0.8.62"
|
|
10
10
|
},
|
|
11
11
|
"dependencies": {
|
|
12
12
|
"@salt-ds/core": "1.27.1",
|
|
13
13
|
"@salt-ds/styles": "0.2.1",
|
|
14
14
|
"@salt-ds/window": "0.1.1",
|
|
15
|
-
"@vuu-ui/vuu-data-types": "0.8.
|
|
16
|
-
"@vuu-ui/vuu-filters": "0.8.
|
|
17
|
-
"@vuu-ui/vuu-popups": "0.8.
|
|
18
|
-
"@vuu-ui/vuu-table": "0.8.
|
|
19
|
-
"@vuu-ui/vuu-ui-controls": "0.8.
|
|
20
|
-
"@vuu-ui/vuu-utils": "0.8.
|
|
15
|
+
"@vuu-ui/vuu-data-types": "0.8.62",
|
|
16
|
+
"@vuu-ui/vuu-filters": "0.8.62",
|
|
17
|
+
"@vuu-ui/vuu-popups": "0.8.62",
|
|
18
|
+
"@vuu-ui/vuu-table": "0.8.62",
|
|
19
|
+
"@vuu-ui/vuu-ui-controls": "0.8.62",
|
|
20
|
+
"@vuu-ui/vuu-utils": "0.8.62"
|
|
21
21
|
},
|
|
22
22
|
"peerDependencies": {
|
|
23
23
|
"clsx": "^2.0.0",
|
|
@@ -2,14 +2,18 @@ import { ListItemProps, ListProps } from "@vuu-ui/vuu-ui-controls";
|
|
|
2
2
|
import { HTMLAttributes, ReactElement } from "react";
|
|
3
3
|
import { ViewProps } from "../layout-view";
|
|
4
4
|
export interface PaletteItemProps extends ListItemProps {
|
|
5
|
-
|
|
5
|
+
/**
|
|
6
|
+
* This is the payload that will be created when the
|
|
7
|
+
* palette item is dropped
|
|
8
|
+
*/
|
|
9
|
+
component: ReactElement;
|
|
6
10
|
closeable?: boolean;
|
|
7
11
|
header?: boolean;
|
|
8
12
|
idx?: number;
|
|
9
13
|
resize?: "defer";
|
|
10
14
|
resizeable?: boolean;
|
|
11
15
|
}
|
|
12
|
-
export declare const PaletteItem: import("react").MemoExoticComponent<({ className,
|
|
16
|
+
export declare const PaletteItem: import("react").MemoExoticComponent<({ className, component, idx, resizeable, header, closeable, ...props }: PaletteItemProps) => JSX.Element>;
|
|
13
17
|
export interface PaletteProps extends Omit<HTMLAttributes<HTMLDivElement>, "onDragStart" | "onDrop" | "onSelect"> {
|
|
14
18
|
ListProps?: Partial<ListProps>;
|
|
15
19
|
ViewProps?: Partial<ViewProps>;
|