rappel-ui 1.0.27 → 1.0.29
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 +1 -0
- package/README.zh.md +1 -0
- package/cjs/components/index.d.ts +5 -1
- package/cjs/components/index.js +1 -1
- package/cjs/components/message/index.d.ts +4 -0
- package/cjs/components/message/index.js +1 -0
- package/cjs/components/message/src/constants.d.ts +2 -0
- package/cjs/components/message/src/constants.js +1 -0
- package/cjs/components/message/src/create-message.d.ts +2 -0
- package/cjs/components/message/src/create-message.js +1 -0
- package/cjs/components/message/src/message.js +1 -0
- package/cjs/components/{tooltip/src/content.vue.d.ts → message/src/message.vue.d.ts} +15 -19
- package/cjs/components/message/src/message.vue_vue_type_script_setup_true_lang.js +6 -0
- package/cjs/components/message/src/types.d.ts +55 -0
- package/{es/components/tooltip/src/use-emit.d.ts → cjs/components/message/src/use-message-emit.d.ts} +2 -6
- package/cjs/components/message/src/use-message-emit.js +1 -0
- package/cjs/components/message/src/use-message.d.ts +2 -0
- package/cjs/components/message/src/use-message.js +1 -0
- package/cjs/components/message/style/css.js +2 -0
- package/cjs/components/message/style/index.js +2 -0
- package/cjs/components/neutral-color/index.d.ts +3 -0
- package/cjs/components/neutral-color/index.js +1 -0
- package/cjs/components/neutral-color/style/css.js +2 -0
- package/cjs/components/neutral-color/style/index.js +2 -0
- package/cjs/components/popconfirm/index.d.ts +0 -20
- package/cjs/components/popconfirm/src/popconfirm.vue.d.ts +16 -24
- package/cjs/components/popconfirm/src/popconfirm.vue_vue_type_script_setup_true_lang.js +1 -1
- package/cjs/components/popconfirm/src/types.d.ts +2 -2
- package/cjs/components/{tooltip/src/use-emit.d.ts → popconfirm/src/use-popconfirm-emit.d.ts} +2 -6
- package/cjs/components/popconfirm/src/use-popconfirm-emit.js +1 -0
- package/cjs/components/popover/index.d.ts +1 -20
- package/cjs/components/popover/index.js +1 -1
- package/cjs/components/popover/src/popover.vue.d.ts +3 -11
- package/cjs/components/popover/src/popover.vue_vue_type_script_setup_true_lang.js +1 -1
- package/cjs/components/popover/src/types.d.ts +2 -2
- package/cjs/components/popover/src/use-popover-emit.d.ts +12 -0
- package/cjs/components/popover/src/use-popover-emit.js +1 -0
- package/cjs/components/primary-color/index.d.ts +7 -0
- package/cjs/components/primary-color/index.js +1 -0
- package/cjs/components/primary-color/style/css.d.ts +0 -0
- package/cjs/components/primary-color/style/css.js +2 -0
- package/cjs/components/primary-color/style/index.d.ts +0 -0
- package/cjs/components/primary-color/style/index.js +2 -0
- package/cjs/components/secondary-color/index.d.ts +13 -0
- package/cjs/components/secondary-color/index.js +1 -0
- package/cjs/components/secondary-color/style/css.d.ts +0 -0
- package/cjs/components/secondary-color/style/css.js +2 -0
- package/cjs/components/secondary-color/style/index.d.ts +0 -0
- package/cjs/components/secondary-color/style/index.js +2 -0
- package/cjs/components/tooltip/index.d.ts +24 -33
- package/cjs/components/tooltip/index.js +1 -1
- package/cjs/components/tooltip/src/tooltip.vue.d.ts +18 -15
- package/cjs/components/tooltip/src/tooltip.vue_vue_type_script_setup_true_lang.js +1 -1
- package/cjs/components/tooltip/src/types.d.ts +5 -40
- package/cjs/components/tooltip/src/use-tooltip-emit.d.ts +12 -0
- package/cjs/components/tooltip/src/use-tooltip-emit.js +1 -0
- package/cjs/components/transition/index.d.ts +67 -0
- package/cjs/components/transition/index.js +1 -0
- package/cjs/components/transition/src/transition.js +1 -0
- package/cjs/components/transition/src/transition.vue.d.ts +33 -0
- package/cjs/components/transition/src/transition.vue_vue_type_script_setup_true_lang.js +1 -0
- package/cjs/components/transition/src/types.d.ts +21 -0
- package/cjs/components/transition/src/use-transition-emit.d.ts +12 -0
- package/cjs/components/transition/src/use-transition-emit.js +1 -0
- package/cjs/components/transition/style/css.d.ts +0 -0
- package/cjs/components/transition/style/css.js +0 -0
- package/cjs/components/transition/style/index.d.ts +0 -0
- package/cjs/components/transition/style/index.js +0 -0
- package/cjs/index.d.ts +192 -78
- package/cjs/index.js +1 -1
- package/cjs/rappel-ui/resolvers.js +1 -1
- package/cjs/svg-icons/icon-names.d.ts +1 -1
- package/cjs/svg-icons/icon-names.js +1 -1
- package/cjs/svg-icons/index.d.ts +2 -0
- package/cjs/svg-icons/index.js +1 -1
- package/cjs/svg-icons/src/close-circle.d.ts +43 -0
- package/cjs/svg-icons/src/close-circle.js +1 -0
- package/cjs/svg-icons/src/info-circle.d.ts +43 -0
- package/cjs/svg-icons/src/info-circle.js +1 -0
- package/es/components/index.d.ts +5 -1
- package/es/components/index.mjs +27 -19
- package/es/components/message/index.d.ts +4 -0
- package/es/components/message/index.mjs +6 -0
- package/es/components/message/src/constants.d.ts +2 -0
- package/es/components/message/src/constants.mjs +15 -0
- package/es/components/message/src/create-message.d.ts +2 -0
- package/es/components/message/src/create-message.mjs +136 -0
- package/es/components/message/src/message.mjs +5 -0
- package/es/components/{tooltip/src/content.vue.d.ts → message/src/message.vue.d.ts} +15 -19
- package/es/components/message/src/message.vue_vue_type_script_setup_true_lang.mjs +228 -0
- package/es/components/message/src/types.d.ts +55 -0
- package/es/components/message/src/use-message-emit.d.ts +12 -0
- package/es/components/message/src/use-message-emit.mjs +7 -0
- package/es/components/message/src/use-message.d.ts +2 -0
- package/es/components/message/src/use-message.mjs +7 -0
- package/es/components/message/style/css.d.ts +0 -0
- package/es/components/message/style/css.mjs +2 -0
- package/es/components/message/style/index.d.ts +0 -0
- package/es/components/message/style/index.mjs +2 -0
- package/es/components/neutral-color/index.d.ts +3 -0
- package/es/components/neutral-color/index.mjs +7 -0
- package/es/components/{colors → neutral-color}/src/neutral-color.mjs +1 -1
- package/es/components/{colors → neutral-color}/src/neutral-color.vue_vue_type_script_setup_true_lang.mjs +1 -1
- package/es/components/neutral-color/style/css.d.ts +0 -0
- package/es/components/neutral-color/style/css.mjs +2 -0
- package/es/components/neutral-color/style/index.d.ts +0 -0
- package/es/components/neutral-color/style/index.mjs +2 -0
- package/es/components/popconfirm/index.d.ts +0 -20
- package/es/components/popconfirm/src/popconfirm.vue.d.ts +16 -24
- package/es/components/popconfirm/src/popconfirm.vue_vue_type_script_setup_true_lang.mjs +41 -48
- package/es/components/popconfirm/src/types.d.ts +2 -2
- package/es/components/popconfirm/src/use-popconfirm-emit.d.ts +12 -0
- package/es/components/popconfirm/src/use-popconfirm-emit.mjs +7 -0
- package/es/components/popover/index.d.ts +1 -20
- package/es/components/popover/index.mjs +4 -3
- package/es/components/popover/src/popover.vue.d.ts +3 -11
- package/es/components/popover/src/popover.vue_vue_type_script_setup_true_lang.mjs +21 -28
- package/es/components/popover/src/types.d.ts +2 -2
- package/es/components/popover/src/use-popover-emit.d.ts +12 -0
- package/es/components/popover/src/use-popover-emit.mjs +7 -0
- package/es/components/primary-color/index.d.ts +7 -0
- package/es/components/primary-color/index.mjs +7 -0
- package/es/components/{colors → primary-color}/src/primary-color.mjs +1 -1
- package/es/components/{colors → primary-color}/src/primary-color.vue_vue_type_script_setup_true_lang.mjs +1 -1
- package/es/components/primary-color/style/css.d.ts +0 -0
- package/es/components/primary-color/style/css.mjs +2 -0
- package/es/components/primary-color/style/index.d.ts +0 -0
- package/es/components/primary-color/style/index.mjs +2 -0
- package/es/components/secondary-color/index.d.ts +13 -0
- package/es/components/secondary-color/index.mjs +7 -0
- package/es/components/{colors → secondary-color}/src/secondary-color.mjs +1 -1
- package/es/components/{colors → secondary-color}/src/secondary-color.vue_vue_type_script_setup_true_lang.mjs +1 -1
- package/es/components/secondary-color/style/css.d.ts +0 -0
- package/es/components/secondary-color/style/css.mjs +2 -0
- package/es/components/secondary-color/style/index.d.ts +0 -0
- package/es/components/secondary-color/style/index.mjs +2 -0
- package/es/components/tooltip/index.d.ts +24 -33
- package/es/components/tooltip/index.mjs +2 -2
- package/es/components/tooltip/src/tooltip.vue.d.ts +18 -15
- package/es/components/tooltip/src/tooltip.vue_vue_type_script_setup_true_lang.mjs +137 -124
- package/es/components/tooltip/src/types.d.ts +5 -40
- package/es/components/tooltip/src/use-tooltip-emit.d.ts +12 -0
- package/es/components/tooltip/src/use-tooltip-emit.mjs +7 -0
- package/es/components/transition/index.d.ts +67 -0
- package/es/components/transition/index.mjs +8 -0
- package/es/components/transition/src/transition.mjs +5 -0
- package/es/components/transition/src/transition.vue.d.ts +33 -0
- package/es/components/transition/src/transition.vue_vue_type_script_setup_true_lang.mjs +83 -0
- package/es/components/transition/src/types.d.ts +21 -0
- package/es/components/transition/src/use-transition-emit.d.ts +12 -0
- package/es/components/{tooltip/src/use-emit.mjs → transition/src/use-transition-emit.mjs} +2 -6
- package/es/components/transition/style/css.d.ts +0 -0
- package/es/components/transition/style/css.mjs +0 -0
- package/es/components/transition/style/index.d.ts +0 -0
- package/es/components/transition/style/index.mjs +0 -0
- package/es/index.d.ts +192 -78
- package/es/index.mjs +67 -61
- package/es/rappel-ui/resolvers.mjs +1 -5
- package/es/svg-icons/icon-names.d.ts +1 -1
- package/es/svg-icons/icon-names.mjs +1 -1
- package/es/svg-icons/index.d.ts +2 -0
- package/es/svg-icons/index.mjs +10 -4
- package/es/svg-icons/src/close-circle.d.ts +43 -0
- package/es/svg-icons/src/close-circle.mjs +7 -0
- package/es/svg-icons/src/info-circle.d.ts +43 -0
- package/es/svg-icons/src/info-circle.mjs +7 -0
- package/package.json +2 -2
- package/theme-chalk/index.css +1 -1
- package/theme-chalk/re-message.css +1 -0
- package/theme-chalk/re-neutral-color.css +1 -0
- package/theme-chalk/re-primary-color.css +1 -0
- package/theme-chalk/re-secondary-color.css +1 -0
- package/theme-chalk/src/css-vars/_message.scss +42 -0
- package/theme-chalk/src/index.scss +4 -1
- package/theme-chalk/src/message.scss +270 -0
- package/theme-chalk/src/mixins/_message.scss +51 -0
- package/theme-chalk/src/{colors.scss → neutral-color.scss} +0 -43
- package/theme-chalk/src/primary-color.scss +33 -0
- package/theme-chalk/src/secondary-color.scss +40 -0
- package/cjs/components/colors/index.d.ts +0 -7
- package/cjs/components/colors/index.js +0 -1
- package/cjs/components/colors/src/colors.js +0 -1
- package/cjs/components/colors/src/colors.vue.d.ts +0 -4
- package/cjs/components/colors/src/colors.vue_vue_type_script_setup_true_lang.js +0 -1
- package/cjs/components/colors/style/css.js +0 -2
- package/cjs/components/colors/style/index.js +0 -2
- package/cjs/components/tooltip/src/content.js +0 -1
- package/cjs/components/tooltip/src/content.vue_vue_type_script_setup_true_lang.js +0 -1
- package/cjs/components/tooltip/src/use-emit.js +0 -1
- package/es/components/colors/index.d.ts +0 -7
- package/es/components/colors/index.mjs +0 -14
- package/es/components/colors/src/colors.mjs +0 -5
- package/es/components/colors/src/colors.vue.d.ts +0 -4
- package/es/components/colors/src/colors.vue_vue_type_script_setup_true_lang.mjs +0 -21
- package/es/components/colors/style/css.mjs +0 -2
- package/es/components/colors/style/index.mjs +0 -2
- package/es/components/tooltip/src/content.mjs +0 -5
- package/es/components/tooltip/src/content.vue_vue_type_script_setup_true_lang.mjs +0 -166
- package/theme-chalk/re-colors.css +0 -1
- /package/cjs/components/{colors → message}/style/css.d.ts +0 -0
- /package/cjs/components/{colors → message}/style/index.d.ts +0 -0
- /package/cjs/components/{colors → neutral-color}/src/neutral-color.js +0 -0
- /package/cjs/components/{colors → neutral-color}/src/neutral-color.vue.d.ts +0 -0
- /package/cjs/components/{colors → neutral-color}/src/neutral-color.vue_vue_type_script_setup_true_lang.js +0 -0
- /package/{es/components/colors → cjs/components/neutral-color}/style/css.d.ts +0 -0
- /package/{es/components/colors → cjs/components/neutral-color}/style/index.d.ts +0 -0
- /package/cjs/components/{colors → primary-color}/src/primary-color.js +0 -0
- /package/cjs/components/{colors → primary-color}/src/primary-color.vue.d.ts +0 -0
- /package/cjs/components/{colors → primary-color}/src/primary-color.vue_vue_type_script_setup_true_lang.js +0 -0
- /package/cjs/components/{colors → secondary-color}/src/secondary-color.js +0 -0
- /package/cjs/components/{colors → secondary-color}/src/secondary-color.vue.d.ts +0 -0
- /package/cjs/components/{colors → secondary-color}/src/secondary-color.vue_vue_type_script_setup_true_lang.js +0 -0
- /package/es/components/{colors → neutral-color}/src/neutral-color.vue.d.ts +0 -0
- /package/es/components/{colors → primary-color}/src/primary-color.vue.d.ts +0 -0
- /package/es/components/{colors → secondary-color}/src/secondary-color.vue.d.ts +0 -0
|
@@ -0,0 +1,270 @@
|
|
|
1
|
+
@use 'mixins/index' as *;
|
|
2
|
+
@use 'mixins/_message' as *;
|
|
3
|
+
@use 'function/index' as *;
|
|
4
|
+
|
|
5
|
+
@include buildRootCls('message') {
|
|
6
|
+
&.is-light {
|
|
7
|
+
@include message-var('light');
|
|
8
|
+
}
|
|
9
|
+
&.is-dark {
|
|
10
|
+
@include message-var('dark');
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
$border-color: getCssVar('message', 'border-color');
|
|
14
|
+
$bgcolor: getCssVar('message', 'bgcolor');
|
|
15
|
+
$color: getCssVar('message', 'color');
|
|
16
|
+
$font-size: getCssVar('message', 'font', 'size');
|
|
17
|
+
$border-radius: getCssVar('message', 'border-radius');
|
|
18
|
+
|
|
19
|
+
display: flex;
|
|
20
|
+
align-items: start;
|
|
21
|
+
padding: getCssVar('message', 'padding');
|
|
22
|
+
color: $color;
|
|
23
|
+
background-color: $bgcolor;
|
|
24
|
+
border-radius: $border-radius;
|
|
25
|
+
border: 1px solid $border-color;
|
|
26
|
+
|
|
27
|
+
&__icon {
|
|
28
|
+
flex-shrink: 0;
|
|
29
|
+
margin-right: 5px;
|
|
30
|
+
font-size: getCssVar('message', 'icon', 'size');
|
|
31
|
+
}
|
|
32
|
+
&__content {
|
|
33
|
+
font-size: $font-size;
|
|
34
|
+
line-height: 1.2;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
&__close {
|
|
38
|
+
flex-shrink: 0;
|
|
39
|
+
margin-left: 5px;
|
|
40
|
+
color: $color;
|
|
41
|
+
font-size: getCssVar('message', 'close', 'size');
|
|
42
|
+
cursor: pointer;
|
|
43
|
+
}
|
|
44
|
+
&[data-placement='top'],
|
|
45
|
+
&[data-placement='bottom'] {
|
|
46
|
+
left: 50%;
|
|
47
|
+
transform: translateX(-50%);
|
|
48
|
+
}
|
|
49
|
+
&[data-placement='top-start'],
|
|
50
|
+
&[data-placement='bottom-start'] {
|
|
51
|
+
left: 5px;
|
|
52
|
+
}
|
|
53
|
+
&[data-placement='left-top'] {
|
|
54
|
+
top: 0;
|
|
55
|
+
left: 0;
|
|
56
|
+
}
|
|
57
|
+
&[data-placement='left-bottom'] {
|
|
58
|
+
bottom: 0;
|
|
59
|
+
left: 0;
|
|
60
|
+
}
|
|
61
|
+
&[data-placement='top-end'],
|
|
62
|
+
&[data-placement='bottom-end'] {
|
|
63
|
+
right: 5px;
|
|
64
|
+
}
|
|
65
|
+
&[data-placement='right-top'] {
|
|
66
|
+
top: 0;
|
|
67
|
+
right: 0;
|
|
68
|
+
}
|
|
69
|
+
&[data-placement='right-bottom'] {
|
|
70
|
+
bottom: 0;
|
|
71
|
+
right: 0;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
&[data-placement='left'],
|
|
75
|
+
&[data-placement='right'] {
|
|
76
|
+
top: 50%;
|
|
77
|
+
transform: translateY(-50%);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
&[data-placement='left-start'],
|
|
81
|
+
&[data-placement='right-start'] {
|
|
82
|
+
top: 5px;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
&[data-placement='left-end'],
|
|
86
|
+
&[data-placement='right-end'] {
|
|
87
|
+
bottom: 5px;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
&.top-enter-from {
|
|
91
|
+
opacity: 0;
|
|
92
|
+
&[data-placement='top-start'],
|
|
93
|
+
&[data-placement='top-end'] {
|
|
94
|
+
transform: translateY(-20px);
|
|
95
|
+
}
|
|
96
|
+
&[data-placement='top'] {
|
|
97
|
+
transform: translateX(-50%) translateY(-20px);
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
&.top-enter-active {
|
|
102
|
+
opacity: 0;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
&.top-enter-to,
|
|
106
|
+
&.top-leave-from {
|
|
107
|
+
opacity: 1;
|
|
108
|
+
&[data-placement='top'] {
|
|
109
|
+
transform: translateX(-50%) translateY(0);
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
&.top-leave-active {
|
|
114
|
+
opacity: 1;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
&.top-leave-to {
|
|
118
|
+
opacity: 0;
|
|
119
|
+
&[data-placement='top'] {
|
|
120
|
+
transform: translateX(-50%) translateY(-20px);
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
&.bottom-enter-from {
|
|
125
|
+
opacity: 0;
|
|
126
|
+
&[data-placement='bottom'] {
|
|
127
|
+
transform: translateX(-50%) translateY(20px);
|
|
128
|
+
}
|
|
129
|
+
&[data-placement='bottom-start'],
|
|
130
|
+
&[data-placement='bottom-end'] {
|
|
131
|
+
transform: translateX(0) translateY(20px);
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
&.bottom-enter-active {
|
|
135
|
+
opacity: 0;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
&.bottom-enter-to,
|
|
139
|
+
&.bottom-leave-from {
|
|
140
|
+
opacity: 1;
|
|
141
|
+
&[data-placement='bottom'] {
|
|
142
|
+
transform: translateX(-50%) translateY(0);
|
|
143
|
+
}
|
|
144
|
+
&[data-placement='bottom-start'],
|
|
145
|
+
&[data-placement='bottom-end'] {
|
|
146
|
+
transform: translateX(0) translateY(0);
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
&.bottom-leave-active {
|
|
151
|
+
opacity: 1;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
&.bottom-leave-to {
|
|
155
|
+
opacity: 0;
|
|
156
|
+
&[data-placement='bottom'] {
|
|
157
|
+
transform: translateX(-50%) translateY(20px);
|
|
158
|
+
}
|
|
159
|
+
&[data-placement='bottom-start'],
|
|
160
|
+
&[data-placement='bottom-end'] {
|
|
161
|
+
transform: translateX(0) translateY(20px);
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
&.left-enter-from {
|
|
166
|
+
opacity: 0;
|
|
167
|
+
&[data-placement='left'] {
|
|
168
|
+
transform: translateY(-50%) translateX(-20px);
|
|
169
|
+
}
|
|
170
|
+
&[data-placement='left-start'],
|
|
171
|
+
&[data-placement='left-end'] {
|
|
172
|
+
transform: translateY(0) translateX(-20px);
|
|
173
|
+
}
|
|
174
|
+
&[data-placement='left-top'],
|
|
175
|
+
&[data-placement='left-bottom'] {
|
|
176
|
+
transform: translateY(0) translateX(-100%);
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
&.left-enter-active {
|
|
180
|
+
opacity: 0;
|
|
181
|
+
}
|
|
182
|
+
&.left-enter-to,
|
|
183
|
+
&.left-leave-from {
|
|
184
|
+
opacity: 1;
|
|
185
|
+
&[data-placement='left'] {
|
|
186
|
+
transform: translateY(-50%) translateX(0);
|
|
187
|
+
}
|
|
188
|
+
&[data-placement='left-start'],
|
|
189
|
+
&[data-placement='left-end'] {
|
|
190
|
+
transform: translateY(0) translateX(0);
|
|
191
|
+
}
|
|
192
|
+
&[data-placement='left-top'],
|
|
193
|
+
&[data-placement='left-bottom'] {
|
|
194
|
+
transform: translateY(0) translateX(0);
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
&.left-leave-active {
|
|
198
|
+
opacity: 1;
|
|
199
|
+
}
|
|
200
|
+
&.left-leave-to {
|
|
201
|
+
opacity: 0;
|
|
202
|
+
&[data-placement='left'] {
|
|
203
|
+
transform: translateY(-50%) translateX(-20px);
|
|
204
|
+
}
|
|
205
|
+
&[data-placement='left-start'],
|
|
206
|
+
&[data-placement='left-end'] {
|
|
207
|
+
transform: translateY(0) translateX(-20px);
|
|
208
|
+
}
|
|
209
|
+
&[data-placement='left-top'],
|
|
210
|
+
&[data-placement='left-bottom'] {
|
|
211
|
+
transform: translateY(0) translateX(-100%);
|
|
212
|
+
}
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
&.right-enter-from {
|
|
216
|
+
opacity: 0;
|
|
217
|
+
&[data-placement='right'] {
|
|
218
|
+
transform: translateY(-50%) translateX(20px);
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
&[data-placement='right-start'],
|
|
222
|
+
&[data-placement='right-end'] {
|
|
223
|
+
transform: translateY(0) translateX(20px);
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
&[data-placement='right-top'],
|
|
227
|
+
&[data-placement='right-bottom'] {
|
|
228
|
+
transform: translateY(0) translateX(100%);
|
|
229
|
+
}
|
|
230
|
+
}
|
|
231
|
+
&.right-enter-active {
|
|
232
|
+
opacity: 0;
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
&.right-enter-to,
|
|
236
|
+
&.right-leave-from {
|
|
237
|
+
opacity: 1;
|
|
238
|
+
&[data-placement='right'] {
|
|
239
|
+
transform: translateY(-50%) translateX(0);
|
|
240
|
+
}
|
|
241
|
+
&[data-placement='right-start'],
|
|
242
|
+
&[data-placement='right-end'] {
|
|
243
|
+
transform: translateY(0) translateX(0);
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
&[data-placement='right-top'],
|
|
247
|
+
&[data-placement='right-bottom'] {
|
|
248
|
+
transform: translateY(0) translateX(0);
|
|
249
|
+
}
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
&.right-leave-active {
|
|
253
|
+
opacity: 1;
|
|
254
|
+
}
|
|
255
|
+
&.right-leave-to {
|
|
256
|
+
opacity: 0;
|
|
257
|
+
&[data-placement='right'] {
|
|
258
|
+
transform: translateY(-50%) translateX(20px);
|
|
259
|
+
}
|
|
260
|
+
&[data-placement='right-start'],
|
|
261
|
+
&[data-placement='right-end'] {
|
|
262
|
+
transform: translateY(0) translateX(20px);
|
|
263
|
+
}
|
|
264
|
+
|
|
265
|
+
&[data-placement='right-top'],
|
|
266
|
+
&[data-placement='right-bottom'] {
|
|
267
|
+
transform: translateY(0) translateX(100%);
|
|
268
|
+
}
|
|
269
|
+
}
|
|
270
|
+
}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
@use 'sass:map';
|
|
2
|
+
@use '../css-vars/_message' as *;
|
|
3
|
+
@use './index' as *;
|
|
4
|
+
@use '../function/index' as *;
|
|
5
|
+
|
|
6
|
+
@mixin set-bgcolor-var($key, $val) {
|
|
7
|
+
#{getCssVarStr('message' ,'bgcolor')}: #{deepGet($message, $key, $val)};
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
@mixin set-color-var($key, $val) {
|
|
11
|
+
#{getCssVarStr('message' ,'color')}: #{deepGet($message, $key, $val)};
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
@mixin set-bordercolor-var($key, $val) {
|
|
15
|
+
#{getCssVarStr('message' ,'border-color')}: #{deepGet($message, $key, $val)};
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
@mixin set-radius-var($key, $val) {
|
|
19
|
+
#{getCssVarStr('message' ,'border-radius')}: #{deepGet($message, $key, $val)};
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
@mixin set-font-size-var($key, $val) {
|
|
23
|
+
#{getCssVarStr('message' ,'font-size')}: #{deepGet($message, $key, $val)};
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
@mixin set-padding-var($key, $val) {
|
|
27
|
+
#{getCssVarStr('message' ,'padding')}: #{deepGet($message, $key, $val)};
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
@mixin set-close-size-var($key, $val) {
|
|
31
|
+
#{getCssVarStr('message' ,'close-size')}: #{deepGet($message, $key, $val)};
|
|
32
|
+
}
|
|
33
|
+
@mixin set-icon-size-var($key, $val) {
|
|
34
|
+
#{getCssVarStr('message' ,'icon-size')}: #{deepGet($message, $key, $val)};
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
@mixin message-theme-var($theme) {
|
|
38
|
+
@include set-bgcolor-var($theme, 'bgcolor');
|
|
39
|
+
@include set-color-var($theme, 'color');
|
|
40
|
+
@include set-bordercolor-var($theme, 'border-color');
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
@mixin message-var($theme) {
|
|
44
|
+
@include set-font-size-var('message', 'font-size');
|
|
45
|
+
@include set-radius-var('message', 'border-radius');
|
|
46
|
+
@include set-padding-var('message', 'padding');
|
|
47
|
+
@include set-close-size-var('message', 'close-size');
|
|
48
|
+
@include set-icon-size-var('message', 'icon-size');
|
|
49
|
+
|
|
50
|
+
@include message-theme-var($theme);
|
|
51
|
+
}
|
|
@@ -1,28 +1,6 @@
|
|
|
1
1
|
@use 'mixins/index' as *;
|
|
2
2
|
|
|
3
3
|
@include buildRootCls('colors') {
|
|
4
|
-
&--primary {
|
|
5
|
-
width: 60rem;
|
|
6
|
-
border-radius: 4px;
|
|
7
|
-
overflow: hidden;
|
|
8
|
-
color: #ffffff;
|
|
9
|
-
max-width: 100%;
|
|
10
|
-
}
|
|
11
|
-
@include sub('code') {
|
|
12
|
-
overflow-x: auto;
|
|
13
|
-
pre {
|
|
14
|
-
padding: 1em;
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
|
-
&--secondary {
|
|
18
|
-
display: grid;
|
|
19
|
-
grid-template-columns: repeat(2, 1fr);
|
|
20
|
-
gap: 1rem;
|
|
21
|
-
max-width: 100%;
|
|
22
|
-
@media (max-width: 768px) {
|
|
23
|
-
grid-template-columns: repeat(1, 1fr);
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
4
|
&--neutral {
|
|
27
5
|
display: grid;
|
|
28
6
|
grid-template-columns: repeat(4, 1fr);
|
|
@@ -33,27 +11,6 @@
|
|
|
33
11
|
&__group {
|
|
34
12
|
min-width: 0;
|
|
35
13
|
}
|
|
36
|
-
&__panel {
|
|
37
|
-
border-radius: 4px;
|
|
38
|
-
overflow: hidden;
|
|
39
|
-
color: #ffffff;
|
|
40
|
-
}
|
|
41
|
-
&__base {
|
|
42
|
-
color: #ffffff;
|
|
43
|
-
height: 6rem;
|
|
44
|
-
box-shadow: 10px 10px;
|
|
45
|
-
padding: 1rem;
|
|
46
|
-
}
|
|
47
|
-
&__shades {
|
|
48
|
-
display: flex;
|
|
49
|
-
align-items: center;
|
|
50
|
-
flex-wrap: nowrap;
|
|
51
|
-
}
|
|
52
|
-
&__shade {
|
|
53
|
-
flex: 1;
|
|
54
|
-
height: 3.2rem;
|
|
55
|
-
padding: 0.2rem;
|
|
56
|
-
}
|
|
57
14
|
&__collects {
|
|
58
15
|
border-radius: 4px;
|
|
59
16
|
overflow: hidden;
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
@use 'mixins/index' as *;
|
|
2
|
+
|
|
3
|
+
@include buildRootCls('colors') {
|
|
4
|
+
&--primary {
|
|
5
|
+
width: 60rem;
|
|
6
|
+
border-radius: 4px;
|
|
7
|
+
overflow: hidden;
|
|
8
|
+
color: #ffffff;
|
|
9
|
+
max-width: 100%;
|
|
10
|
+
}
|
|
11
|
+
@include sub('code') {
|
|
12
|
+
overflow-x: auto;
|
|
13
|
+
pre {
|
|
14
|
+
padding: 1em;
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
&__base {
|
|
18
|
+
color: #ffffff;
|
|
19
|
+
height: 6rem;
|
|
20
|
+
box-shadow: 10px 10px;
|
|
21
|
+
padding: 1rem;
|
|
22
|
+
}
|
|
23
|
+
&__shades {
|
|
24
|
+
display: flex;
|
|
25
|
+
align-items: center;
|
|
26
|
+
flex-wrap: nowrap;
|
|
27
|
+
}
|
|
28
|
+
&__shade {
|
|
29
|
+
flex: 1;
|
|
30
|
+
height: 3.2rem;
|
|
31
|
+
padding: 0.2rem;
|
|
32
|
+
}
|
|
33
|
+
}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
@use 'mixins/index' as *;
|
|
2
|
+
|
|
3
|
+
@include buildRootCls('colors') {
|
|
4
|
+
@include sub('code') {
|
|
5
|
+
overflow-x: auto;
|
|
6
|
+
pre {
|
|
7
|
+
padding: 1em;
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
&--secondary {
|
|
11
|
+
display: grid;
|
|
12
|
+
grid-template-columns: repeat(2, 1fr);
|
|
13
|
+
gap: 1rem;
|
|
14
|
+
max-width: 100%;
|
|
15
|
+
@media (max-width: 768px) {
|
|
16
|
+
grid-template-columns: repeat(1, 1fr);
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
&__panel {
|
|
20
|
+
border-radius: 4px;
|
|
21
|
+
overflow: hidden;
|
|
22
|
+
color: #ffffff;
|
|
23
|
+
}
|
|
24
|
+
&__base {
|
|
25
|
+
color: #ffffff;
|
|
26
|
+
height: 6rem;
|
|
27
|
+
box-shadow: 10px 10px;
|
|
28
|
+
padding: 1rem;
|
|
29
|
+
}
|
|
30
|
+
&__shades {
|
|
31
|
+
display: flex;
|
|
32
|
+
align-items: center;
|
|
33
|
+
flex-wrap: nowrap;
|
|
34
|
+
}
|
|
35
|
+
&__shade {
|
|
36
|
+
flex: 1;
|
|
37
|
+
height: 3.2rem;
|
|
38
|
+
padding: 0.2rem;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import { default as PrimaryColor } from './src/primary-color.vue';
|
|
2
|
-
import { default as SecondaryColor } from './src/secondary-color.vue';
|
|
3
|
-
import { default as NeutralColor } from './src/neutral-color.vue';
|
|
4
|
-
import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
|
|
5
|
-
export declare const ReColors: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
|
|
6
|
-
export { PrimaryColor as RePrimaryColor, SecondaryColor as ReSecondaryColor, NeutralColor as ReNeutralColor };
|
|
7
|
-
export default ReColors;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
const e=require("../../utils/vue/index.js");require("../../utils/index.js");const t=require("./src/primary-color.js"),n=require("./src/secondary-color.js"),r=require("./src/neutral-color.js"),i=require("./src/colors.js");var a=e.withInstall(i.default,{RePrimaryColor:t.default,ReSecondaryColor:n.default,ReNeutralColor:r.default});exports.ReColors=a,exports.default=a,exports.ReNeutralColor=r.default,exports.RePrimaryColor=t.default,exports.ReSecondaryColor=n.default;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
var e=require("./colors.vue_vue_type_script_setup_true_lang.js").default;exports.default=e;
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
|
|
2
|
-
declare const __VLS_export: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
|
|
3
|
-
declare const _default: typeof __VLS_export;
|
|
4
|
-
export default _default;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
const e=require("./primary-color.js"),t=require("./secondary-color.js"),n=require("./neutral-color.js");let r=require("vue");var i=(0,r.defineComponent)({name:`ReColors`,__name:`colors`,setup(i){return(i,a)=>((0,r.openBlock)(),(0,r.createElementBlock)(r.Fragment,null,[a[0]||(a[0]=(0,r.createElementVNode)(`h2`,null,`Primary 主色`,-1)),(0,r.createVNode)(e.default),a[1]||(a[1]=(0,r.createElementVNode)(`h2`,null,`Secondary 状态色`,-1)),(0,r.createVNode)(t.default),a[2]||(a[2]=(0,r.createElementVNode)(`h2`,null,`Neutral 文本、边框、背景色`,-1)),(0,r.createVNode)(n.default)],64))}});exports.default=i;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
var e=require("./content.vue_vue_type_script_setup_true_lang.js").default;exports.default=e;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
const e=require("../../../utils/util.js");require("../../../utils/index.js");const t=require("../../../composables/use-namespace/index.js"),n=require("../../../composables/use-z-index/index.js"),r=require("../../../composables/use-theme/index.js");require("../../../composables/index.js");const i=require("./use-emit.js");let a=require("vue");var o=[`data-placement`],s=(0,a.defineComponent)({__name:`content`,props:(0,a.mergeModels)({modelValue:{type:Boolean},style:{type:[Boolean,null,String,Object,Array],default:()=>void 0},arrowStyle:{default:()=>void 0},appendTo:{default:`body`},teleported:{type:Boolean,default:!0},defer:{type:Boolean,default:()=>void 0},content:{},placement:{default:`top`},showArrow:{type:Boolean,default:!1},width:{default:()=>void 0},height:{default:()=>void 0},maxWidth:{default:()=>void 0},maxHeight:{default:()=>void 0},floatingClass:{default:()=>void 0},transition:{default:``},mode:{default:()=>void 0},cssTransition:{type:Boolean,default:!1},cssDuration:{default:0},appear:{type:Boolean,default:!1},zIndex:{default:()=>void 0},theme:{default:`light`},reverseTheme:{type:Boolean,default:!1}},{modelValue:{type:Boolean,default:!1},modelModifiers:{}}),emits:(0,a.mergeModels)([`beforeShow`,`show`,`beforeHide`,`hide`,`beforeEnter`,`enter`,`enterCancelled`,`afterEnter`,`beforeLeave`,`leave`,`leaveCancelled`,`afterLeave`],[`update:modelValue`]),setup(s,{expose:c,emit:l}){let u=(0,a.useModel)(s,`modelValue`),{beforeShow:d,show:f,beforeHide:p,hide:m,beforeEnter:h,beforeLeave:g,enter:_,leave:v,afterEnter:y,afterLeave:b,enterCancelled:x,leaveCancelled:S}=i.useEmits(l),{n:C,ns:w,is:T}=t.useNamespace(`tooltip`),{currentTheme:E}=r.useTheme(s.theme,s.reverseTheme),D=(0,a.useTemplateRef)(`floatingRef`),O=(0,a.useTemplateRef)(`arrowRef`),k=(0,a.computed)(()=>[s.style,{width:e.toPx(s.width),height:e.toPx(s.height),maxWidth:e.toPx(s.maxWidth),maxHeight:e.toPx(s.maxHeight),zIndex:A.value}]),A=(0,a.ref)(0),{zIndex:j}=n.useZIndex(),{stop:M}=(0,a.watch)(u,e=>{e&&(A.value=s.zIndex||j.value)}),N=(0,a.computed)(()=>s.cssTransition?null:`enter`),P=(0,a.computed)(()=>s.cssTransition?null:`leave`),F=e=>{s.cssTransition?d(e):h(e)},I=(e,t)=>{_(e,t)},L=e=>{x(e)},R=e=>{s.cssTransition?f(e):y(e)},z=e=>{s.cssTransition?p(e):g(e)},B=(e,t)=>{v(e,t)},V=e=>{S(e)},H=e=>{s.cssTransition?m(e):b(e)};return(0,a.onUnmounted)(()=>{M()}),c({floatingRef:D,arrowRef:O}),(e,t)=>((0,a.openBlock)(),(0,a.createBlock)(a.Teleport,{disabled:!s.teleported,defer:s.defer,to:s.appendTo},[(0,a.createVNode)(a.Transition,(0,a.mergeProps)({name:s.transition,type:`transition`,css:s.cssTransition,duration:s.cssDuration,appear:s.appear,mode:s.mode,onBeforeEnter:F,onBeforeLeave:z},{[(0,a.toHandlerKey)(N.value)]:I},{[(0,a.toHandlerKey)(P.value)]:B},{onEnterCancelled:L,onLeaveCancelled:V,onAfterEnter:R,onAfterLeave:H}),{default:(0,a.withCtx)(()=>[u.value?((0,a.openBlock)(),(0,a.createElementBlock)(`div`,{key:0,ref_key:`floatingRef`,ref:D,style:(0,a.normalizeStyle)(k.value),class:(0,a.normalizeClass)([(0,a.unref)(C)(),(0,a.unref)(T)((0,a.unref)(E),!!(0,a.unref)(E)),s.floatingClass])},[(0,a.renderSlot)(e.$slots,`default`),s.showArrow?((0,a.openBlock)(),(0,a.createElementBlock)(`span`,{key:0,ref_key:`arrowRef`,ref:O,"data-placement":s.placement,style:(0,a.normalizeStyle)(s.arrowStyle),class:(0,a.normalizeClass)([(0,a.unref)(w)(`arrow`)])},null,14,o)):(0,a.createCommentVNode)(``,!0)],6)):(0,a.createCommentVNode)(``,!0)]),_:3},16,[`name`,`css`,`duration`,`appear`,`mode`])],8,[`disabled`,`defer`,`to`]))}});exports.default=s;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
function e(e){return{beforeShow:t=>e(`beforeShow`,t),show:t=>e(`show`,t),beforeHide:t=>e(`beforeHide`,t),hide:t=>e(`hide`,t),beforeEnter:t=>e(`beforeEnter`,t),enter:(t,n)=>e(`enter`,t,n),enterCancelled:t=>e(`enterCancelled`,t),afterEnter:t=>e(`afterEnter`,t),beforeLeave:t=>e(`beforeLeave`,t),leave:(t,n)=>e(`leave`,t,n),leaveCancelled:t=>e(`leaveCancelled`,t),afterLeave:t=>e(`afterLeave`,t)}}exports.useEmits=e;
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import { default as PrimaryColor } from './src/primary-color.vue';
|
|
2
|
-
import { default as SecondaryColor } from './src/secondary-color.vue';
|
|
3
|
-
import { default as NeutralColor } from './src/neutral-color.vue';
|
|
4
|
-
import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
|
|
5
|
-
export declare const ReColors: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
|
|
6
|
-
export { PrimaryColor as RePrimaryColor, SecondaryColor as ReSecondaryColor, NeutralColor as ReNeutralColor };
|
|
7
|
-
export default ReColors;
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { withInstall as e } from "../../utils/vue/index.mjs";
|
|
2
|
-
import "../../utils/index.mjs";
|
|
3
|
-
import t from "./src/primary-color.mjs";
|
|
4
|
-
import n from "./src/secondary-color.mjs";
|
|
5
|
-
import r from "./src/neutral-color.mjs";
|
|
6
|
-
import i from "./src/colors.mjs";
|
|
7
|
-
//#region packages/components/colors/index.ts
|
|
8
|
-
var a = e(i, {
|
|
9
|
-
RePrimaryColor: t,
|
|
10
|
-
ReSecondaryColor: n,
|
|
11
|
-
ReNeutralColor: r
|
|
12
|
-
});
|
|
13
|
-
//#endregion
|
|
14
|
-
export { a as ReColors, a as default, r as ReNeutralColor, t as RePrimaryColor, n as ReSecondaryColor };
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
import { DefineComponent, ComponentOptionsMixin, PublicProps, ComponentProvideOptions } from 'vue';
|
|
2
|
-
declare const __VLS_export: DefineComponent<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
|
|
3
|
-
declare const _default: typeof __VLS_export;
|
|
4
|
-
export default _default;
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import e from "./primary-color.mjs";
|
|
2
|
-
import t from "./secondary-color.mjs";
|
|
3
|
-
import n from "./neutral-color.mjs";
|
|
4
|
-
import { Fragment as r, createElementBlock as i, createElementVNode as a, createVNode as o, defineComponent as s, openBlock as c } from "vue";
|
|
5
|
-
//#region packages/components/colors/src/colors.vue?vue&type=script&setup=true&lang.ts
|
|
6
|
-
var l = s({
|
|
7
|
-
name: "ReColors",
|
|
8
|
-
__name: "colors",
|
|
9
|
-
setup(s) {
|
|
10
|
-
return (s, l) => (c(), i(r, null, [
|
|
11
|
-
l[0] || (l[0] = a("h2", null, "Primary 主色", -1)),
|
|
12
|
-
o(e),
|
|
13
|
-
l[1] || (l[1] = a("h2", null, "Secondary 状态色", -1)),
|
|
14
|
-
o(t),
|
|
15
|
-
l[2] || (l[2] = a("h2", null, "Neutral 文本、边框、背景色", -1)),
|
|
16
|
-
o(n)
|
|
17
|
-
], 64));
|
|
18
|
-
}
|
|
19
|
-
});
|
|
20
|
-
//#endregion
|
|
21
|
-
export { l as default };
|