@stisocial/ui 0.2.0 → 0.2.1
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/CHANGELOG.md +14 -0
- package/dist/components/TimeSlotPicker/TimeSlotPicker.d.ts +1 -11
- package/dist/components/TimeSlotPicker/TimeSlotPicker.js +2 -24
- package/dist/components/TimeSlotPicker/index.d.ts +3 -2
- package/dist/components/TimeSlotPicker/timeSlots.d.ts +12 -0
- package/dist/components/TimeSlotPicker/timeSlots.js +25 -0
- package/dist/id/AccountMenu/AccountMenu.css +128 -44
- package/dist/id/AccountMenu/AccountMenu.d.ts +37 -9
- package/dist/id/AccountMenu/AccountMenu.js +138 -65
- package/dist/id/AccountMenu/AccountMenu.module.js +16 -9
- package/dist/id/AccountMenu/index.d.ts +2 -2
- package/dist/id/AppSwitcher/AppSwitcher.css +153 -31
- package/dist/id/AppSwitcher/AppSwitcher.d.ts +31 -6
- package/dist/id/AppSwitcher/AppSwitcher.js +90 -37
- package/dist/id/AppSwitcher/AppSwitcher.module.js +12 -6
- package/dist/id/AppSwitcher/index.d.ts +2 -2
- package/dist/id/OrgSwitcher/OrgSwitcher.css +129 -17
- package/dist/id/OrgSwitcher/OrgSwitcher.d.ts +30 -5
- package/dist/id/OrgSwitcher/OrgSwitcher.js +110 -74
- package/dist/id/OrgSwitcher/OrgSwitcher.module.js +11 -7
- package/dist/id/OrgSwitcher/index.d.ts +2 -2
- package/dist/id/PermissionGate/PermissionGate.css +25 -14
- package/dist/id/PermissionGate/PermissionGate.d.ts +3 -1
- package/dist/id/PermissionGate/PermissionGate.js +15 -8
- package/dist/id/PermissionGate/PermissionGate.module.js +6 -5
- package/dist/id/SignInButton/SignInButton.css +179 -0
- package/dist/id/SignInButton/SignInButton.d.ts +12 -3
- package/dist/id/SignInButton/SignInButton.js +37 -18
- package/dist/id/SignInButton/SignInButton.module.js +10 -0
- package/dist/id/_internal/StiMark/StiMark.css +28 -0
- package/dist/id/_internal/StiMark/StiMark.js +37 -0
- package/dist/id/_internal/StiMark/StiMark.module.js +8 -0
- package/dist/id/index.d.ts +4 -4
- package/dist/id/index.js +4 -4
- package/dist/index.d.ts +3 -2
- package/dist/index.js +2 -1
- package/dist/messages/messages.d.ts +7 -0
- package/dist/messages/messages.js +14 -0
- package/dist/styles.css +644 -106
- package/dist/text/text.d.ts +5 -1
- package/dist/text/text.js +8 -2
- package/package.json +1 -1
|
@@ -1,14 +1,21 @@
|
|
|
1
1
|
import './AccountMenu.css';
|
|
2
2
|
// src/id/AccountMenu/AccountMenu.module.css
|
|
3
3
|
var AccountMenu_module_default = {
|
|
4
|
-
"trigger": "sti-AccountMenu-trigger-
|
|
5
|
-
"card": "sti-AccountMenu-card-
|
|
6
|
-
"
|
|
7
|
-
"identity": "sti-AccountMenu-identity-
|
|
8
|
-
"
|
|
9
|
-
"
|
|
10
|
-
"email": "sti-AccountMenu-email-
|
|
11
|
-
"
|
|
12
|
-
"
|
|
4
|
+
"trigger": "sti-AccountMenu-trigger-b7836",
|
|
5
|
+
"card": "sti-AccountMenu-card-5ba55",
|
|
6
|
+
"panel": "sti-AccountMenu-panel-697e1",
|
|
7
|
+
"identity": "sti-AccountMenu-identity-42ef2",
|
|
8
|
+
"greeting": "sti-AccountMenu-greeting-ced99",
|
|
9
|
+
"fullName": "sti-AccountMenu-fullName-7a91b",
|
|
10
|
+
"email": "sti-AccountMenu-email-c7b78",
|
|
11
|
+
"manage": "sti-AccountMenu-manage-2a04e",
|
|
12
|
+
"group": "sti-AccountMenu-group-8f65f",
|
|
13
|
+
"list": "sti-AccountMenu-list-0d7e5",
|
|
14
|
+
"groupTitle": "sti-AccountMenu-groupTitle-3bc6e",
|
|
15
|
+
"accountRow": "sti-AccountMenu-accountRow-2470c",
|
|
16
|
+
"legal": "sti-AccountMenu-legal-3b18a",
|
|
17
|
+
"legalItem": "sti-AccountMenu-legalItem-5deef",
|
|
18
|
+
"dot": "sti-AccountMenu-dot-af8da",
|
|
19
|
+
"legalLink": "sti-AccountMenu-legalLink-e2e81"
|
|
13
20
|
};
|
|
14
21
|
export { AccountMenu_module_default as default };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { AccountMenu, AccountMenuAccount, AccountMenuItem, AccountMenuProps } from "./AccountMenu.js";
|
|
2
|
-
export { AccountMenu, AccountMenuAccount, AccountMenuItem, AccountMenuProps };
|
|
1
|
+
import { AccountMenu, AccountMenuAccount, AccountMenuItem, AccountMenuOtherAccount, AccountMenuPanel, AccountMenuPanelProps, AccountMenuProps } from "./AccountMenu.js";
|
|
2
|
+
export { AccountMenu, AccountMenuAccount, AccountMenuItem, AccountMenuOtherAccount, AccountMenuPanel, AccountMenuPanelProps, AccountMenuProps };
|
|
@@ -1,31 +1,58 @@
|
|
|
1
1
|
@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
|
|
2
2
|
@layer sti.components {
|
|
3
|
-
.sti-AppSwitcher-
|
|
4
|
-
|
|
3
|
+
.sti-AppSwitcher-trigger-4e70a {
|
|
4
|
+
flex: none;
|
|
5
|
+
align-self: center;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.sti-AppSwitcher-card-225e3 {
|
|
9
|
+
--sti-floating-w: 21rem;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.sti-AppSwitcher-panel-a6602 {
|
|
13
|
+
gap: var(--sti-space-3);
|
|
14
|
+
min-inline-size: 0;
|
|
15
|
+
color: var(--sti-fg);
|
|
5
16
|
font-family: var(--sti-font-text);
|
|
17
|
+
display: grid;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.sti-AppSwitcher-title-6d2e0 {
|
|
21
|
+
padding-inline: var(--sti-space-1);
|
|
22
|
+
color: var(--sti-fg);
|
|
23
|
+
font-size: var(--sti-font-size-sm);
|
|
24
|
+
font-weight: var(--sti-font-weight-semibold);
|
|
25
|
+
line-height: var(--sti-line-height-sm);
|
|
26
|
+
margin: 0;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.sti-AppSwitcher-grid-337c1 {
|
|
30
|
+
gap: var(--sti-space-1);
|
|
31
|
+
padding: var(--sti-space-1);
|
|
32
|
+
border-radius: var(--sti-radius-lg);
|
|
33
|
+
background: var(--sti-bg-subtle);
|
|
6
34
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
7
35
|
margin: 0;
|
|
8
|
-
padding: 0;
|
|
9
36
|
list-style: none;
|
|
10
37
|
display: grid;
|
|
11
38
|
}
|
|
12
39
|
|
|
13
40
|
@media (width <= 22.5rem) {
|
|
14
|
-
.sti-AppSwitcher-grid-
|
|
41
|
+
.sti-AppSwitcher-grid-337c1 {
|
|
15
42
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
16
43
|
}
|
|
17
44
|
}
|
|
18
45
|
|
|
19
|
-
.sti-AppSwitcher-cell-
|
|
46
|
+
.sti-AppSwitcher-cell-8b890 {
|
|
20
47
|
min-inline-size: 0;
|
|
21
48
|
}
|
|
22
49
|
|
|
23
|
-
.sti-AppSwitcher-app-
|
|
50
|
+
.sti-AppSwitcher-app-4fff1 {
|
|
24
51
|
align-items: center;
|
|
25
52
|
gap: var(--sti-space-2);
|
|
26
53
|
box-sizing: border-box;
|
|
27
|
-
min-block-size:
|
|
28
|
-
padding: var(--sti-space-3) var(--sti-space-2);
|
|
54
|
+
min-block-size: 6rem;
|
|
55
|
+
padding: var(--sti-space-3) var(--sti-space-1) var(--sti-space-2);
|
|
29
56
|
border: var(--sti-border-width) solid transparent;
|
|
30
57
|
border-radius: var(--sti-radius-md);
|
|
31
58
|
color: var(--sti-fg);
|
|
@@ -36,73 +63,168 @@
|
|
|
36
63
|
flex-direction: column;
|
|
37
64
|
text-decoration: none;
|
|
38
65
|
display: flex;
|
|
66
|
+
position: relative;
|
|
39
67
|
}
|
|
40
68
|
|
|
41
69
|
@media (hover: hover) {
|
|
42
|
-
.sti-AppSwitcher-app-
|
|
70
|
+
.sti-AppSwitcher-app-4fff1[data-hovered] {
|
|
43
71
|
background: var(--sti-bg-surface-hover);
|
|
44
72
|
}
|
|
45
73
|
}
|
|
46
74
|
|
|
47
|
-
.sti-AppSwitcher-app-
|
|
75
|
+
.sti-AppSwitcher-app-4fff1[data-pressed] {
|
|
48
76
|
background: var(--sti-bg-surface-active);
|
|
49
77
|
}
|
|
50
78
|
|
|
51
|
-
.sti-AppSwitcher-app-
|
|
79
|
+
.sti-AppSwitcher-app-4fff1[data-current] {
|
|
52
80
|
border-color: var(--sti-border-selected);
|
|
53
81
|
background: var(--sti-bg-accent-subtle);
|
|
54
82
|
}
|
|
55
83
|
|
|
56
|
-
.sti-AppSwitcher-app-
|
|
84
|
+
.sti-AppSwitcher-app-4fff1[data-focus-visible] {
|
|
57
85
|
outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
|
|
58
|
-
outline-offset: var(--sti-focus-ring-
|
|
86
|
+
outline-offset: calc(var(--sti-focus-ring-width) * -1);
|
|
59
87
|
}
|
|
60
88
|
|
|
61
|
-
.sti-AppSwitcher-tile-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
89
|
+
.sti-AppSwitcher-tile-3c344 {
|
|
90
|
+
--sti-app-tile-bg: var(--sti-bg-surface);
|
|
91
|
+
--sti-app-tile-fg: var(--sti-fg);
|
|
92
|
+
box-sizing: border-box;
|
|
93
|
+
border-radius: var(--sti-radius-lg);
|
|
94
|
+
background: var(--sti-app-tile-bg);
|
|
95
|
+
block-size: 3rem;
|
|
96
|
+
inline-size: 3rem;
|
|
97
|
+
color: var(--sti-app-tile-fg);
|
|
98
|
+
font-family: var(--sti-font-display);
|
|
99
|
+
font-size: var(--sti-font-size-lg);
|
|
68
100
|
font-weight: var(--sti-font-weight-semibold);
|
|
101
|
+
letter-spacing: var(--sti-tracking-lg);
|
|
102
|
+
box-shadow: inset 0 0 0 var(--sti-border-width) var(--sti-border-subtle);
|
|
69
103
|
flex: none;
|
|
70
104
|
place-items: center;
|
|
105
|
+
line-height: 1;
|
|
71
106
|
display: inline-grid;
|
|
72
107
|
}
|
|
73
108
|
|
|
74
|
-
.sti-AppSwitcher-
|
|
75
|
-
|
|
76
|
-
color: var(--sti-fg-on-accent);
|
|
109
|
+
.sti-AppSwitcher-tile-3c344[data-icon] {
|
|
110
|
+
font-size: var(--sti-icon-lg);
|
|
77
111
|
}
|
|
78
112
|
|
|
79
|
-
.sti-AppSwitcher-
|
|
80
|
-
|
|
81
|
-
|
|
113
|
+
.sti-AppSwitcher-tile-3c344[data-icon] > svg {
|
|
114
|
+
block-size: 1.5rem;
|
|
115
|
+
inline-size: 1.5rem;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.sti-AppSwitcher-tile-3c344[data-color="neutral"] {
|
|
119
|
+
--sti-app-tile-bg: var(--sti-bg-surface-active);
|
|
120
|
+
--sti-app-tile-fg: var(--sti-fg);
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.sti-AppSwitcher-tile-3c344[data-color="neutral-strong"] {
|
|
124
|
+
--sti-app-tile-bg: var(--sti-fill-neutral);
|
|
125
|
+
--sti-app-tile-fg: var(--sti-fg-on-neutral);
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.sti-AppSwitcher-tile-3c344[data-color="success"] {
|
|
129
|
+
--sti-app-tile-bg: var(--sti-bg-success-subtle);
|
|
130
|
+
--sti-app-tile-fg: var(--sti-fg-success-strong);
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.sti-AppSwitcher-tile-3c344[data-color="success-strong"] {
|
|
134
|
+
--sti-app-tile-bg: var(--sti-fill-success);
|
|
135
|
+
--sti-app-tile-fg: var(--sti-fg-on-success);
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.sti-AppSwitcher-tile-3c344[data-color="warning"] {
|
|
139
|
+
--sti-app-tile-bg: var(--sti-bg-warning-subtle);
|
|
140
|
+
--sti-app-tile-fg: var(--sti-fg-warning-strong);
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.sti-AppSwitcher-tile-3c344[data-color="warning-strong"] {
|
|
144
|
+
--sti-app-tile-bg: var(--sti-fill-warning);
|
|
145
|
+
--sti-app-tile-fg: var(--sti-fg-on-warning);
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.sti-AppSwitcher-name-d8837 {
|
|
149
|
+
max-inline-size: 100%;
|
|
150
|
+
font-size: var(--sti-font-size-xs);
|
|
82
151
|
font-weight: var(--sti-font-weight-medium);
|
|
83
|
-
line-height: var(--sti-line-height-
|
|
152
|
+
line-height: var(--sti-line-height-xs);
|
|
84
153
|
overflow-wrap: anywhere;
|
|
154
|
+
-webkit-line-clamp: 2;
|
|
155
|
+
-webkit-box-orient: vertical;
|
|
156
|
+
display: -webkit-box;
|
|
157
|
+
overflow: hidden;
|
|
85
158
|
}
|
|
86
159
|
|
|
87
|
-
.sti-AppSwitcher-empty-
|
|
160
|
+
.sti-AppSwitcher-empty-21386 {
|
|
161
|
+
padding: var(--sti-space-4) var(--sti-space-3);
|
|
162
|
+
border-radius: var(--sti-radius-lg);
|
|
163
|
+
background: var(--sti-bg-subtle);
|
|
88
164
|
color: var(--sti-fg-muted);
|
|
89
165
|
font-size: var(--sti-font-size-sm);
|
|
90
166
|
line-height: var(--sti-line-height-sm);
|
|
167
|
+
text-align: center;
|
|
91
168
|
margin: 0;
|
|
92
169
|
}
|
|
93
170
|
|
|
171
|
+
.sti-AppSwitcher-more-0361c {
|
|
172
|
+
justify-content: center;
|
|
173
|
+
align-items: center;
|
|
174
|
+
gap: var(--sti-space-1);
|
|
175
|
+
min-block-size: var(--sti-control-h-sm);
|
|
176
|
+
border-radius: var(--sti-radius-pill);
|
|
177
|
+
color: var(--sti-fg-link);
|
|
178
|
+
font-size: var(--sti-font-size-sm);
|
|
179
|
+
font-weight: var(--sti-font-weight-medium);
|
|
180
|
+
line-height: var(--sti-line-height-sm);
|
|
181
|
+
cursor: pointer;
|
|
182
|
+
text-decoration: none;
|
|
183
|
+
display: inline-flex;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
.sti-AppSwitcher-moreIcon-8c7d2 {
|
|
187
|
+
block-size: 1em;
|
|
188
|
+
inline-size: 1em;
|
|
189
|
+
transition: translate var(--sti-duration-fast) var(--sti-ease-snap);
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
@media (hover: hover) {
|
|
193
|
+
.sti-AppSwitcher-more-0361c[data-hovered] {
|
|
194
|
+
text-underline-offset: .2em;
|
|
195
|
+
text-decoration: underline;
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
.sti-AppSwitcher-more-0361c[data-hovered] .sti-AppSwitcher-moreIcon-8c7d2 {
|
|
199
|
+
translate: .125rem;
|
|
200
|
+
}
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
.sti-AppSwitcher-more-0361c[data-focus-visible] {
|
|
204
|
+
outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
|
|
205
|
+
outline-offset: var(--sti-focus-ring-offset);
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
.sti-AppSwitcher-moreIcon-8c7d2:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
|
|
209
|
+
scale: -1 1;
|
|
210
|
+
}
|
|
211
|
+
|
|
94
212
|
@media (forced-colors: active) {
|
|
95
|
-
.sti-AppSwitcher-app-
|
|
213
|
+
.sti-AppSwitcher-app-4fff1[data-current] {
|
|
96
214
|
border-color: highlight;
|
|
97
215
|
}
|
|
98
216
|
|
|
99
|
-
.sti-AppSwitcher-app-
|
|
217
|
+
.sti-AppSwitcher-app-4fff1[data-focus-visible], .sti-AppSwitcher-more-0361c[data-focus-visible] {
|
|
100
218
|
outline-color: highlight;
|
|
101
219
|
}
|
|
220
|
+
|
|
221
|
+
.sti-AppSwitcher-tile-3c344, .sti-AppSwitcher-grid-337c1 {
|
|
222
|
+
border: var(--sti-border-width) solid CanvasText;
|
|
223
|
+
}
|
|
102
224
|
}
|
|
103
225
|
|
|
104
226
|
@media (prefers-reduced-motion: reduce) {
|
|
105
|
-
.sti-AppSwitcher-app-
|
|
227
|
+
.sti-AppSwitcher-app-4fff1, .sti-AppSwitcher-moreIcon-8c7d2 {
|
|
106
228
|
transition: none;
|
|
107
229
|
}
|
|
108
230
|
}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { AvatarColor } from "../../components/Avatar/Avatar.js";
|
|
1
2
|
import { Placement } from "../../components/_internal/overlay/FloatingCard.js";
|
|
2
3
|
import "../../components/Popover/Popover.js";
|
|
3
4
|
import { ReactNode } from "react";
|
|
@@ -7,13 +8,25 @@ export interface AppSwitcherApp {
|
|
|
7
8
|
name: string;
|
|
8
9
|
/** Uygulamanın adresi. */
|
|
9
10
|
href: string;
|
|
10
|
-
/** Karodaki ikon (süs); yoksa
|
|
11
|
+
/** Karodaki ikon (süs); yoksa kısaltma yazılır ("STI Office" → "O", "STI ID" → "ID"). */
|
|
11
12
|
icon?: ReactNode;
|
|
13
|
+
/** Karonun rengi (ikonlu ve kısaltmalı karoda); verilmezse anahtardan kalıcı olarak seçilir (Avatar paleti). */
|
|
14
|
+
color?: AvatarColor;
|
|
12
15
|
/** Geçerli uygulama: işaretlenir ve ekran okuyucuya bildirilir. */
|
|
13
16
|
isCurrent?: boolean;
|
|
14
17
|
}
|
|
15
|
-
export interface
|
|
18
|
+
export interface AppSwitcherPanelProps {
|
|
16
19
|
apps: readonly AppSwitcherApp[];
|
|
20
|
+
/** Panelin başlığı; varsayılan "STI uygulamaları". */
|
|
21
|
+
title?: string;
|
|
22
|
+
/** Verilirse altta "Tüm uygulamalar" bağlantısı çıkar. */
|
|
23
|
+
moreHref?: string;
|
|
24
|
+
/** Bir bağlantı seçildiğinde çağrılır; açılır kutuda paneli kapatır. */
|
|
25
|
+
onAction?: () => void;
|
|
26
|
+
className?: string;
|
|
27
|
+
id?: string;
|
|
28
|
+
}
|
|
29
|
+
export interface AppSwitcherProps extends Omit<AppSwitcherPanelProps, "onAction" | "id"> {
|
|
17
30
|
/** Tetikleyicinin adı; varsayılan "STI uygulamaları". */
|
|
18
31
|
label?: string;
|
|
19
32
|
size?: "sm" | "md" | "lg";
|
|
@@ -21,11 +34,23 @@ export interface AppSwitcherProps {
|
|
|
21
34
|
isOpen?: boolean;
|
|
22
35
|
defaultOpen?: boolean;
|
|
23
36
|
onOpenChange?: (open: boolean) => void;
|
|
24
|
-
|
|
37
|
+
/** Tetikleyici düğmenin kimliği. */
|
|
25
38
|
id?: string;
|
|
26
39
|
}
|
|
27
40
|
/**
|
|
28
|
-
*
|
|
29
|
-
*
|
|
41
|
+
* Karodaki kısaltma: "STI" ön eki atılır; kalan ad en çok üç harfse olduğu gibi ("ID"), değilse
|
|
42
|
+
* ilk harf ("Office" → "O").
|
|
43
|
+
*/
|
|
44
|
+
export declare function appMonogram(name: string): string;
|
|
45
|
+
/**
|
|
46
|
+
* Uygulama ızgarası: başlık, uygulama karoları (ikon ya da kısaltma, ad) ve isteğe bağlı "Tüm
|
|
47
|
+
* uygulamalar" bağlantısı. `AppSwitcher` bunu açılır kutuda çizer; uygulama bir sayfada ya da dar
|
|
48
|
+
* ekran çekmecesinde doğrudan kullanabilir.
|
|
49
|
+
*/
|
|
50
|
+
export declare function AppSwitcherPanel({ apps, title, moreHref, onAction, className, id }: AppSwitcherPanelProps): import("react").JSX.Element;
|
|
51
|
+
/**
|
|
52
|
+
* Uygulama değiştirici: ızgara düğmesi ve hesabın erişebildiği STI uygulamalarının paneli
|
|
53
|
+
* (`AppSwitcherPanel`). Açılır kutu (APG Dialog); içeride bağlantılar Tab ile ve ok tuşlarıyla
|
|
54
|
+
* gezilir.
|
|
30
55
|
*/
|
|
31
|
-
export declare function AppSwitcher({
|
|
56
|
+
export declare function AppSwitcher({ label, size, placement, isOpen, defaultOpen, onOpenChange, className, id, ...panel }: AppSwitcherProps): import("react").JSX.Element;
|
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
import { useMessages } from "../../provider/UIProvider.js";
|
|
3
3
|
import { IconButton } from "../../components/IconButton/IconButton.js";
|
|
4
4
|
import { VisuallyHidden } from "../../components/VisuallyHidden/VisuallyHidden.js";
|
|
5
|
+
import { ArrowRightIcon } from "../../icons/generated/ArrowRightIcon.js";
|
|
6
|
+
import { avatarColorOf } from "../../components/Avatar/Avatar.js";
|
|
5
7
|
import { Popover as Popover$1 } from "../../components/Popover/Popover.js";
|
|
6
8
|
import { AppsIcon } from "../../icons/generated/AppsIcon.js";
|
|
7
9
|
import AppSwitcher_module_default from "./AppSwitcher.module.js";
|
|
@@ -24,16 +26,94 @@ function onGridKeyDown(event) {
|
|
|
24
26
|
else if (event.key === "End") next = links.length - 1;
|
|
25
27
|
else if (ARROWS[event.key]) {
|
|
26
28
|
const cols = Math.max(1, getComputedStyle(event.currentTarget).gridTemplateColumns.split(" ").length);
|
|
27
|
-
|
|
29
|
+
const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
|
|
30
|
+
const step = ARROWS[event.key]?.(cols) ?? 0;
|
|
31
|
+
const horizontal = event.key === "ArrowLeft" || event.key === "ArrowRight";
|
|
32
|
+
next = Math.min(links.length - 1, Math.max(0, index + (rtl && horizontal ? -step : step)));
|
|
28
33
|
} else return;
|
|
29
34
|
event.preventDefault();
|
|
30
35
|
links[next]?.focus();
|
|
31
36
|
}
|
|
32
37
|
/**
|
|
33
|
-
*
|
|
34
|
-
*
|
|
38
|
+
* Karodaki kısaltma: "STI" ön eki atılır; kalan ad en çok üç harfse olduğu gibi ("ID"), değilse
|
|
39
|
+
* ilk harf ("Office" → "O").
|
|
35
40
|
*/
|
|
36
|
-
function
|
|
41
|
+
function appMonogram(name) {
|
|
42
|
+
const rest = name.trim().replace(/^sti\s+/i, "").trim() || name.trim();
|
|
43
|
+
const letters = Array.from(rest);
|
|
44
|
+
if (letters.length <= 3 && !/\s/.test(rest)) return rest.toLocaleUpperCase("tr-TR");
|
|
45
|
+
return (letters[0] ?? "").toLocaleUpperCase("tr-TR");
|
|
46
|
+
}
|
|
47
|
+
/**
|
|
48
|
+
* Uygulama ızgarası: başlık, uygulama karoları (ikon ya da kısaltma, ad) ve isteğe bağlı "Tüm
|
|
49
|
+
* uygulamalar" bağlantısı. `AppSwitcher` bunu açılır kutuda çizer; uygulama bir sayfada ya da dar
|
|
50
|
+
* ekran çekmecesinde doğrudan kullanabilir.
|
|
51
|
+
*/
|
|
52
|
+
function AppSwitcherPanel({ apps, title, moreHref, onAction, className, id }) {
|
|
53
|
+
const t = useMessages();
|
|
54
|
+
const heading = title ?? t.idAppSwitcher;
|
|
55
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
56
|
+
id,
|
|
57
|
+
className: [AppSwitcher_module_default.panel, className].filter(Boolean).join(" "),
|
|
58
|
+
children: [
|
|
59
|
+
/* @__PURE__ */ jsx("p", {
|
|
60
|
+
className: AppSwitcher_module_default.title,
|
|
61
|
+
children: heading
|
|
62
|
+
}),
|
|
63
|
+
apps.length === 0 ? /* @__PURE__ */ jsx("p", {
|
|
64
|
+
className: AppSwitcher_module_default.empty,
|
|
65
|
+
children: t.idAppSwitcherEmpty
|
|
66
|
+
}) : /* @__PURE__ */ jsx("ul", {
|
|
67
|
+
className: AppSwitcher_module_default.grid,
|
|
68
|
+
"aria-label": heading,
|
|
69
|
+
onKeyDown: onGridKeyDown,
|
|
70
|
+
children: apps.map((app) => /* @__PURE__ */ jsx("li", {
|
|
71
|
+
className: AppSwitcher_module_default.cell,
|
|
72
|
+
children: /* @__PURE__ */ jsxs(Link, {
|
|
73
|
+
className: AppSwitcher_module_default.app,
|
|
74
|
+
href: app.href,
|
|
75
|
+
"data-current": app.isCurrent ? "" : void 0,
|
|
76
|
+
"aria-current": app.isCurrent ? "true" : void 0,
|
|
77
|
+
onPress: onAction,
|
|
78
|
+
children: [
|
|
79
|
+
/* @__PURE__ */ jsx("span", {
|
|
80
|
+
className: AppSwitcher_module_default.tile,
|
|
81
|
+
"data-color": app.color ?? avatarColorOf(app.id),
|
|
82
|
+
"data-icon": app.icon ? "" : void 0,
|
|
83
|
+
"aria-hidden": "true",
|
|
84
|
+
children: app.icon ?? appMonogram(app.name)
|
|
85
|
+
}),
|
|
86
|
+
/* @__PURE__ */ jsx("span", {
|
|
87
|
+
className: AppSwitcher_module_default.name,
|
|
88
|
+
children: app.name
|
|
89
|
+
}),
|
|
90
|
+
app.isCurrent ? /* @__PURE__ */ jsxs(VisuallyHidden, { children: [
|
|
91
|
+
" (",
|
|
92
|
+
t.idAppSwitcherCurrent,
|
|
93
|
+
")"
|
|
94
|
+
] }) : null
|
|
95
|
+
]
|
|
96
|
+
})
|
|
97
|
+
}, app.id))
|
|
98
|
+
}),
|
|
99
|
+
moreHref ? /* @__PURE__ */ jsxs(Link, {
|
|
100
|
+
href: moreHref,
|
|
101
|
+
className: AppSwitcher_module_default.more,
|
|
102
|
+
onPress: onAction,
|
|
103
|
+
children: [t.idAppSwitcherMore, /* @__PURE__ */ jsx(ArrowRightIcon, {
|
|
104
|
+
className: AppSwitcher_module_default.moreIcon,
|
|
105
|
+
"aria-hidden": "true"
|
|
106
|
+
})]
|
|
107
|
+
}) : null
|
|
108
|
+
]
|
|
109
|
+
});
|
|
110
|
+
}
|
|
111
|
+
/**
|
|
112
|
+
* Uygulama değiştirici: ızgara düğmesi ve hesabın erişebildiği STI uygulamalarının paneli
|
|
113
|
+
* (`AppSwitcherPanel`). Açılır kutu (APG Dialog); içeride bağlantılar Tab ile ve ok tuşlarıyla
|
|
114
|
+
* gezilir.
|
|
115
|
+
*/
|
|
116
|
+
function AppSwitcher({ label, size = "md", placement = "bottom end", isOpen, defaultOpen, onOpenChange, className, id, ...panel }) {
|
|
37
117
|
const t = useMessages();
|
|
38
118
|
const name = label ?? t.idAppSwitcher;
|
|
39
119
|
return /* @__PURE__ */ jsx(Popover$1, {
|
|
@@ -43,46 +123,19 @@ function AppSwitcher({ apps, label, size = "md", placement = "bottom end", isOpe
|
|
|
43
123
|
placement,
|
|
44
124
|
"aria-label": name,
|
|
45
125
|
size: "md",
|
|
126
|
+
className: AppSwitcher_module_default.card,
|
|
46
127
|
trigger: /* @__PURE__ */ jsx(IconButton, {
|
|
47
128
|
id,
|
|
48
|
-
className,
|
|
129
|
+
className: [AppSwitcher_module_default.trigger, className].filter(Boolean).join(" "),
|
|
49
130
|
label: name,
|
|
50
131
|
icon: /* @__PURE__ */ jsx(AppsIcon, {}),
|
|
51
132
|
variant: "ghost",
|
|
52
133
|
size
|
|
53
134
|
}),
|
|
54
|
-
children:
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
}) : /* @__PURE__ */ jsx("ul", {
|
|
58
|
-
className: AppSwitcher_module_default.grid,
|
|
59
|
-
onKeyDown: onGridKeyDown,
|
|
60
|
-
children: apps.map((app) => /* @__PURE__ */ jsx("li", {
|
|
61
|
-
className: AppSwitcher_module_default.cell,
|
|
62
|
-
children: /* @__PURE__ */ jsxs(Link, {
|
|
63
|
-
className: AppSwitcher_module_default.app,
|
|
64
|
-
href: app.href,
|
|
65
|
-
"data-current": app.isCurrent ? "" : void 0,
|
|
66
|
-
"aria-current": app.isCurrent ? "true" : void 0,
|
|
67
|
-
children: [
|
|
68
|
-
/* @__PURE__ */ jsx("span", {
|
|
69
|
-
className: AppSwitcher_module_default.tile,
|
|
70
|
-
"aria-hidden": "true",
|
|
71
|
-
children: app.icon ?? Array.from(app.name.trim())[0]?.toLocaleUpperCase("tr-TR")
|
|
72
|
-
}),
|
|
73
|
-
/* @__PURE__ */ jsx("span", {
|
|
74
|
-
className: AppSwitcher_module_default.name,
|
|
75
|
-
children: app.name
|
|
76
|
-
}),
|
|
77
|
-
app.isCurrent ? /* @__PURE__ */ jsxs(VisuallyHidden, { children: [
|
|
78
|
-
" (",
|
|
79
|
-
t.idAppSwitcherCurrent,
|
|
80
|
-
")"
|
|
81
|
-
] }) : null
|
|
82
|
-
]
|
|
83
|
-
})
|
|
84
|
-
}, app.id))
|
|
135
|
+
children: (close) => /* @__PURE__ */ jsx(AppSwitcherPanel, {
|
|
136
|
+
...panel,
|
|
137
|
+
onAction: close
|
|
85
138
|
})
|
|
86
139
|
});
|
|
87
140
|
}
|
|
88
|
-
export { AppSwitcher };
|
|
141
|
+
export { AppSwitcher, AppSwitcherPanel, appMonogram };
|
|
@@ -1,11 +1,17 @@
|
|
|
1
1
|
import './AppSwitcher.css';
|
|
2
2
|
// src/id/AppSwitcher/AppSwitcher.module.css
|
|
3
3
|
var AppSwitcher_module_default = {
|
|
4
|
-
"
|
|
5
|
-
"
|
|
6
|
-
"
|
|
7
|
-
"
|
|
8
|
-
"
|
|
9
|
-
"
|
|
4
|
+
"trigger": "sti-AppSwitcher-trigger-4e70a",
|
|
5
|
+
"card": "sti-AppSwitcher-card-225e3",
|
|
6
|
+
"panel": "sti-AppSwitcher-panel-a6602",
|
|
7
|
+
"title": "sti-AppSwitcher-title-6d2e0",
|
|
8
|
+
"grid": "sti-AppSwitcher-grid-337c1",
|
|
9
|
+
"cell": "sti-AppSwitcher-cell-8b890",
|
|
10
|
+
"app": "sti-AppSwitcher-app-4fff1",
|
|
11
|
+
"tile": "sti-AppSwitcher-tile-3c344",
|
|
12
|
+
"name": "sti-AppSwitcher-name-d8837",
|
|
13
|
+
"empty": "sti-AppSwitcher-empty-21386",
|
|
14
|
+
"more": "sti-AppSwitcher-more-0361c",
|
|
15
|
+
"moreIcon": "sti-AppSwitcher-moreIcon-8c7d2"
|
|
10
16
|
};
|
|
11
17
|
export { AppSwitcher_module_default as default };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { AppSwitcher, AppSwitcherApp, AppSwitcherProps } from "./AppSwitcher.js";
|
|
2
|
-
export { AppSwitcher, AppSwitcherApp, AppSwitcherProps };
|
|
1
|
+
import { AppSwitcher, AppSwitcherApp, AppSwitcherPanel, AppSwitcherPanelProps, AppSwitcherProps, appMonogram } from "./AppSwitcher.js";
|
|
2
|
+
export { AppSwitcher, AppSwitcherApp, AppSwitcherPanel, AppSwitcherPanelProps, AppSwitcherProps, appMonogram };
|