rappel-ui 1.0.28 → 1.0.30

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.
Files changed (241) hide show
  1. package/README.md +1 -0
  2. package/README.zh.md +1 -0
  3. package/cjs/components/button/src/constants.d.ts +1 -1
  4. package/cjs/components/button/src/constants.js +1 -1
  5. package/cjs/components/index.d.ts +2 -0
  6. package/cjs/components/index.js +1 -1
  7. package/cjs/components/message/index.d.ts +4 -0
  8. package/cjs/components/message/index.js +1 -0
  9. package/cjs/components/message/src/constants.d.ts +2 -0
  10. package/cjs/components/message/src/constants.js +1 -0
  11. package/cjs/components/message/src/create-message.d.ts +2 -0
  12. package/cjs/components/message/src/create-message.js +1 -0
  13. package/cjs/components/message/src/message.js +1 -0
  14. package/{es/components/tooltip/src/content.vue.d.ts → cjs/components/message/src/message.vue.d.ts} +17 -19
  15. package/cjs/components/message/src/message.vue_vue_type_script_setup_true_lang.js +6 -0
  16. package/cjs/components/message/src/types.d.ts +58 -0
  17. package/{es/components/tooltip/src/use-emit.d.ts → cjs/components/message/src/use-message-emit.d.ts} +2 -6
  18. package/cjs/components/message/src/use-message-emit.js +1 -0
  19. package/cjs/components/message/src/use-message.d.ts +2 -0
  20. package/cjs/components/message/src/use-message.js +1 -0
  21. package/cjs/components/message/style/css.d.ts +0 -0
  22. package/cjs/components/message/style/css.js +2 -0
  23. package/cjs/components/message/style/index.d.ts +0 -0
  24. package/cjs/components/message/style/index.js +2 -0
  25. package/cjs/components/popconfirm/index.d.ts +6 -26
  26. package/cjs/components/popconfirm/src/popconfirm.vue.d.ts +22 -30
  27. package/cjs/components/popconfirm/src/popconfirm.vue_vue_type_script_setup_true_lang.js +1 -1
  28. package/cjs/components/popconfirm/src/types.d.ts +2 -2
  29. package/cjs/components/{tooltip/src/use-emit.d.ts → popconfirm/src/use-popconfirm-emit.d.ts} +2 -6
  30. package/cjs/components/popconfirm/src/use-popconfirm-emit.js +1 -0
  31. package/cjs/components/popover/index.d.ts +1 -20
  32. package/cjs/components/popover/index.js +1 -1
  33. package/cjs/components/popover/src/popover.vue.d.ts +3 -11
  34. package/cjs/components/popover/src/popover.vue_vue_type_script_setup_true_lang.js +1 -1
  35. package/cjs/components/popover/src/types.d.ts +2 -2
  36. package/cjs/components/popover/src/use-popover-emit.d.ts +12 -0
  37. package/cjs/components/popover/src/use-popover-emit.js +1 -0
  38. package/cjs/components/svg-icon/src/svg-icon.vue_vue_type_script_setup_true_lang.js +1 -1
  39. package/cjs/components/svg-icon/src/types.d.ts +1 -0
  40. package/cjs/components/tooltip/index.d.ts +24 -33
  41. package/cjs/components/tooltip/index.js +1 -1
  42. package/cjs/components/tooltip/src/tooltip.vue.d.ts +18 -15
  43. package/cjs/components/tooltip/src/tooltip.vue_vue_type_script_setup_true_lang.js +1 -1
  44. package/cjs/components/tooltip/src/types.d.ts +5 -40
  45. package/cjs/components/tooltip/src/use-tooltip-emit.d.ts +12 -0
  46. package/cjs/components/tooltip/src/use-tooltip-emit.js +1 -0
  47. package/cjs/components/transition/index.d.ts +67 -0
  48. package/cjs/components/transition/index.js +1 -0
  49. package/cjs/components/transition/src/transition.js +1 -0
  50. package/cjs/components/transition/src/transition.vue.d.ts +33 -0
  51. package/cjs/components/transition/src/transition.vue_vue_type_script_setup_true_lang.js +1 -0
  52. package/cjs/components/transition/src/types.d.ts +21 -0
  53. package/cjs/components/transition/src/use-transition-emit.d.ts +12 -0
  54. package/cjs/components/transition/src/use-transition-emit.js +1 -0
  55. package/cjs/components/transition/style/css.d.ts +0 -0
  56. package/cjs/components/transition/style/css.js +0 -0
  57. package/cjs/components/transition/style/index.d.ts +0 -0
  58. package/cjs/components/transition/style/index.js +0 -0
  59. package/cjs/index.d.ts +426 -143
  60. package/cjs/index.js +1 -1
  61. package/cjs/svg-icons/create-icon.d.ts +2 -2
  62. package/cjs/svg-icons/create-icon.js +1 -1
  63. package/cjs/svg-icons/get-async-icon.d.ts +3 -0
  64. package/cjs/svg-icons/get-async-icon.js +1 -0
  65. package/cjs/svg-icons/icon-names.d.ts +1 -1
  66. package/cjs/svg-icons/icon-names.js +1 -1
  67. package/cjs/svg-icons/index.d.ts +7 -3
  68. package/cjs/svg-icons/index.js +1 -1
  69. package/cjs/svg-icons/src/arrow-backward.d.ts +2 -2
  70. package/cjs/svg-icons/src/arrow-down.d.ts +2 -2
  71. package/cjs/svg-icons/src/arrow-downward.d.ts +2 -2
  72. package/cjs/svg-icons/src/arrow-forward.d.ts +2 -2
  73. package/cjs/svg-icons/src/arrow-left.d.ts +2 -2
  74. package/cjs/svg-icons/src/arrow-right.d.ts +2 -2
  75. package/cjs/svg-icons/src/arrow-up.d.ts +2 -2
  76. package/cjs/svg-icons/src/arrow-upward.d.ts +2 -2
  77. package/cjs/svg-icons/src/check-circle.d.ts +2 -2
  78. package/cjs/svg-icons/src/check-fill.d.ts +43 -0
  79. package/cjs/svg-icons/src/check-fill.js +1 -0
  80. package/cjs/svg-icons/src/check.d.ts +2 -2
  81. package/cjs/svg-icons/src/close-circle.d.ts +43 -0
  82. package/cjs/svg-icons/src/close-circle.js +1 -0
  83. package/cjs/svg-icons/src/close-fill.d.ts +43 -0
  84. package/cjs/svg-icons/src/close-fill.js +1 -0
  85. package/cjs/svg-icons/src/close-short.d.ts +2 -2
  86. package/cjs/svg-icons/src/close-short.js +1 -1
  87. package/cjs/svg-icons/src/close.d.ts +2 -2
  88. package/cjs/svg-icons/src/copy-closure.d.ts +2 -2
  89. package/cjs/svg-icons/src/copy.d.ts +2 -2
  90. package/cjs/svg-icons/src/delete.d.ts +2 -2
  91. package/cjs/svg-icons/src/exclam-fill.d.ts +43 -0
  92. package/cjs/svg-icons/src/exclam-fill.js +1 -0
  93. package/cjs/svg-icons/src/exclam.d.ts +2 -2
  94. package/cjs/svg-icons/src/help.d.ts +2 -2
  95. package/cjs/svg-icons/src/info-circle.d.ts +43 -0
  96. package/cjs/svg-icons/src/info-circle.js +1 -0
  97. package/cjs/svg-icons/src/info-fill.d.ts +43 -0
  98. package/cjs/svg-icons/src/info-fill.js +1 -0
  99. package/cjs/svg-icons/src/loading.d.ts +2 -2
  100. package/cjs/svg-icons/src/more-dot-circle-horizontal.d.ts +2 -2
  101. package/cjs/svg-icons/src/more-dot-circle-outline-horizontal.d.ts +2 -2
  102. package/cjs/svg-icons/src/more-dot-circle-outline-vertical.d.ts +2 -2
  103. package/cjs/svg-icons/src/more-dot-circle.d.ts +2 -2
  104. package/cjs/svg-icons/src/more-dot-square-horizontal.d.ts +2 -2
  105. package/cjs/svg-icons/src/more-dot-square.d.ts +2 -2
  106. package/cjs/svg-icons/src/more-line.d.ts +2 -2
  107. package/cjs/svg-icons/src/search-bold.d.ts +2 -2
  108. package/cjs/svg-icons/src/search.d.ts +2 -2
  109. package/cjs/svg-icons/src/star-fill.d.ts +2 -2
  110. package/cjs/svg-icons/src/star-fill.js +1 -1
  111. package/cjs/svg-icons/src/star.d.ts +2 -2
  112. package/cjs/svg-icons/types.d.ts +2 -0
  113. package/cjs/utils/util.d.ts +3 -3
  114. package/es/components/button/src/constants.d.ts +1 -1
  115. package/es/components/button/src/constants.mjs +1 -0
  116. package/es/components/index.d.ts +2 -0
  117. package/es/components/index.mjs +20 -10
  118. package/es/components/message/index.d.ts +4 -0
  119. package/es/components/message/index.mjs +6 -0
  120. package/es/components/message/src/constants.d.ts +2 -0
  121. package/es/components/message/src/constants.mjs +15 -0
  122. package/es/components/message/src/create-message.d.ts +2 -0
  123. package/es/components/message/src/create-message.mjs +137 -0
  124. package/es/components/message/src/message.mjs +5 -0
  125. package/{cjs/components/tooltip/src/content.vue.d.ts → es/components/message/src/message.vue.d.ts} +17 -19
  126. package/es/components/message/src/message.vue_vue_type_script_setup_true_lang.mjs +271 -0
  127. package/es/components/message/src/types.d.ts +58 -0
  128. package/es/components/message/src/use-message-emit.d.ts +12 -0
  129. package/es/components/message/src/use-message-emit.mjs +7 -0
  130. package/es/components/message/src/use-message.d.ts +2 -0
  131. package/es/components/message/src/use-message.mjs +7 -0
  132. package/es/components/message/style/css.d.ts +0 -0
  133. package/es/components/message/style/css.mjs +2 -0
  134. package/es/components/message/style/index.d.ts +0 -0
  135. package/es/components/message/style/index.mjs +2 -0
  136. package/es/components/popconfirm/index.d.ts +6 -26
  137. package/es/components/popconfirm/src/popconfirm.vue.d.ts +22 -30
  138. package/es/components/popconfirm/src/popconfirm.vue_vue_type_script_setup_true_lang.mjs +41 -48
  139. package/es/components/popconfirm/src/types.d.ts +2 -2
  140. package/es/components/popconfirm/src/use-popconfirm-emit.d.ts +12 -0
  141. package/es/components/popconfirm/src/use-popconfirm-emit.mjs +7 -0
  142. package/es/components/popover/index.d.ts +1 -20
  143. package/es/components/popover/index.mjs +4 -3
  144. package/es/components/popover/src/popover.vue.d.ts +3 -11
  145. package/es/components/popover/src/popover.vue_vue_type_script_setup_true_lang.mjs +21 -28
  146. package/es/components/popover/src/types.d.ts +2 -2
  147. package/es/components/popover/src/use-popover-emit.d.ts +12 -0
  148. package/es/components/popover/src/use-popover-emit.mjs +7 -0
  149. package/es/components/svg-icon/src/svg-icon.vue_vue_type_script_setup_true_lang.mjs +6 -3
  150. package/es/components/svg-icon/src/types.d.ts +1 -0
  151. package/es/components/tooltip/index.d.ts +24 -33
  152. package/es/components/tooltip/index.mjs +2 -2
  153. package/es/components/tooltip/src/tooltip.vue.d.ts +18 -15
  154. package/es/components/tooltip/src/tooltip.vue_vue_type_script_setup_true_lang.mjs +137 -124
  155. package/es/components/tooltip/src/types.d.ts +5 -40
  156. package/es/components/tooltip/src/use-tooltip-emit.d.ts +12 -0
  157. package/es/components/tooltip/src/use-tooltip-emit.mjs +7 -0
  158. package/es/components/transition/index.d.ts +67 -0
  159. package/es/components/transition/index.mjs +8 -0
  160. package/es/components/transition/src/transition.mjs +5 -0
  161. package/es/components/transition/src/transition.vue.d.ts +33 -0
  162. package/es/components/transition/src/transition.vue_vue_type_script_setup_true_lang.mjs +83 -0
  163. package/es/components/transition/src/types.d.ts +21 -0
  164. package/es/components/transition/src/use-transition-emit.d.ts +12 -0
  165. package/es/components/{tooltip/src/use-emit.mjs → transition/src/use-transition-emit.mjs} +2 -6
  166. package/es/components/transition/style/css.d.ts +0 -0
  167. package/es/components/transition/style/css.mjs +0 -0
  168. package/es/components/transition/style/index.d.ts +0 -0
  169. package/es/components/transition/style/index.mjs +0 -0
  170. package/es/index.d.ts +426 -143
  171. package/es/index.mjs +74 -62
  172. package/es/svg-icons/create-icon.d.ts +2 -2
  173. package/es/svg-icons/create-icon.mjs +3 -2
  174. package/es/svg-icons/get-async-icon.d.ts +3 -0
  175. package/es/svg-icons/get-async-icon.mjs +50 -0
  176. package/es/svg-icons/icon-names.d.ts +1 -1
  177. package/es/svg-icons/icon-names.mjs +1 -1
  178. package/es/svg-icons/index.d.ts +7 -3
  179. package/es/svg-icons/index.mjs +77 -103
  180. package/es/svg-icons/src/arrow-backward.d.ts +2 -2
  181. package/es/svg-icons/src/arrow-down.d.ts +2 -2
  182. package/es/svg-icons/src/arrow-downward.d.ts +2 -2
  183. package/es/svg-icons/src/arrow-forward.d.ts +2 -2
  184. package/es/svg-icons/src/arrow-left.d.ts +2 -2
  185. package/es/svg-icons/src/arrow-right.d.ts +2 -2
  186. package/es/svg-icons/src/arrow-up.d.ts +2 -2
  187. package/es/svg-icons/src/arrow-upward.d.ts +2 -2
  188. package/es/svg-icons/src/check-circle.d.ts +2 -2
  189. package/es/svg-icons/src/check-fill.d.ts +43 -0
  190. package/es/svg-icons/src/check-fill.mjs +8 -0
  191. package/es/svg-icons/src/check.d.ts +2 -2
  192. package/es/svg-icons/src/close-circle.d.ts +43 -0
  193. package/es/svg-icons/src/close-circle.mjs +7 -0
  194. package/es/svg-icons/src/close-fill.d.ts +43 -0
  195. package/es/svg-icons/src/close-fill.mjs +9 -0
  196. package/es/svg-icons/src/close-short.d.ts +2 -2
  197. package/es/svg-icons/src/close-short.mjs +1 -1
  198. package/es/svg-icons/src/close.d.ts +2 -2
  199. package/es/svg-icons/src/copy-closure.d.ts +2 -2
  200. package/es/svg-icons/src/copy.d.ts +2 -2
  201. package/es/svg-icons/src/delete.d.ts +2 -2
  202. package/es/svg-icons/src/exclam-fill.d.ts +43 -0
  203. package/es/svg-icons/src/exclam-fill.mjs +9 -0
  204. package/es/svg-icons/src/exclam.d.ts +2 -2
  205. package/es/svg-icons/src/help.d.ts +2 -2
  206. package/es/svg-icons/src/info-circle.d.ts +43 -0
  207. package/es/svg-icons/src/info-circle.mjs +7 -0
  208. package/es/svg-icons/src/info-fill.d.ts +43 -0
  209. package/es/svg-icons/src/info-fill.mjs +9 -0
  210. package/es/svg-icons/src/loading.d.ts +2 -2
  211. package/es/svg-icons/src/more-dot-circle-horizontal.d.ts +2 -2
  212. package/es/svg-icons/src/more-dot-circle-outline-horizontal.d.ts +2 -2
  213. package/es/svg-icons/src/more-dot-circle-outline-vertical.d.ts +2 -2
  214. package/es/svg-icons/src/more-dot-circle.d.ts +2 -2
  215. package/es/svg-icons/src/more-dot-square-horizontal.d.ts +2 -2
  216. package/es/svg-icons/src/more-dot-square.d.ts +2 -2
  217. package/es/svg-icons/src/more-line.d.ts +2 -2
  218. package/es/svg-icons/src/search-bold.d.ts +2 -2
  219. package/es/svg-icons/src/search.d.ts +2 -2
  220. package/es/svg-icons/src/star-fill.d.ts +2 -2
  221. package/es/svg-icons/src/star-fill.mjs +1 -1
  222. package/es/svg-icons/src/star.d.ts +2 -2
  223. package/es/svg-icons/types.d.ts +2 -0
  224. package/es/utils/util.d.ts +3 -3
  225. package/package.json +2 -2
  226. package/theme-chalk/base.css +1 -1
  227. package/theme-chalk/index.css +1 -1
  228. package/theme-chalk/re-button.css +1 -1
  229. package/theme-chalk/re-message.css +1 -0
  230. package/theme-chalk/root-vars.css +1 -1
  231. package/theme-chalk/src/css-vars/_button.scss +1 -1
  232. package/theme-chalk/src/css-vars/_colors.scss +19 -16
  233. package/theme-chalk/src/css-vars/_message.scss +49 -0
  234. package/theme-chalk/src/index.scss +1 -0
  235. package/theme-chalk/src/message.scss +272 -0
  236. package/theme-chalk/src/mixins/_message.scss +70 -0
  237. package/cjs/components/tooltip/src/content.js +0 -1
  238. package/cjs/components/tooltip/src/content.vue_vue_type_script_setup_true_lang.js +0 -1
  239. package/cjs/components/tooltip/src/use-emit.js +0 -1
  240. package/es/components/tooltip/src/content.mjs +0 -5
  241. package/es/components/tooltip/src/content.vue_vue_type_script_setup_true_lang.mjs +0 -166
@@ -38,37 +38,40 @@ $colors: map.deep-merge(
38
38
 
39
39
  $state-types: (
40
40
  primary: (
41
- #ac99ff
41
+ #a895ff
42
42
  ),
43
43
  success: (
44
- #06c173
44
+ #06be08
45
45
  ),
46
46
  danger: (
47
47
  #ef717f
48
48
  ),
49
+ error: (
50
+ #ef717f
51
+ ),
49
52
  warning: (
50
- #e6a219
53
+ #e6a205
51
54
  ),
52
55
  info: (
53
- #a7a7a9
56
+ #9a9a9a
54
57
  )
55
58
  );
56
59
 
57
60
  /**
58
61
  * 生成不同(0.9-0.1)透明度对应的等值颜色:
59
62
  primary: (
60
- base: #ac99ff,
61
- active:#8d7ae6,
62
- hover: #8d7ae6,
63
- shade-9: #ac99ff,
64
- shade-8: #a995ff,
65
- shade-7: #b3a3ff,
66
- shade-6: #beb0ff,
67
- shade-5: #c9bdff,
68
- shade-4: #d4caff,
69
- shade-3: #ded7ff,
70
- shade-2: #e9e5ff,
71
- shade-1: #f4f2ff
63
+ base: #a895ff,
64
+ active:#9986d1,
65
+ hover: #a48fe0,
66
+ shade-9: #ac98ea,
67
+ shade-8: #9e8cd6,
68
+ shade-7: #9181c1,
69
+ shade-6: #8375ad,
70
+ shade-5: #756a98,
71
+ shade-4: #675f83,
72
+ shade-3: #59536f,
73
+ shade-2: #4c485a,
74
+ shade-1: #3e3c46
72
75
  ),
73
76
  */
74
77
  @each $type, $color in $state-types {
@@ -0,0 +1,49 @@
1
+ @use 'sass:map';
2
+ @use '../function/index' as *;
3
+
4
+ $message: () !default;
5
+ $message: map.deep-merge(
6
+ (
7
+ '': (
8
+ 'color': getCssVar('color', 'text', 'base'),
9
+ 'bgcolor': getCssVar('color', 'fill', 'blank'),
10
+ 'border-color': getCssVar('color', 'border', 'light')
11
+ ),
12
+ 'light': (
13
+ 'color': getCssVar('color', 'text', 'base')
14
+ ),
15
+ 'dark': (
16
+ 'color': getCssVar('color', 'fill', 'blank')
17
+ )
18
+ ),
19
+ $message
20
+ );
21
+
22
+ $message-types: ('', 'primary', 'success', 'error', 'warning', 'info');
23
+ @each $type in $message-types {
24
+ @if $type {
25
+ $message: map.deep-merge(
26
+ (
27
+ $type: (
28
+ 'bgcolor': getCssVar('color', $type, 'shade-1'),
29
+ 'color': getCssVar('color', $type, 'base'),
30
+ 'border-color': getCssVar('color', $type, 'shade-3')
31
+ )
32
+ ),
33
+ $message
34
+ );
35
+ }
36
+ }
37
+ $sizes: () !default;
38
+ $sizes: map.deep-merge(
39
+ (
40
+ 'message': (
41
+ 'font-size': 14px,
42
+ 'border-radius': 4px,
43
+ 'padding': 10px 12px,
44
+ 'close-size': 16px,
45
+ 'icon-size': 16px
46
+ )
47
+ ),
48
+ $sizes
49
+ );
@@ -9,3 +9,4 @@
9
9
  @forward './popover';
10
10
  @forward './tooltip';
11
11
  @forward './popconfirm';
12
+ @forward './message';
@@ -0,0 +1,272 @@
1
+ @use 'mixins/index' as *;
2
+ @use 'css-vars/_message' as *;
3
+ @use 'mixins/_message' as *;
4
+ @use 'function/index' as *;
5
+
6
+ @include buildRootCls('message') {
7
+ @include message-var();
8
+ @each $type in $message-types {
9
+ @include message-modifier-style($message, $type);
10
+ }
11
+
12
+ $border-color: getCssVar('message', 'border-color');
13
+ $bgcolor: getCssVar('message', 'bgcolor');
14
+ $color: getCssVar('message', 'color');
15
+ $font-size: getCssVar('message', 'font', 'size');
16
+ $border-radius: getCssVar('message', 'border-radius');
17
+
18
+ display: flex;
19
+ align-items: start;
20
+ padding: getCssVar('message', 'padding');
21
+ color: $color;
22
+ background-color: $bgcolor;
23
+ border-radius: $border-radius;
24
+ border: 1px solid $border-color;
25
+
26
+ &__icon {
27
+ flex-shrink: 0;
28
+ margin-right: 5px;
29
+ font-size: getCssVar('message', 'icon', 'size');
30
+ color: $color;
31
+ // fill: $color;
32
+ }
33
+ &__content {
34
+ font-size: $font-size;
35
+ line-height: 1.2;
36
+ color: $color;
37
+ }
38
+
39
+ &__close {
40
+ flex-shrink: 0;
41
+ margin-left: 5px;
42
+ color: $color;
43
+ font-size: getCssVar('message', 'close', 'size');
44
+ cursor: pointer;
45
+ }
46
+ &[data-placement='top'],
47
+ &[data-placement='bottom'] {
48
+ left: 50%;
49
+ transform: translateX(-50%);
50
+ }
51
+ &[data-placement='top-start'],
52
+ &[data-placement='bottom-start'] {
53
+ left: 5px;
54
+ }
55
+ &[data-placement='left-top'] {
56
+ top: 0;
57
+ left: 0;
58
+ }
59
+ &[data-placement='left-bottom'] {
60
+ bottom: 0;
61
+ left: 0;
62
+ }
63
+ &[data-placement='top-end'],
64
+ &[data-placement='bottom-end'] {
65
+ right: 5px;
66
+ }
67
+ &[data-placement='right-top'] {
68
+ top: 0;
69
+ right: 0;
70
+ }
71
+ &[data-placement='right-bottom'] {
72
+ bottom: 0;
73
+ right: 0;
74
+ }
75
+
76
+ &[data-placement='left'],
77
+ &[data-placement='right'] {
78
+ top: 50%;
79
+ transform: translateY(-50%);
80
+ }
81
+
82
+ &[data-placement='left-start'],
83
+ &[data-placement='right-start'] {
84
+ top: 5px;
85
+ }
86
+
87
+ &[data-placement='left-end'],
88
+ &[data-placement='right-end'] {
89
+ bottom: 5px;
90
+ }
91
+
92
+ &.top-enter-from {
93
+ opacity: 0;
94
+ &[data-placement='top-start'],
95
+ &[data-placement='top-end'] {
96
+ transform: translateY(-20px);
97
+ }
98
+ &[data-placement='top'] {
99
+ transform: translateX(-50%) translateY(-20px);
100
+ }
101
+ }
102
+
103
+ &.top-enter-active {
104
+ opacity: 0;
105
+ }
106
+
107
+ &.top-enter-to,
108
+ &.top-leave-from {
109
+ opacity: 1;
110
+ &[data-placement='top'] {
111
+ transform: translateX(-50%) translateY(0);
112
+ }
113
+ }
114
+
115
+ &.top-leave-active {
116
+ opacity: 1;
117
+ }
118
+
119
+ &.top-leave-to {
120
+ opacity: 0;
121
+ &[data-placement='top'] {
122
+ transform: translateX(-50%) translateY(-20px);
123
+ }
124
+ }
125
+
126
+ &.bottom-enter-from {
127
+ opacity: 0;
128
+ &[data-placement='bottom'] {
129
+ transform: translateX(-50%) translateY(20px);
130
+ }
131
+ &[data-placement='bottom-start'],
132
+ &[data-placement='bottom-end'] {
133
+ transform: translateX(0) translateY(20px);
134
+ }
135
+ }
136
+ &.bottom-enter-active {
137
+ opacity: 0;
138
+ }
139
+
140
+ &.bottom-enter-to,
141
+ &.bottom-leave-from {
142
+ opacity: 1;
143
+ &[data-placement='bottom'] {
144
+ transform: translateX(-50%) translateY(0);
145
+ }
146
+ &[data-placement='bottom-start'],
147
+ &[data-placement='bottom-end'] {
148
+ transform: translateX(0) translateY(0);
149
+ }
150
+ }
151
+
152
+ &.bottom-leave-active {
153
+ opacity: 1;
154
+ }
155
+
156
+ &.bottom-leave-to {
157
+ opacity: 0;
158
+ &[data-placement='bottom'] {
159
+ transform: translateX(-50%) translateY(20px);
160
+ }
161
+ &[data-placement='bottom-start'],
162
+ &[data-placement='bottom-end'] {
163
+ transform: translateX(0) translateY(20px);
164
+ }
165
+ }
166
+
167
+ &.left-enter-from {
168
+ opacity: 0;
169
+ &[data-placement='left'] {
170
+ transform: translateY(-50%) translateX(-20px);
171
+ }
172
+ &[data-placement='left-start'],
173
+ &[data-placement='left-end'] {
174
+ transform: translateY(0) translateX(-20px);
175
+ }
176
+ &[data-placement='left-top'],
177
+ &[data-placement='left-bottom'] {
178
+ transform: translateY(0) translateX(-100%);
179
+ }
180
+ }
181
+ &.left-enter-active {
182
+ opacity: 0;
183
+ }
184
+ &.left-enter-to,
185
+ &.left-leave-from {
186
+ opacity: 1;
187
+ &[data-placement='left'] {
188
+ transform: translateY(-50%) translateX(0);
189
+ }
190
+ &[data-placement='left-start'],
191
+ &[data-placement='left-end'] {
192
+ transform: translateY(0) translateX(0);
193
+ }
194
+ &[data-placement='left-top'],
195
+ &[data-placement='left-bottom'] {
196
+ transform: translateY(0) translateX(0);
197
+ }
198
+ }
199
+ &.left-leave-active {
200
+ opacity: 1;
201
+ }
202
+ &.left-leave-to {
203
+ opacity: 0;
204
+ &[data-placement='left'] {
205
+ transform: translateY(-50%) translateX(-20px);
206
+ }
207
+ &[data-placement='left-start'],
208
+ &[data-placement='left-end'] {
209
+ transform: translateY(0) translateX(-20px);
210
+ }
211
+ &[data-placement='left-top'],
212
+ &[data-placement='left-bottom'] {
213
+ transform: translateY(0) translateX(-100%);
214
+ }
215
+ }
216
+
217
+ &.right-enter-from {
218
+ opacity: 0;
219
+ &[data-placement='right'] {
220
+ transform: translateY(-50%) translateX(20px);
221
+ }
222
+
223
+ &[data-placement='right-start'],
224
+ &[data-placement='right-end'] {
225
+ transform: translateY(0) translateX(20px);
226
+ }
227
+
228
+ &[data-placement='right-top'],
229
+ &[data-placement='right-bottom'] {
230
+ transform: translateY(0) translateX(100%);
231
+ }
232
+ }
233
+ &.right-enter-active {
234
+ opacity: 0;
235
+ }
236
+
237
+ &.right-enter-to,
238
+ &.right-leave-from {
239
+ opacity: 1;
240
+ &[data-placement='right'] {
241
+ transform: translateY(-50%) translateX(0);
242
+ }
243
+ &[data-placement='right-start'],
244
+ &[data-placement='right-end'] {
245
+ transform: translateY(0) translateX(0);
246
+ }
247
+
248
+ &[data-placement='right-top'],
249
+ &[data-placement='right-bottom'] {
250
+ transform: translateY(0) translateX(0);
251
+ }
252
+ }
253
+
254
+ &.right-leave-active {
255
+ opacity: 1;
256
+ }
257
+ &.right-leave-to {
258
+ opacity: 0;
259
+ &[data-placement='right'] {
260
+ transform: translateY(-50%) translateX(20px);
261
+ }
262
+ &[data-placement='right-start'],
263
+ &[data-placement='right-end'] {
264
+ transform: translateY(0) translateX(20px);
265
+ }
266
+
267
+ &[data-placement='right-top'],
268
+ &[data-placement='right-bottom'] {
269
+ transform: translateY(0) translateX(100%);
270
+ }
271
+ }
272
+ }
@@ -0,0 +1,70 @@
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-bgcolor-custom($value) {
11
+ #{getCssVarStr('message', 'bgcolor')}: #{$value};
12
+ }
13
+
14
+ @mixin set-color-var($key, $val) {
15
+ #{getCssVarStr('message' ,'color')}: #{deepGet($message, $key, $val)};
16
+ }
17
+
18
+ @mixin set-bordercolor-var($key, $val) {
19
+ #{getCssVarStr('message' ,'border-color')}: #{deepGet($message, $key, $val)};
20
+ }
21
+
22
+ @mixin set-radius-var($key, $val) {
23
+ #{getCssVarStr('message' ,'border-radius')}: #{deepGet($sizes, $key, $val)};
24
+ }
25
+
26
+ @mixin set-font-size-var($key, $val) {
27
+ #{getCssVarStr('message' ,'font-size')}: #{deepGet($sizes, $key, $val)};
28
+ }
29
+
30
+ @mixin set-padding-var($key, $val) {
31
+ #{getCssVarStr('message' ,'padding')}: #{deepGet($sizes, $key, $val)};
32
+ }
33
+
34
+ @mixin set-close-size-var($key, $val) {
35
+ #{getCssVarStr('message' ,'close-size')}: #{deepGet($sizes, $key, $val)};
36
+ }
37
+ @mixin set-icon-size-var($key, $val) {
38
+ #{getCssVarStr('message' ,'icon-size')}: #{deepGet($sizes, $key, $val)};
39
+ }
40
+
41
+ @mixin set-bbc-color-vars($type) {
42
+ @include set-bgcolor-var($type, 'bgcolor');
43
+ @include is('plain') {
44
+ @include set-bgcolor-custom(getCssVar('color', 'fill', 'blank'));
45
+ }
46
+ @include set-color-var($type, 'color');
47
+ @include set-bordercolor-var($type, 'border-color');
48
+ }
49
+
50
+ @mixin message-modifier($message, $type) {
51
+ @include set-bbc-color-vars($type);
52
+ }
53
+
54
+ @mixin message-var() {
55
+ @include set-font-size-var('message', 'font-size');
56
+ @include set-radius-var('message', 'border-radius');
57
+ @include set-padding-var('message', 'padding');
58
+ @include set-close-size-var('message', 'close-size');
59
+ @include set-icon-size-var('message', 'icon-size');
60
+ }
61
+
62
+ @mixin message-modifier-style($message, $type) {
63
+ @if $type != '' {
64
+ &--#{$type} {
65
+ @include message-modifier($message, $type);
66
+ }
67
+ } @else {
68
+ @include message-modifier($message, $type);
69
+ }
70
+ }
@@ -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,5 +0,0 @@
1
- import e from "./content.vue_vue_type_script_setup_true_lang.mjs";
2
- //#region packages/components/tooltip/src/content.vue
3
- var t = e;
4
- //#endregion
5
- export { t as default };
@@ -1,166 +0,0 @@
1
- import { toPx as e } from "../../../utils/util.mjs";
2
- import "../../../utils/index.mjs";
3
- import { useNamespace as t } from "../../../composables/use-namespace/index.mjs";
4
- import { useZIndex as n } from "../../../composables/use-z-index/index.mjs";
5
- import { useTheme as r } from "../../../composables/use-theme/index.mjs";
6
- import "../../../composables/index.mjs";
7
- import { useEmits as i } from "./use-emit.mjs";
8
- import { Teleport as a, Transition as o, computed as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createVNode as d, defineComponent as f, mergeModels as p, mergeProps as m, normalizeClass as h, normalizeStyle as g, onUnmounted as _, openBlock as v, ref as y, renderSlot as b, toHandlerKey as x, unref as S, useModel as C, useTemplateRef as w, watch as T, withCtx as E } from "vue";
9
- //#region packages/components/tooltip/src/content.vue?vue&type=script&setup=true&lang.ts
10
- var D = ["data-placement"], O = f({
11
- __name: "content",
12
- props: p({
13
- modelValue: { type: Boolean },
14
- style: {
15
- type: [
16
- Boolean,
17
- null,
18
- String,
19
- Object,
20
- Array
21
- ],
22
- default: () => void 0
23
- },
24
- arrowStyle: { default: () => void 0 },
25
- appendTo: { default: "body" },
26
- teleported: {
27
- type: Boolean,
28
- default: !0
29
- },
30
- defer: {
31
- type: Boolean,
32
- default: () => void 0
33
- },
34
- content: {},
35
- placement: { default: "top" },
36
- showArrow: {
37
- type: Boolean,
38
- default: !1
39
- },
40
- width: { default: () => void 0 },
41
- height: { default: () => void 0 },
42
- maxWidth: { default: () => void 0 },
43
- maxHeight: { default: () => void 0 },
44
- floatingClass: { default: () => void 0 },
45
- transition: { default: "" },
46
- mode: { default: () => void 0 },
47
- cssTransition: {
48
- type: Boolean,
49
- default: !1
50
- },
51
- cssDuration: { default: 0 },
52
- appear: {
53
- type: Boolean,
54
- default: !1
55
- },
56
- zIndex: { default: () => void 0 },
57
- theme: { default: "light" },
58
- reverseTheme: {
59
- type: Boolean,
60
- default: !1
61
- }
62
- }, {
63
- modelValue: {
64
- type: Boolean,
65
- default: !1
66
- },
67
- modelModifiers: {}
68
- }),
69
- emits: p([
70
- "beforeShow",
71
- "show",
72
- "beforeHide",
73
- "hide",
74
- "beforeEnter",
75
- "enter",
76
- "enterCancelled",
77
- "afterEnter",
78
- "beforeLeave",
79
- "leave",
80
- "leaveCancelled",
81
- "afterLeave"
82
- ], ["update:modelValue"]),
83
- setup(f, { expose: p, emit: O }) {
84
- let k = C(f, "modelValue"), { beforeShow: A, show: j, beforeHide: M, hide: N, beforeEnter: P, beforeLeave: F, enter: I, leave: L, afterEnter: R, afterLeave: z, enterCancelled: ee, leaveCancelled: B } = i(O), { n: V, ns: H, is: U } = t("tooltip"), { currentTheme: W } = r(f.theme, f.reverseTheme), G = w("floatingRef"), K = w("arrowRef"), q = s(() => [f.style, {
85
- width: e(f.width),
86
- height: e(f.height),
87
- maxWidth: e(f.maxWidth),
88
- maxHeight: e(f.maxHeight),
89
- zIndex: J.value
90
- }]), J = y(0), { zIndex: Y } = n(), { stop: X } = T(k, (e) => {
91
- e && (J.value = f.zIndex || Y.value);
92
- }), Z = s(() => f.cssTransition ? null : "enter"), Q = s(() => f.cssTransition ? null : "leave"), $ = (e) => {
93
- f.cssTransition ? A(e) : P(e);
94
- }, te = (e, t) => {
95
- I(e, t);
96
- }, ne = (e) => {
97
- ee(e);
98
- }, re = (e) => {
99
- f.cssTransition ? j(e) : R(e);
100
- }, ie = (e) => {
101
- f.cssTransition ? M(e) : F(e);
102
- }, ae = (e, t) => {
103
- L(e, t);
104
- }, oe = (e) => {
105
- B(e);
106
- }, se = (e) => {
107
- f.cssTransition ? N(e) : z(e);
108
- };
109
- return _(() => {
110
- X();
111
- }), p({
112
- floatingRef: G,
113
- arrowRef: K
114
- }), (e, t) => (v(), c(a, {
115
- disabled: !f.teleported,
116
- defer: f.defer,
117
- to: f.appendTo
118
- }, [d(o, m({
119
- name: f.transition,
120
- type: "transition",
121
- css: f.cssTransition,
122
- duration: f.cssDuration,
123
- appear: f.appear,
124
- mode: f.mode,
125
- onBeforeEnter: $,
126
- onBeforeLeave: ie
127
- }, { [x(Z.value)]: te }, { [x(Q.value)]: ae }, {
128
- onEnterCancelled: ne,
129
- onLeaveCancelled: oe,
130
- onAfterEnter: re,
131
- onAfterLeave: se
132
- }), {
133
- default: E(() => [k.value ? (v(), u("div", {
134
- key: 0,
135
- ref_key: "floatingRef",
136
- ref: G,
137
- style: g(q.value),
138
- class: h([
139
- S(V)(),
140
- S(U)(S(W), !!S(W)),
141
- f.floatingClass
142
- ])
143
- }, [b(e.$slots, "default"), f.showArrow ? (v(), u("span", {
144
- key: 0,
145
- ref_key: "arrowRef",
146
- ref: K,
147
- "data-placement": f.placement,
148
- style: g(f.arrowStyle),
149
- class: h([S(H)("arrow")])
150
- }, null, 14, D)) : l("", !0)], 6)) : l("", !0)]),
151
- _: 3
152
- }, 16, [
153
- "name",
154
- "css",
155
- "duration",
156
- "appear",
157
- "mode"
158
- ])], 8, [
159
- "disabled",
160
- "defer",
161
- "to"
162
- ]));
163
- }
164
- });
165
- //#endregion
166
- export { O as default };