@team_yumi/ramen 0.4.0-next.20231219-404102c-adcc88489a033e98c6fb3515896e8d8e → 0.4.0-next.20231227-de405c4-09379fe933156a3b642c37fb112ad30d
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/components/mobile/x-modal/root.d.ts +84 -0
- package/components/web/xtable/root.d.ts +1 -0
- package/index.css +32 -26
- package/index.js +1 -1
- package/index.mobile.d.ts +1 -1
- package/package.json +1 -1
- package/components/mobile/xmodal/root.d.ts +0 -26
- /package/components/mobile/{xmodal → x-modal}/index.d.ts +0 -0
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Collections } from './../../../models';
|
|
3
|
+
export interface IAction {
|
|
4
|
+
/**
|
|
5
|
+
* The key of the action
|
|
6
|
+
*/
|
|
7
|
+
key: string;
|
|
8
|
+
/**
|
|
9
|
+
* Text for button
|
|
10
|
+
*/
|
|
11
|
+
text?: string;
|
|
12
|
+
/**
|
|
13
|
+
* Type of button 'default', 'solid', 'tonal', 'outline', 'clear'
|
|
14
|
+
*/
|
|
15
|
+
type?: (typeof Collections.IType)[number];
|
|
16
|
+
/**
|
|
17
|
+
* Icon for button
|
|
18
|
+
*/
|
|
19
|
+
icon?: (typeof Collections.IIcon)[number];
|
|
20
|
+
/**
|
|
21
|
+
* State disabled for button
|
|
22
|
+
*/
|
|
23
|
+
disabled?: boolean;
|
|
24
|
+
/**
|
|
25
|
+
* Loading state in button
|
|
26
|
+
*/
|
|
27
|
+
loading?: boolean;
|
|
28
|
+
/**
|
|
29
|
+
* Render custom component
|
|
30
|
+
*/
|
|
31
|
+
render?: (key: string) => React.ReactNode;
|
|
32
|
+
/**
|
|
33
|
+
* Event fired when button is clicked
|
|
34
|
+
*/
|
|
35
|
+
onAction?: () => void;
|
|
36
|
+
}
|
|
37
|
+
export interface IProps {
|
|
38
|
+
/**
|
|
39
|
+
* Child elements to wrap
|
|
40
|
+
*/
|
|
41
|
+
children?: React.ReactNode;
|
|
42
|
+
/**
|
|
43
|
+
* Custom component, which is placed below the title and subtitle
|
|
44
|
+
*/
|
|
45
|
+
headerChildren?: React.ReactNode;
|
|
46
|
+
/**
|
|
47
|
+
* Icon for modal
|
|
48
|
+
*/
|
|
49
|
+
icon?: (typeof Collections.IIcon)[number];
|
|
50
|
+
/**
|
|
51
|
+
* Title for modal
|
|
52
|
+
*/
|
|
53
|
+
title?: string;
|
|
54
|
+
/**
|
|
55
|
+
* Subtitle for modal
|
|
56
|
+
*/
|
|
57
|
+
subtitle?: string;
|
|
58
|
+
/**
|
|
59
|
+
* Size of modal 'xxs', 'xs', 's', 'm', 'l', 'xl'
|
|
60
|
+
*/
|
|
61
|
+
size?: (typeof Collections.ISize)[number];
|
|
62
|
+
/**
|
|
63
|
+
* Show or hide modal
|
|
64
|
+
*/
|
|
65
|
+
visible: boolean;
|
|
66
|
+
/**
|
|
67
|
+
* If true, show icon close
|
|
68
|
+
*/
|
|
69
|
+
closable?: boolean;
|
|
70
|
+
/**
|
|
71
|
+
* Event fired when icon close is clicked
|
|
72
|
+
*/
|
|
73
|
+
onClose?: () => void;
|
|
74
|
+
/**
|
|
75
|
+
* Arrays for show button
|
|
76
|
+
*/
|
|
77
|
+
actions?: Array<IAction>;
|
|
78
|
+
/**
|
|
79
|
+
* Event fired on buttons
|
|
80
|
+
*/
|
|
81
|
+
onActionClick?: (key: string) => void;
|
|
82
|
+
}
|
|
83
|
+
declare const XModal: React.FC<IProps>;
|
|
84
|
+
export default XModal;
|
package/index.css
CHANGED
|
@@ -3625,7 +3625,7 @@
|
|
|
3625
3625
|
background-color: transparent;
|
|
3626
3626
|
}
|
|
3627
3627
|
|
|
3628
|
-
.root-
|
|
3628
|
+
.root-module_x-modal__bOyFq {
|
|
3629
3629
|
position: fixed;
|
|
3630
3630
|
top: 0px;
|
|
3631
3631
|
left: 0px;
|
|
@@ -3635,41 +3635,41 @@
|
|
|
3635
3635
|
display: none;
|
|
3636
3636
|
}
|
|
3637
3637
|
|
|
3638
|
-
.root-
|
|
3638
|
+
.root-module_x-modal__bOyFq.root-module_x-modal-visible__kkdBb {
|
|
3639
3639
|
display: flex;
|
|
3640
3640
|
flex-direction: column;
|
|
3641
3641
|
justify-content: flex-end;
|
|
3642
3642
|
}
|
|
3643
3643
|
|
|
3644
|
-
.root-
|
|
3644
|
+
.root-module_x-modal-size_xl__bYyI9.root-module_x-modal-visible__kkdBb .root-module_x-modal__modal-show__ygPq9 {
|
|
3645
3645
|
height: 95%;
|
|
3646
3646
|
}
|
|
3647
3647
|
|
|
3648
|
-
.root-
|
|
3648
|
+
.root-module_x-modal-size_l__3Ur5b.root-module_x-modal-visible__kkdBb .root-module_x-modal__modal-show__ygPq9 {
|
|
3649
3649
|
height: 85%;
|
|
3650
3650
|
}
|
|
3651
3651
|
|
|
3652
|
-
.root-
|
|
3652
|
+
.root-module_x-modal-size_m__qnsVl.root-module_x-modal-visible__kkdBb .root-module_x-modal__modal-show__ygPq9 {
|
|
3653
3653
|
height: 70%;
|
|
3654
3654
|
}
|
|
3655
3655
|
|
|
3656
|
-
.root-
|
|
3656
|
+
.root-module_x-modal-size_s__9YkzV.root-module_x-modal-visible__kkdBb .root-module_x-modal__modal-show__ygPq9 {
|
|
3657
3657
|
height: 415px;
|
|
3658
3658
|
}
|
|
3659
3659
|
|
|
3660
|
-
.root-
|
|
3660
|
+
.root-module_x-modal-size_xs__-1-Vc.root-module_x-modal-visible__kkdBb .root-module_x-modal__modal-show__ygPq9 {
|
|
3661
3661
|
height: 352px;
|
|
3662
3662
|
}
|
|
3663
3663
|
|
|
3664
|
-
.root-
|
|
3664
|
+
.root-module_x-modal-size_xxs__DcvRv.root-module_x-modal-visible__kkdBb .root-module_x-modal__modal-show__ygPq9 {
|
|
3665
3665
|
height: 250px;
|
|
3666
3666
|
}
|
|
3667
3667
|
|
|
3668
|
-
.root-
|
|
3668
|
+
.root-module_x-modal__bOyFq.root-module_x-modal-visible__kkdBb .root-module_x-modal__backdrop__Kj2dm {
|
|
3669
3669
|
display: block;
|
|
3670
3670
|
}
|
|
3671
3671
|
|
|
3672
|
-
.root-
|
|
3672
|
+
.root-module_x-modal__modal__4ywZm {
|
|
3673
3673
|
height: 0;
|
|
3674
3674
|
position: relative;
|
|
3675
3675
|
background-color: var(--color-neutral-lightest);
|
|
@@ -3681,7 +3681,7 @@
|
|
|
3681
3681
|
justify-content: space-between;
|
|
3682
3682
|
}
|
|
3683
3683
|
|
|
3684
|
-
.root-
|
|
3684
|
+
.root-module_x-modal__backdrop__Kj2dm {
|
|
3685
3685
|
position: fixed;
|
|
3686
3686
|
top: 0px;
|
|
3687
3687
|
left: 0px;
|
|
@@ -3691,58 +3691,64 @@
|
|
|
3691
3691
|
opacity: 0.6;
|
|
3692
3692
|
}
|
|
3693
3693
|
|
|
3694
|
-
.root-
|
|
3694
|
+
.root-module_x-modal__modal__4ywZm > .root-module_x-modal__modal__close__2-hP- {
|
|
3695
3695
|
position: absolute;
|
|
3696
|
-
right: var(--xbox-padding-
|
|
3697
|
-
top: var(--xbox-padding-
|
|
3696
|
+
right: var(--xbox-padding-l);
|
|
3697
|
+
top: var(--xbox-padding-l);
|
|
3698
3698
|
border-radius: 50%;
|
|
3699
3699
|
}
|
|
3700
3700
|
|
|
3701
|
-
.root-
|
|
3701
|
+
.root-module_x-modal__modal__4ywZm > .root-module_x-modal__modal__close__2-hP- > button > div {
|
|
3702
3702
|
background-color: var(--color-neutral-light);
|
|
3703
3703
|
padding: 4px;
|
|
3704
3704
|
border-radius: 50%;
|
|
3705
3705
|
}
|
|
3706
3706
|
|
|
3707
|
-
.root-
|
|
3708
|
-
|
|
3707
|
+
.root-module_x-modal__modal__header__icon__KbIDv, .root-module_x-modal__modal__header__icon__KbIDv > div{
|
|
3708
|
+
height: 36px;
|
|
3709
|
+
width: 36px;
|
|
3710
|
+
}
|
|
3711
|
+
|
|
3712
|
+
.root-module_x-modal__modal__4ywZm > .root-module_x-modal__modal__header__RlJEZ > .root-module_x-modal__modal__header__icon__KbIDv {
|
|
3713
|
+
padding-bottom: var(--xbox-padding-s);
|
|
3709
3714
|
display: block;
|
|
3710
3715
|
}
|
|
3711
3716
|
|
|
3712
|
-
.root-
|
|
3713
|
-
padding-top: 24px;
|
|
3717
|
+
.root-module_x-modal__modal__4ywZm > .root-module_x-modal__modal__header__RlJEZ > .root-module_x-modal__modal__header__title__WQZg7 {
|
|
3714
3718
|
display: block;
|
|
3715
3719
|
-webkit-user-select: none;
|
|
3716
3720
|
-moz-user-select: none;
|
|
3717
3721
|
user-select: none;
|
|
3718
3722
|
}
|
|
3719
3723
|
|
|
3720
|
-
.root-
|
|
3724
|
+
.root-module_x-modal__modal__4ywZm > .root-module_x-modal__modal__header__RlJEZ > .root-module_x-modal__modal__header__subtitle__2KWGW {
|
|
3721
3725
|
display: block;
|
|
3722
3726
|
padding-top: var(--xbox-padding-xs);
|
|
3723
3727
|
opacity: 0.5;
|
|
3724
3728
|
}
|
|
3725
3729
|
|
|
3726
|
-
.root-
|
|
3730
|
+
.root-module_x-modal__modal__4ywZm > .root-module_x-modal__modal__header__RlJEZ > .root-module_x-modal__modal__header__children__RYX9d {
|
|
3727
3731
|
padding-top: var(--xbox-padding-xs);
|
|
3728
3732
|
}
|
|
3729
3733
|
|
|
3730
|
-
.root-
|
|
3734
|
+
.root-module_x-modal__modal__4ywZm > .root-module_x-modal__modal__header__RlJEZ {
|
|
3731
3735
|
padding: 0 var(--xbox-padding-xl);
|
|
3732
|
-
padding-top:
|
|
3733
|
-
padding-bottom:
|
|
3736
|
+
padding-top: 24px;
|
|
3737
|
+
padding-bottom: 16px;
|
|
3734
3738
|
}
|
|
3735
3739
|
|
|
3736
|
-
.root-
|
|
3740
|
+
.root-module_x-modal__modal__4ywZm > .root-module_x-modal__modal__body__bBjAl {
|
|
3737
3741
|
padding: var(--xbox-padding-xl);
|
|
3742
|
+
padding-top: 0;
|
|
3738
3743
|
overflow: auto;
|
|
3739
3744
|
flex: 1;
|
|
3740
3745
|
}
|
|
3741
3746
|
|
|
3742
|
-
.root-
|
|
3747
|
+
.root-module_x-modal__modal__4ywZm > .root-module_x-modal__modal__actions__cGHKS {
|
|
3743
3748
|
display: block;
|
|
3744
3749
|
padding: var(--xbox-padding-xl);
|
|
3745
3750
|
margin-bottom: env(safe-area-inset-bottom);
|
|
3751
|
+
padding-bottom: 32px;
|
|
3746
3752
|
}
|
|
3747
3753
|
|
|
3748
3754
|
.root-module_xselect__eYomf {
|