@linzjs/windows 9.5.3 → 9.5.5
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 +109 -106
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -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
|
|
|
@@ -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
|
|
|
@@ -491,7 +491,7 @@ export const TestShowPanel = () => {
|
|
|
491
491
|
|
|
492
492
|
Panels support tabs via the `@linzjs/lui` `LuiTabs` components. Wrap the `Panel` in `LuiTabs` and use `LuiTabsGroup`/`LuiTabsPanelSwitch` in the header.
|
|
493
493
|
|
|
494
|
-
|
|
494
|
+
|
|
495
495
|
|
|
496
496
|
```tsx
|
|
497
497
|
import { LuiTabs, LuiTabsGroup, LuiTabsPanel, LuiTabsPanelSwitch } from '@linzjs/lui';
|
|
@@ -579,114 +579,117 @@ export const TestShowPanelWithGlobalModal = () => (
|
|
|
579
579
|
|
|
580
580
|
A toolbar ribbon with buttons, sliders, menus, and separators. Supports horizontal and vertical orientations.
|
|
581
581
|
|
|
582
|
+
![img.png]()
|
|
583
|
+
|
|
584
|
+
|
|
582
585
|
**Setup** — requires both `LuiModalAsyncContextProvider` and `PanelsContextProvider`:
|
|
583
586
|
|
|
584
587
|
```tsx
|
|
585
588
|
import {
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
589
|
+
RibbonButton,
|
|
590
|
+
RibbonButtonLink,
|
|
591
|
+
RibbonButtonOpenPanel,
|
|
592
|
+
RibbonButtonSlider,
|
|
593
|
+
RibbonContainer,
|
|
594
|
+
RibbonSeparator,
|
|
595
|
+
RibbonMenu,
|
|
596
|
+
RibbonMenuOption,
|
|
597
|
+
RibbonMenuSeparator,
|
|
598
|
+
Panel,
|
|
599
|
+
PanelContent,
|
|
600
|
+
PanelHeader,
|
|
598
601
|
} from '@linzjs/windows';
|
|
599
602
|
import { useState } from 'react';
|
|
600
603
|
|
|
601
604
|
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
|
-
|
|
605
|
+
const [selectedItem, setSelectedItem] = useState('ic_add_rectangle');
|
|
606
|
+
const [loading, setLoading] = useState(false);
|
|
607
|
+
const [processing, setProcessing] = useState(false);
|
|
608
|
+
|
|
609
|
+
return (
|
|
610
|
+
<>
|
|
611
|
+
<button onClick={() => setLoading(!loading)}>Toggle loading</button>
|
|
612
|
+
<button onClick={() => setProcessing(!processing)}>Toggle processing</button>
|
|
613
|
+
|
|
614
|
+
{/* Horizontal ribbon */}
|
|
615
|
+
<RibbonContainer style={{ position: 'absolute', left: 220, top: 120 }}>
|
|
616
|
+
|
|
617
|
+
{/* Button that opens a panel — disabled state */}
|
|
618
|
+
<RibbonButtonOpenPanel
|
|
619
|
+
disabled
|
|
620
|
+
title={'Marks'}
|
|
621
|
+
icon={'ic_marks'}
|
|
622
|
+
componentFn={() => <Panel title="Marks" size={{ width: 640, height: 400 }}><PanelHeader /><PanelContent /></Panel>}
|
|
623
|
+
loading={loading}
|
|
624
|
+
/>
|
|
625
|
+
|
|
626
|
+
<RibbonSeparator />
|
|
627
|
+
|
|
628
|
+
{/* Button that opens a panel — with processing indicator */}
|
|
629
|
+
<RibbonButtonOpenPanel
|
|
630
|
+
title={'Vectors'}
|
|
631
|
+
icon={'ic_line_irregular'}
|
|
632
|
+
componentFn={() => <Panel title="Vectors" size={{ width: 640, height: 400 }}><PanelHeader /><PanelContent /></Panel>}
|
|
633
|
+
loading={loading}
|
|
634
|
+
processing={processing}
|
|
635
|
+
processingMessage={'Validating...'}
|
|
636
|
+
/>
|
|
637
|
+
|
|
638
|
+
{/* Slider button — opens a sub-panel of options below */}
|
|
639
|
+
<RibbonButtonSlider title={selectedItem} icon={selectedItem} alignment={'down'} loading={loading}>
|
|
640
|
+
<RibbonContainer orientation={'vertical'}>
|
|
641
|
+
<RibbonButton
|
|
642
|
+
title={'Rectangle'}
|
|
643
|
+
icon={'ic_add_rectangle'}
|
|
644
|
+
selected={selectedItem === 'ic_add_rectangle'}
|
|
645
|
+
onClick={() => setSelectedItem('ic_add_rectangle')}
|
|
646
|
+
/>
|
|
647
|
+
<RibbonButton
|
|
648
|
+
title={'Other'}
|
|
649
|
+
icon={'ic_polygon_selection'}
|
|
650
|
+
selected={selectedItem === 'ic_polygon_selection'}
|
|
651
|
+
onClick={() => setSelectedItem('ic_polygon_selection')}
|
|
652
|
+
/>
|
|
653
|
+
</RibbonContainer>
|
|
654
|
+
</RibbonButtonSlider>
|
|
655
|
+
|
|
656
|
+
{/* Slider button — dropdown menu with autoClose */}
|
|
657
|
+
<RibbonButtonSlider title={'Other'} icon={'ic_more_vert'} alignment={'down'} autoClose={true} loading={loading}>
|
|
658
|
+
<RibbonMenu>
|
|
659
|
+
<RibbonMenuOption icon={'ic_define_nonprimary_diagram_circle'}>Circle</RibbonMenuOption>
|
|
660
|
+
<RibbonMenuOption icon={'ic_define_nonprimary_diagram_rectangle'} disabled={true}>Rectangle</RibbonMenuOption>
|
|
661
|
+
<RibbonMenuSeparator />
|
|
662
|
+
<RibbonMenuOption>Item 3</RibbonMenuOption>
|
|
663
|
+
<RibbonMenuSeparator />
|
|
664
|
+
<RibbonMenuOption icon={'ic_clear'}>Cancel</RibbonMenuOption>
|
|
665
|
+
</RibbonMenu>
|
|
666
|
+
</RibbonButtonSlider>
|
|
667
|
+
</RibbonContainer>
|
|
668
|
+
|
|
669
|
+
{/* Vertical ribbon */}
|
|
670
|
+
<RibbonContainer orientation={'vertical'} style={{ position: 'absolute', left: 220, top: 180 }}>
|
|
671
|
+
<RibbonButtonOpenPanel
|
|
672
|
+
title={'Vectors'}
|
|
673
|
+
icon={'ic_timeline'}
|
|
674
|
+
componentFn={() => <Panel title="Vectors" size={{ width: 640, height: 400 }}><PanelHeader /><PanelContent /></Panel>}
|
|
675
|
+
loading={loading}
|
|
676
|
+
/>
|
|
677
|
+
{/* Slider opens to the right */}
|
|
678
|
+
<RibbonButtonSlider title={selectedItem} icon={selectedItem} alignment={'right'} loading={loading}>
|
|
679
|
+
<RibbonContainer>
|
|
680
|
+
<RibbonButton
|
|
681
|
+
title={'Rectangle'}
|
|
682
|
+
icon={'ic_add_rectangle'}
|
|
683
|
+
selected={selectedItem === 'ic_add_rectangle'}
|
|
684
|
+
onClick={() => setSelectedItem('ic_add_rectangle')}
|
|
685
|
+
/>
|
|
686
|
+
</RibbonContainer>
|
|
687
|
+
</RibbonButtonSlider>
|
|
688
|
+
{/* External link button */}
|
|
689
|
+
<RibbonButtonLink href={'https://example.com/'} icon={'ic_link'} loading={loading} />
|
|
690
|
+
</RibbonContainer>
|
|
691
|
+
</>
|
|
692
|
+
);
|
|
690
693
|
};
|
|
691
694
|
```
|
|
692
695
|
|