@linzjs/windows 9.5.2 → 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 +108 -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
|
|
|
@@ -493,7 +493,7 @@ export const TestShowPanel = () => {
|
|
|
493
493
|
|
|
494
494
|
Panels support tabs via the `@linzjs/lui` `LuiTabs` components. Wrap the `Panel` in `LuiTabs` and use `LuiTabsGroup`/`LuiTabsPanelSwitch` in the header.
|
|
495
495
|
|
|
496
|
-
|
|
496
|
+
|
|
497
497
|
|
|
498
498
|
```tsx
|
|
499
499
|
import { LuiTabs, LuiTabsGroup, LuiTabsPanel, LuiTabsPanelSwitch } from '@linzjs/lui';
|
|
@@ -589,110 +589,110 @@ A toolbar ribbon with buttons, sliders, menus, and separators. Supports horizont
|
|
|
589
589
|
|
|
590
590
|
```tsx
|
|
591
591
|
import {
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
592
|
+
RibbonButton,
|
|
593
|
+
RibbonButtonLink,
|
|
594
|
+
RibbonButtonOpenPanel,
|
|
595
|
+
RibbonButtonSlider,
|
|
596
|
+
RibbonContainer,
|
|
597
|
+
RibbonSeparator,
|
|
598
|
+
RibbonMenu,
|
|
599
|
+
RibbonMenuOption,
|
|
600
|
+
RibbonMenuSeparator,
|
|
601
|
+
Panel,
|
|
602
|
+
PanelContent,
|
|
603
|
+
PanelHeader,
|
|
604
604
|
} from '@linzjs/windows';
|
|
605
605
|
import { useState } from 'react';
|
|
606
606
|
|
|
607
607
|
export const TestRibbonPanel = () => {
|
|
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
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
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
|
+
);
|
|
696
696
|
};
|
|
697
697
|
```
|
|
698
698
|
|