@linzjs/windows 9.5.3 → 9.5.4
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/README.md +114 -108
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @linzjs/windows
|
|
2
2
|
|
|
3
|
-
[](https:///github.com/semantic-release/semantic-release)
|
|
4
4
|
|
|
5
5
|
**Note: Make sure to install oxc plugin in Intellij/VSCode for development.**
|
|
6
6
|
|
|
@@ -56,7 +56,7 @@ npm run storybook
|
|
|
56
56
|
|
|
57
57
|
Promise-based async modals using the HTML `<dialog>` element. Show a modal, await the result, and continue.
|
|
58
58
|
|
|
59
|
-
|
|
59
|
+
|
|
60
60
|
|
|
61
61
|
**Setup** — wrap your app with the context provider once at the root:
|
|
62
62
|
|
|
@@ -150,11 +150,11 @@ Pre-built modals for common use cases: `outline`, `info`, `warning`, `error`, `s
|
|
|
150
150
|
|
|
151
151
|
| Outline | Info | Warning | Error |
|
|
152
152
|
|---------|------|---------|-------|
|
|
153
|
-
|  |  |  |  |
|
|
153
|
+
|  |  |  |  |
|
|
154
154
|
|
|
155
155
|
| Success | Progress | Blocked | Custom buttons |
|
|
156
156
|
|---------|----------|---------|----------------|
|
|
157
|
-
|  |  |  |  |
|
|
157
|
+
|  |  |  |  |
|
|
158
158
|
|
|
159
159
|
**Setup** — same `LuiModalAsyncContextProvider` as above.
|
|
160
160
|
|
|
@@ -188,7 +188,7 @@ export const PrefabModalUsage = () => {
|
|
|
188
188
|
level: 'warning',
|
|
189
189
|
title: 'You are about to make changes',
|
|
190
190
|
children: 'Are you sure that you want to make these changes?',
|
|
191
|
-
helpLink: 'https
|
|
191
|
+
helpLink: 'https:///www.example.com/help',
|
|
192
192
|
buttons: [
|
|
193
193
|
{ title: 'Cancel', icon: 'ic_navigate_before', value: undefined },
|
|
194
194
|
{ title: 'Delete the world!', icon: 'ic_delete_solid', value: 'delete', level: 'error' },
|
|
@@ -294,7 +294,7 @@ LuiModalDontShowSessionRemove('userId_surveyId_modalId');
|
|
|
294
294
|
|
|
295
295
|
A prefab modal for file upload interactions.
|
|
296
296
|
|
|
297
|
-
|
|
297
|
+
|
|
298
298
|
|
|
299
299
|
**Setup** — same `LuiModalAsyncContextProvider` as above.
|
|
300
300
|
|
|
@@ -336,7 +336,7 @@ export const ModalUploadUsage = () => {
|
|
|
336
336
|
|
|
337
337
|
Draggable, resizeable, pop-in/pop-out panel windows. Panels are opened imperatively via `OpenPanelButton` or `openPanel`.
|
|
338
338
|
|
|
339
|
-
|
|
339
|
+
|
|
340
340
|
|
|
341
341
|
**Setup** — wrap your app with the context provider once at the root:
|
|
342
342
|
|
|
@@ -456,6 +456,8 @@ export const TestShowPanel = () => (
|
|
|
456
456
|
|
|
457
457
|
Panels can dock into a designated `PanelDock` area. Add `dockTo` to `PanelHeader` and place a `PanelDock` in your layout.
|
|
458
458
|
|
|
459
|
+
![Panel docking example screenshot placeholder]
|
|
460
|
+
|
|
459
461
|
```tsx
|
|
460
462
|
import { OpenPanelButton, Panel, PanelContent, PanelDock, PanelHeader } from '@linzjs/windows';
|
|
461
463
|
import { useState } from 'react';
|
|
@@ -491,7 +493,7 @@ export const TestShowPanel = () => {
|
|
|
491
493
|
|
|
492
494
|
Panels support tabs via the `@linzjs/lui` `LuiTabs` components. Wrap the `Panel` in `LuiTabs` and use `LuiTabsGroup`/`LuiTabsPanelSwitch` in the header.
|
|
493
495
|
|
|
494
|
-
|
|
496
|
+
|
|
495
497
|
|
|
496
498
|
```tsx
|
|
497
499
|
import { LuiTabs, LuiTabsGroup, LuiTabsPanel, LuiTabsPanelSwitch } from '@linzjs/lui';
|
|
@@ -536,6 +538,8 @@ export const TestShowTabbedPanel = () => (
|
|
|
536
538
|
|
|
537
539
|
When a modal is shown from inside a panel that has been popped out into a separate window, use `showOnAllWindows: true` to ensure the modal appears in the correct window.
|
|
538
540
|
|
|
541
|
+
![Panel with global modal example screenshot placeholder]
|
|
542
|
+
|
|
539
543
|
```tsx
|
|
540
544
|
import { useLuiModalPrefab, OpenPanelButton, Panel, PanelContent, PanelHeader } from '@linzjs/windows';
|
|
541
545
|
|
|
@@ -579,114 +583,116 @@ export const TestShowPanelWithGlobalModal = () => (
|
|
|
579
583
|
|
|
580
584
|
A toolbar ribbon with buttons, sliders, menus, and separators. Supports horizontal and vertical orientations.
|
|
581
585
|
|
|
586
|
+
![Ribbon example screenshot placeholder]
|
|
587
|
+
|
|
582
588
|
**Setup** — requires both `LuiModalAsyncContextProvider` and `PanelsContextProvider`:
|
|
583
589
|
|
|
584
590
|
```tsx
|
|
585
591
|
import {
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
592
|
+
RibbonButton,
|
|
593
|
+
RibbonButtonLink,
|
|
594
|
+
RibbonButtonOpenPanel,
|
|
595
|
+
RibbonButtonSlider,
|
|
596
|
+
RibbonContainer,
|
|
597
|
+
RibbonSeparator,
|
|
598
|
+
RibbonMenu,
|
|
599
|
+
RibbonMenuOption,
|
|
600
|
+
RibbonMenuSeparator,
|
|
601
|
+
Panel,
|
|
602
|
+
PanelContent,
|
|
603
|
+
PanelHeader,
|
|
598
604
|
} from '@linzjs/windows';
|
|
599
605
|
import { useState } from 'react';
|
|
600
606
|
|
|
601
607
|
export const TestRibbonPanel = () => {
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
|
|
624
|
-
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
608
|
+
const [selectedItem, setSelectedItem] = useState('ic_add_rectangle');
|
|
609
|
+
const [loading, setLoading] = useState(false);
|
|
610
|
+
const [processing, setProcessing] = useState(false);
|
|
611
|
+
|
|
612
|
+
return (
|
|
613
|
+
<>
|
|
614
|
+
<button onClick={() => setLoading(!loading)}>Toggle loading</button>
|
|
615
|
+
<button onClick={() => setProcessing(!processing)}>Toggle processing</button>
|
|
616
|
+
|
|
617
|
+
{/* Horizontal ribbon */}
|
|
618
|
+
<RibbonContainer style={{ position: 'absolute', left: 220, top: 120 }}>
|
|
619
|
+
|
|
620
|
+
{/* Button that opens a panel — disabled state */}
|
|
621
|
+
<RibbonButtonOpenPanel
|
|
622
|
+
disabled
|
|
623
|
+
title={'Marks'}
|
|
624
|
+
icon={'ic_marks'}
|
|
625
|
+
componentFn={() => <Panel title="Marks" size={{ width: 640, height: 400 }}><PanelHeader /><PanelContent /></Panel>}
|
|
626
|
+
loading={loading}
|
|
627
|
+
/>
|
|
628
|
+
|
|
629
|
+
<RibbonSeparator />
|
|
630
|
+
|
|
631
|
+
{/* Button that opens a panel — with processing indicator */}
|
|
632
|
+
<RibbonButtonOpenPanel
|
|
633
|
+
title={'Vectors'}
|
|
634
|
+
icon={'ic_line_irregular'}
|
|
635
|
+
componentFn={() => <Panel title="Vectors" size={{ width: 640, height: 400 }}><PanelHeader /><PanelContent /></Panel>}
|
|
636
|
+
loading={loading}
|
|
637
|
+
processing={processing}
|
|
638
|
+
processingMessage={'Validating...'}
|
|
639
|
+
/>
|
|
640
|
+
|
|
641
|
+
{/* Slider button — opens a sub-panel of options below */}
|
|
642
|
+
<RibbonButtonSlider title={selectedItem} icon={selectedItem} alignment={'down'} loading={loading}>
|
|
643
|
+
<RibbonContainer orientation={'vertical'}>
|
|
644
|
+
<RibbonButton
|
|
645
|
+
title={'Rectangle'}
|
|
646
|
+
icon={'ic_add_rectangle'}
|
|
647
|
+
selected={selectedItem === 'ic_add_rectangle'}
|
|
648
|
+
onClick={() => setSelectedItem('ic_add_rectangle')}
|
|
649
|
+
/>
|
|
650
|
+
<RibbonButton
|
|
651
|
+
title={'Other'}
|
|
652
|
+
icon={'ic_polygon_selection'}
|
|
653
|
+
selected={selectedItem === 'ic_polygon_selection'}
|
|
654
|
+
onClick={() => setSelectedItem('ic_polygon_selection')}
|
|
655
|
+
/>
|
|
656
|
+
</RibbonContainer>
|
|
657
|
+
</RibbonButtonSlider>
|
|
658
|
+
|
|
659
|
+
{/* Slider button — dropdown menu with autoClose */}
|
|
660
|
+
<RibbonButtonSlider title={'Other'} icon={'ic_more_vert'} alignment={'down'} autoClose={true} loading={loading}>
|
|
661
|
+
<RibbonMenu>
|
|
662
|
+
<RibbonMenuOption icon={'ic_define_nonprimary_diagram_circle'}>Circle</RibbonMenuOption>
|
|
663
|
+
<RibbonMenuOption icon={'ic_define_nonprimary_diagram_rectangle'} disabled={true}>Rectangle</RibbonMenuOption>
|
|
664
|
+
<RibbonMenuSeparator />
|
|
665
|
+
<RibbonMenuOption>Item 3</RibbonMenuOption>
|
|
666
|
+
<RibbonMenuSeparator />
|
|
667
|
+
<RibbonMenuOption icon={'ic_clear'}>Cancel</RibbonMenuOption>
|
|
668
|
+
</RibbonMenu>
|
|
669
|
+
</RibbonButtonSlider>
|
|
670
|
+
</RibbonContainer>
|
|
671
|
+
|
|
672
|
+
{/* Vertical ribbon */}
|
|
673
|
+
<RibbonContainer orientation={'vertical'} style={{ position: 'absolute', left: 220, top: 180 }}>
|
|
674
|
+
<RibbonButtonOpenPanel
|
|
675
|
+
title={'Vectors'}
|
|
676
|
+
icon={'ic_timeline'}
|
|
677
|
+
componentFn={() => <Panel title="Vectors" size={{ width: 640, height: 400 }}><PanelHeader /><PanelContent /></Panel>}
|
|
678
|
+
loading={loading}
|
|
679
|
+
/>
|
|
680
|
+
{/* Slider opens to the right */}
|
|
681
|
+
<RibbonButtonSlider title={selectedItem} icon={selectedItem} alignment={'right'} loading={loading}>
|
|
682
|
+
<RibbonContainer>
|
|
683
|
+
<RibbonButton
|
|
684
|
+
title={'Rectangle'}
|
|
685
|
+
icon={'ic_add_rectangle'}
|
|
686
|
+
selected={selectedItem === 'ic_add_rectangle'}
|
|
687
|
+
onClick={() => setSelectedItem('ic_add_rectangle')}
|
|
688
|
+
/>
|
|
689
|
+
</RibbonContainer>
|
|
690
|
+
</RibbonButtonSlider>
|
|
691
|
+
{/* External link button */}
|
|
692
|
+
<RibbonButtonLink href={'https:///example.com/'} icon={'ic_link'} loading={loading} />
|
|
693
|
+
</RibbonContainer>
|
|
694
|
+
</>
|
|
695
|
+
);
|
|
690
696
|
};
|
|
691
697
|
```
|
|
692
698
|
|