@bitrix24/b24ui-nuxt 0.4.11 → 0.5.0

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.
@@ -1,9 +1,23 @@
1
1
  const color = [
2
- "default"
2
+ "default",
3
+ "danger",
4
+ "success",
5
+ "warning",
6
+ "primary",
7
+ "secondary",
8
+ "collab",
9
+ "ai"
3
10
  ] as const
4
11
 
5
12
  const highlightColor = [
6
- "default"
13
+ "default",
14
+ "danger",
15
+ "success",
16
+ "warning",
17
+ "primary",
18
+ "secondary",
19
+ "collab",
20
+ "ai"
7
21
  ] as const
8
22
 
9
23
  const variant = [
@@ -23,47 +37,63 @@ const contentOrientation = [
23
37
 
24
38
  export default {
25
39
  "slots": {
26
- "root": "relative flex gap-1.5 [&>div]:min-w-0",
40
+ "root": "relative flex [&>div]:min-w-0 font-b24-secondary",
27
41
  "list": "isolate min-w-0",
28
- "label": "w-full flex items-center gap-1.5 font-semibold text-xs/5 text-(--ui-text-highlighted) px-2.5 py-1.5",
42
+ "label": "w-full min-h-6 flex items-center rtl:flex-row-reverse gap-1.5 font-medium text-xs/6 text-base-500 dark:text-base-400 ps-2xl pe-xs rtl:ps-xs rtl:pe-2xl",
29
43
  "item": "min-w-0",
30
- "link": "group relative w-full flex items-center gap-1.5 font-medium text-sm before:absolute before:z-[-1] before:rounded-[calc(var(--ui-radius)*1.5)] focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2",
44
+ "link": "group relative cursor-pointer w-full flex items-center gap-1.5 font-normal text-lg leading-9 min-h-9 before:absolute before:z-[-1] focus:outline-none focus-visible:before:rounded-md focus-visible:outline-none dark:focus-visible:outline-none focus-visible:before:ring-inset focus-visible:before:ring-2",
31
45
  "linkLeadingIcon": "shrink-0 size-5",
32
46
  "linkLeadingAvatar": "shrink-0",
33
47
  "linkLeadingAvatarSize": "2xs",
34
48
  "linkTrailing": "ms-auto inline-flex gap-1.5 items-center",
35
49
  "linkTrailingBadge": "shrink-0",
36
50
  "linkTrailingBadgeSize": "sm",
37
- "linkTrailingIcon": "size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200",
51
+ "linkTrailingIcon": "text-base-600 size-5 transform shrink-0 group-data-[state=open]:rotate-180 transition-transform duration-200",
38
52
  "linkLabel": "truncate",
39
- "linkLabelExternalIcon": "inline-block size-3 align-top text-(--ui-text-dimmed)",
53
+ "linkLabelExternalIcon": "inline-block h-6 w-3 align-top text-base-500 dark:text-base-700",
40
54
  "childList": "",
41
55
  "childItem": "",
42
- "childLink": "group size-full px-3 py-2 rounded-[calc(var(--ui-radius)*1.5)] flex items-start gap-2 text-start",
56
+ "childLink": "group size-full px-3 py-2 flex items-start gap-2 text-start",
43
57
  "childLinkWrapper": "flex flex-col items-start",
44
58
  "childLinkIcon": "size-5 shrink-0",
45
59
  "childLinkLabel": "font-semibold text-sm relative inline-flex",
46
- "childLinkLabelExternalIcon": "inline-block size-3 align-top text-(--ui-text-dimmed)",
60
+ "childLinkLabelExternalIcon": "inline-block h-6 w-3 align-top text-base-500 dark:text-base-700",
47
61
  "childLinkDescription": "text-sm text-(--ui-text-muted)",
48
62
  "separator": "px-2 h-px bg-(--ui-border)",
49
63
  "viewportWrapper": "absolute top-full left-0 flex w-full",
50
- "viewport": "relative overflow-hidden bg-(--ui-bg) shadow-lg rounded-[calc(var(--ui-radius)*1.5)] ring ring-(--ui-border) h-(--reka-navigation-menu-viewport-height) w-full transition-[width,height,left] duration-200 origin-[top_center] data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in]",
64
+ "viewport": "relative overflow-hidden w-full bg-(--ui-bg) shadow-lg rounded-md ring ring-(--ui-border) h-(--reka-navigation-menu-viewport-height) transition-[width,height,left] duration-200 origin-[top_center] motion-safe:data-[state=open]:animate-[scale-in_100ms_ease-out] motion-safe:data-[state=closed]:animate-[scale-out_100ms_ease-in]",
51
65
  "content": "absolute top-0 left-0 w-full",
52
- "indicator": "absolute data-[state=visible]:animate-[fade-in_100ms_ease-out] data-[state=hidden]:animate-[fade-out_100ms_ease-in] data-[state=hidden]:opacity-0 bottom-0 z-[1] w-(--reka-navigation-menu-indicator-size) translate-x-(--reka-navigation-menu-indicator-position) flex h-2.5 items-end justify-center overflow-hidden transition-[translate,width] duration-200",
53
- "arrow": "relative top-[50%] size-2.5 rotate-45 border border-(--ui-border) bg-(--ui-bg) z-[1] rounded-[calc(var(--ui-radius)/2)]"
66
+ "indicator": "absolute motion-safe:data-[state=visible]:animate-[fade-in_100ms_ease-out] motion-safe:data-[state=hidden]:animate-[fade-out_100ms_ease-in] data-[state=hidden]:opacity-0 bottom-0 z-[1] w-(--reka-navigation-menu-indicator-size) h-2.5 translate-x-(--reka-navigation-menu-indicator-position) flex items-end justify-center overflow-hidden transition-[translate,width] duration-200",
67
+ "arrow": "relative top-[50%] size-2.5 rotate-45 border border-(--ui-border) bg-(--ui-bg) z-[1] rounded-md"
54
68
  },
55
69
  "variants": {
56
70
  "color": {
57
71
  "default": {
58
- "link": "focus-visible:before:ring-(--ui-border-inverted)",
59
- "childLink": "focus-visible:outline-(--ui-border-inverted)"
60
- }
72
+ "link": "focus-visible:before:ring-base-300 dark:focus-visible:before:ring-base-800",
73
+ "childLink": "focus-visible:outline-base-300 dark:focus-visible:outline-base-800"
74
+ },
75
+ "danger": "",
76
+ "success": "",
77
+ "warning": "",
78
+ "primary": "",
79
+ "secondary": "",
80
+ "collab": "",
81
+ "ai": ""
61
82
  },
62
83
  "highlightColor": {
63
- "default": ""
84
+ "default": "",
85
+ "danger": "",
86
+ "success": "",
87
+ "warning": "",
88
+ "primary": "",
89
+ "secondary": "",
90
+ "collab": "",
91
+ "ai": ""
64
92
  },
65
93
  "variant": {
66
- "pill": "",
94
+ "pill": {
95
+ "link": "hover:before:bg-base-250/80 dark:hover:before:bg-white/10"
96
+ },
67
97
  "link": ""
68
98
  },
69
99
  "orientation": {
@@ -75,15 +105,15 @@ export default {
75
105
  "childList": "grid p-2"
76
106
  },
77
107
  "vertical": {
78
- "root": "flex-col",
79
- "link": "flex-row px-2.5 py-1.5 before:inset-y-px before:inset-x-0"
108
+ "root": "flex-col w-full",
109
+ "link": "ps-2xl pe-xs rtl:ps-xs rtl:pe-2xl flex-row rtl:flex-row-reverse before:inset-y-px before:inset-x-0"
80
110
  }
81
111
  },
82
112
  "contentOrientation": {
83
113
  "horizontal": {
84
114
  "viewport": "",
85
115
  "viewportWrapper": "justify-center",
86
- "content": "data-[motion=from-start]:animate-[enter-from-left_200ms_ease] data-[motion=from-end]:animate-[enter-from-right_200ms_ease] data-[motion=to-start]:animate-[exit-to-left_200ms_ease] data-[motion=to-end]:animate-[exit-to-right_200ms_ease]"
116
+ "content": "motion-safe:data-[motion=from-start]:animate-[enter-from-left_200ms_ease] motion-safe:data-[motion=from-end]:animate-[enter-from-right_200ms_ease] motion-safe:data-[motion=to-start]:animate-[exit-to-left_200ms_ease] motion-safe:data-[motion=to-end]:animate-[exit-to-right_200ms_ease]"
87
117
  },
88
118
  "vertical": {
89
119
  "viewport": "sm:w-(--reka-navigation-menu-viewport-width) left-(--reka-navigation-menu-viewport-left)",
@@ -96,16 +126,10 @@ export default {
96
126
  "childLinkIcon": "text-(--ui-text)"
97
127
  },
98
128
  "false": {
99
- "link": "text-(--ui-text-muted)",
100
- "linkLeadingIcon": "text-(--ui-text-dimmed)",
101
- "childLink": [
102
- "hover:bg-(--ui-bg-elevated)/50 text-(--ui-text) hover:text-(--ui-text-highlighted)",
103
- "transition-colors"
104
- ],
105
- "childLinkIcon": [
106
- "text-(--ui-text-dimmed) group-hover:text-(--ui-text)",
107
- "transition-colors"
108
- ]
129
+ "link": "text-base-900 dark:text-base-200",
130
+ "linkLeadingIcon": "text-base-500 dark:text-base-700",
131
+ "childLink": "hover:bg-(--ui-bg-elevated)/50 text-(--ui-text) hover:text-(--ui-text-highlighted) transition-colors",
132
+ "childLinkIcon": "text-base-500 dark:text-base-700 group-hover:text-(--ui-text) transition-colors"
109
133
  }
110
134
  },
111
135
  "disabled": {
@@ -165,14 +189,8 @@ export default {
165
189
  "active": false,
166
190
  "variant": "pill" as typeof variant[number],
167
191
  "class": {
168
- "link": [
169
- "hover:text-(--ui-text-highlighted) hover:before:bg-(--ui-bg-elevated)/50",
170
- "transition-colors before:transition-colors"
171
- ],
172
- "linkLeadingIcon": [
173
- "group-hover:text-(--ui-text)",
174
- "transition-colors"
175
- ]
192
+ "link": "transition-colors before:transition-colors",
193
+ "linkLeadingIcon": "group-hover:text-(--ui-text) transition-colors"
176
194
  }
177
195
  },
178
196
  {
@@ -209,8 +227,8 @@ export default {
209
227
  "variant": "pill" as typeof variant[number],
210
228
  "active": true,
211
229
  "class": {
212
- "link": "text-(--ui-text-highlighted)",
213
- "linkLeadingIcon": "text-(--ui-text-highlighted) group-data-[state=open]:text-(--ui-text-highlighted)"
230
+ "linkLeadingIcon": "text-(--ui-text-highlighted) group-data-[state=open]:text-(--ui-text-highlighted)",
231
+ "linkLabel": "text-white dark:text-white bg-base-800 dark:bg-white/35"
214
232
  }
215
233
  },
216
234
  {
@@ -218,7 +236,8 @@ export default {
218
236
  "active": true,
219
237
  "highlight": false,
220
238
  "class": {
221
- "link": "before:bg-(--ui-bg-elevated)"
239
+ "link": "leading-9",
240
+ "linkLabel": "px-3 -ms-3 me-3 rtl:-me-3 rtl:ms-3 font-semibold leading-[1.563rem] text-white dark:text-white bg-base-800 dark:bg-white/35 rounded-2xl"
222
241
  }
223
242
  },
224
243
  {
@@ -237,14 +256,8 @@ export default {
237
256
  "active": false,
238
257
  "variant": "link" as typeof variant[number],
239
258
  "class": {
240
- "link": [
241
- "hover:text-(--ui-text-highlighted)",
242
- "transition-colors"
243
- ],
244
- "linkLeadingIcon": [
245
- "group-hover:text-(--ui-text)",
246
- "transition-colors"
247
- ]
259
+ "link": "hover:text-base-950 dark:hover:text-base-50 transition-colors",
260
+ "linkLeadingIcon": "group-hover:text-(--ui-text) transition-colors"
248
261
  }
249
262
  },
250
263
  {
@@ -279,8 +292,8 @@ export default {
279
292
  "orientation": "vertical" as typeof orientation[number],
280
293
  "collapsed": false,
281
294
  "class": {
282
- "childList": "ms-5 border-s border-(--ui-border)",
283
- "childItem": "ps-1.5 -ms-px"
295
+ "childList": "v-1",
296
+ "childItem": "v-2 [&>a]:ps-[44px]"
284
297
  }
285
298
  },
286
299
  {
@@ -1,6 +1,6 @@
1
1
  export default {
2
2
  "slots": {
3
- "root": "p-4 flex flex-1 flex-col overflow-y-auto [&>[data-slot=section]+[data-slot=section]]:mt-8"
3
+ "root": "py-4 flex flex-1 flex-col overflow-y-auto [&>[data-slot=section]+[data-slot=section]]:mt-8"
4
4
  },
5
5
  "variants": {
6
6
  "scrollbarThin": {
@@ -1,5 +1,5 @@
1
1
  export default {
2
2
  "slots": {
3
- "root": "p-4 flex flex-col max-lg:hidden [&>[data-slot=section]+[data-slot=section]]:mt-2.5"
3
+ "root": "py-4 flex flex-col max-lg:hidden [&>[data-slot=section]+[data-slot=section]]:mt-2.5"
4
4
  }
5
5
  }
@@ -1,5 +1,5 @@
1
1
  export default {
2
2
  "slots": {
3
- "root": "p-4 flex flex-col [&>[data-slot=section]+[data-slot=section]]:mt-2.5"
3
+ "root": "py-4 flex flex-col [&>[data-slot=section]+[data-slot=section]]:mt-2.5"
4
4
  }
5
5
  }
@@ -1,5 +1,5 @@
1
1
  export default {
2
2
  "slots": {
3
- "root": "mb-1 px-2 text-xs/6 font-medium text-base-500 dark:text-base-400"
3
+ "root": "mb-1 text-xs/6 font-medium text-base-500 dark:text-base-400"
4
4
  }
5
5
  }
@@ -1,5 +1,5 @@
1
1
  export default {
2
2
  "slots": {
3
- "root": "flex flex-col gap-0.5"
3
+ "root": "ps-2xl pe-xs flex flex-col gap-0.5"
4
4
  }
5
5
  }