@saasicat/ui-vue 0.19.0 → 0.21.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.
Files changed (66) hide show
  1. package/dist/{catalog-JXdKdIqG.d.cts → catalog-BY_t9prv.d.cts} +1 -0
  2. package/dist/{catalog-JXdKdIqG.d.ts → catalog-BY_t9prv.d.ts} +1 -0
  3. package/dist/{chunk-RVG6LQHL.js → chunk-7IFKVGZV.js} +1 -1
  4. package/dist/{chunk-DPTIOQXX.js → chunk-JN6HZGLV.js} +2 -0
  5. package/dist/{chunk-ORX3ZG47.js → chunk-OTP3OSSW.js} +1 -1
  6. package/dist/client/index.cjs +2 -0
  7. package/dist/client/index.d.cts +2 -2
  8. package/dist/client/index.d.ts +2 -2
  9. package/dist/client/index.js +2 -2
  10. package/dist/index.cjs +2 -0
  11. package/dist/index.d.cts +4 -4
  12. package/dist/index.d.ts +4 -4
  13. package/dist/index.js +3 -3
  14. package/dist/quasar/index.cjs +2 -0
  15. package/dist/quasar/index.d.cts +2 -2
  16. package/dist/quasar/index.d.ts +2 -2
  17. package/dist/quasar/index.js +2 -2
  18. package/dist/{use-super-admin-i18n-1nCOkvgi.d.cts → use-super-admin-i18n-DlJRGIVq.d.cts} +1 -1
  19. package/dist/{use-super-admin-i18n-BlqcD0N7.d.ts → use-super-admin-i18n-c_Eqsu9u.d.ts} +1 -1
  20. package/package.json +2 -2
  21. package/src/client/i18n/messages/common.ts +2 -0
  22. package/src/components/admin-page/AdminBody.vue +40 -0
  23. package/src/components/admin-page/AdminHero.vue +32 -0
  24. package/src/components/admin-page/AdminPage.vue +16 -0
  25. package/src/components/admin-page/AdminSection.vue +38 -0
  26. package/src/components/plan-cockpit/PlanCockpit.vue +15 -0
  27. package/src/components/plan-cockpit/PlanCockpitAuditLog.vue +8 -8
  28. package/src/components/plan-cockpit/PlanCockpitDiffPanel.vue +10 -11
  29. package/src/components/plan-cockpit/PlanCockpitImpactPanel.vue +8 -8
  30. package/src/components/plan-cockpit/PlanCockpitVersions.vue +9 -11
  31. package/src/components/plan-detail/PlanAuditLog.vue +7 -8
  32. package/src/components/plan-detail/PlanDetail.vue +14 -1
  33. package/src/components/plan-detail/PlanVersionDiffPanel.vue +5 -8
  34. package/src/components/plan-detail/PlanVersionsPanel.vue +9 -11
  35. package/src/components/plan-list/PlanList.vue +224 -257
  36. package/src/pages-standard/AdminLayout.vue +4 -2
  37. package/src/pages-standard/AuditPage.vue +18 -43
  38. package/src/pages-standard/BundlesPage.vue +17 -34
  39. package/src/pages-standard/DashboardPage.vue +20 -51
  40. package/src/pages-standard/DiscoveryPage.vue +38 -51
  41. package/src/pages-standard/EmailHistoryPage.vue +20 -71
  42. package/src/pages-standard/MarketingCatalogPage.vue +304 -315
  43. package/src/pages-standard/PilotsPage.vue +24 -56
  44. package/src/pages-standard/PlansPage.vue +25 -22
  45. package/src/pages-standard/PlatformEmailPage.vue +19 -51
  46. package/src/pages-standard/PromoCodeDetailPage.vue +39 -50
  47. package/src/pages-standard/PromoCodesPage.vue +8 -15
  48. package/src/pages-standard/SubscriptionsPage.vue +9 -35
  49. package/src/pages-standard/SuperAdminSetupWizard.vue +2 -1
  50. package/src/pages-standard/TenantDetailPage.vue +79 -174
  51. package/src/pages-standard/TenantsPage.vue +8 -33
  52. package/src/pages-standard/UsersPage.vue +21 -54
  53. package/src/pages-standard/bundles-page/BundlesToolbar.vue +67 -0
  54. package/src/pages-standard/marketing-catalog/MarketingCatalogAdmin.vue +111 -73
  55. package/src/pages-standard/marketing-catalog/MarketingCatalogHeader.vue +54 -62
  56. package/src/pages-standard/marketing-catalog/MarketingCatalogPreview.vue +53 -35
  57. package/src/pages-standard/marketing-catalog/MarketingCatalogToolbar.vue +7 -7
  58. package/src/pages-standard/plans-page/PlansPageToast.vue +5 -5
  59. package/src/pages-standard/sa-theme.css +85 -29
  60. package/src/pages-standard/tenant-detail/TenantMasterData.vue +28 -0
  61. package/src/pages-standard/tenant-detail/TenantUsage.vue +31 -0
  62. package/src/pages-standard/tenant-detail/TenantUsers.vue +21 -0
  63. package/src/pages-standard/tenant-detail/types.ts +38 -0
  64. package/src/vue/use-mfa-prompt.ts +72 -0
  65. package/src/pages-standard/bundles-page/BundlesHeader.vue +0 -68
  66. package/src/pages-standard/discovery-page/DiscoveryHeader.vue +0 -34
package/src/pages-standard/marketing-catalog/MarketingCatalogAdmin.vue CHANGED
@@ -1,14 +1,14 @@
1
1
  <template>
2
- <div class="mc-admin">
3
- <div class="mc-admin-head">
2
+ <div class="sa-marketing-admin">
3
+ <div class="sa-marketing-admin-head">
4
4
  <div style="flex: 1">
5
- <div class="mc-admin-title">{{ msg.tabs.admin }}</div>
6
- <div class="mc-admin-sub">{{ msg.admin.subtitle }}</div>
5
+ <div class="sa-marketing-admin-title">{{ msg.tabs.admin }}</div>
6
+ <div class="sa-marketing-admin-sub">{{ msg.admin.subtitle }}</div>
7
7
  </div>
8
8
  </div>
9
9
 
10
- <div class="mc-admin-grid">
11
- <div class="mc-admin-thead">
10
+ <div class="sa-marketing-admin-grid">
11
+ <div class="sa-marketing-admin-thead">
12
12
  <div>{{ msg.admin.colPlan }}</div>
13
13
  <div>{{ msg.admin.colVisible }}</div>
14
14
  <div>{{ msg.admin.colBadge }}</div>
@@ -18,11 +18,14 @@
18
18
  </div>
19
19
 
20
20
  <template v-for="row in adminRows" :key="row.plan.id">
21
- <div class="mc-admin-row" :class="{ 'mc-admin-row--disabled': !row.liveVersion }">
21
+ <div
22
+ class="sa-marketing-admin-row"
23
+ :class="{ 'sa-marketing-admin-row--disabled': !row.liveVersion }"
24
+ >
22
25
  <div>
23
- <div class="mc-plan-cell">
26
+ <div class="sa-marketing-plan-cell">
24
27
  <div
25
- class="mc-plan-mark"
28
+ class="sa-marketing-plan-mark"
26
29
  :style="{
27
30
  background: row.accent + '15',
28
31
  color: row.accent,
@@ -32,15 +35,15 @@
32
35
  {{ row.plan.planKey.slice(0, 3) }}
33
36
  </div>
34
37
  <div>
35
- <div class="mc-plan-label">
38
+ <div class="sa-marketing-plan-label">
36
39
  {{ row.m.displayLabel || row.plan.label }}
37
40
  </div>
38
- <div class="mc-plan-key">{{ row.plan.planKey }}</div>
41
+ <div class="sa-marketing-plan-key">{{ row.plan.planKey }}</div>
39
42
  </div>
40
43
  </div>
41
44
  <div
42
45
  v-if="row.publishedVersions.length > 1"
43
- class="mc-version-tabs"
46
+ class="sa-marketing-version-tabs"
44
47
  role="tablist"
45
48
  :aria-label="
46
49
  formatMessage(msg.admin.versionTabsLabel, { plan: row.plan.label })
@@ -51,8 +54,11 @@
51
54
  :key="v.id"
52
55
  type="button"
53
56
  role="tab"
54
- class="mc-version-tab"
55
- :class="{ 'mc-version-tab--active': row.liveVersion?.id === v.id }"
57
+ class="sa-marketing-version-tab"
58
+ :class="{
59
+ 'sa-marketing-version-tab--active':
60
+ row.liveVersion?.id === v.id,
61
+ }"
56
62
  :title="formatVersionTitle(v)"
57
63
  @click="$emit('select-version', row.plan, v.id)"
58
64
  >
@@ -61,7 +67,7 @@
61
67
  </div>
62
68
  </div>
63
69
  <div>
64
- <label class="mc-toggle" :class="{ disabled: !row.liveVersion }">
70
+ <label class="sa-marketing-toggle" :class="{ disabled: !row.liveVersion }">
65
71
  <input
66
72
  type="checkbox"
67
73
  :checked="row.m.visible"
@@ -73,7 +79,7 @@
73
79
  </div>
74
80
  <div>
75
81
  <input
76
- class="mc-field"
82
+ class="sa-marketing-field"
77
83
  style="max-width: 120px"
78
84
  placeholder="—"
79
85
  :value="row.m.badge"
@@ -86,7 +92,7 @@
86
92
  type="number"
87
93
  min="0"
88
94
  max="9999"
89
- class="mc-field"
95
+ class="sa-marketing-field"
90
96
  style="max-width: 72px"
91
97
  :value="row.m.priority"
92
98
  :disabled="!row.liveVersion || busy"
@@ -94,7 +100,7 @@
94
100
  />
95
101
  </div>
96
102
  <div>
97
- <label class="mc-toggle" :class="{ disabled: !row.liveVersion }">
103
+ <label class="sa-marketing-toggle" :class="{ disabled: !row.liveVersion }">
98
104
  <input
99
105
  type="checkbox"
100
106
  :checked="row.m.highlight"
@@ -104,21 +110,32 @@
104
110
  <span />
105
111
  </label>
106
112
  </div>
107
- <div class="mc-admin-row-end">
108
- <span v-if="!row.liveVersion" class="mc-chip mc-chip--muted">
113
+ <div class="sa-marketing-admin-row-end">
114
+ <span
115
+ v-if="!row.liveVersion"
116
+ class="sa-marketing-chip sa-marketing-chip--muted"
117
+ >
109
118
  {{ msg.admin.noLiveVersion }}
110
119
  </span>
111
- <span v-else-if="!row.m.visible" class="mc-chip mc-chip--muted">
120
+ <span
121
+ v-else-if="!row.m.visible"
122
+ class="sa-marketing-chip sa-marketing-chip--muted"
123
+ >
112
124
  {{ msg.admin.hidden }}
113
125
  </span>
114
- <span v-else-if="row.m.highlight" class="mc-chip mc-chip--featured">
126
+ <span
127
+ v-else-if="row.m.highlight"
128
+ class="sa-marketing-chip sa-marketing-chip--featured"
129
+ >
115
130
  {{ msg.admin.featured }}
116
131
  </span>
117
- <span v-else class="mc-chip mc-chip--live">{{ msg.admin.live }}</span>
132
+ <span v-else class="sa-marketing-chip sa-marketing-chip--live">{{
133
+ msg.admin.live
134
+ }}</span>
118
135
  <button
119
136
  v-if="row.liveVersion"
120
137
  type="button"
121
- class="mc-expand-btn"
138
+ class="sa-marketing-expand-btn"
122
139
  :title="
123
140
  expandedKey === row.plan.planKey
124
141
  ? common.close
@@ -127,7 +144,7 @@
127
144
  @click="$emit('toggle-expand', row)"
128
145
  >
129
146
  <span
130
- class="mc-chev"
147
+ class="sa-marketing-chev"
131
148
  :class="{ open: expandedKey === row.plan.planKey }"
132
149
  >
133
150
  <svg
@@ -145,17 +162,17 @@
145
162
  </div>
146
163
  </div>
147
164
 
148
- <div v-if="expandedKey === row.plan.planKey" class="mc-admin-expand">
149
- <div class="mc-expand-grid">
150
- <div class="mc-expand-col">
151
- <div class="mc-expand-sec">
152
- <div class="mc-field-head">
153
- <label class="mc-expand-label">
165
+ <div v-if="expandedKey === row.plan.planKey" class="sa-marketing-admin-expand">
166
+ <div class="sa-marketing-expand-grid">
167
+ <div class="sa-marketing-expand-col">
168
+ <div class="sa-marketing-expand-sec">
169
+ <div class="sa-marketing-field-head">
170
+ <label class="sa-marketing-expand-label">
154
171
  {{ msg.admin.planNameLabel }}
155
172
  </label>
156
173
  <span
157
174
  v-if="activeLocale !== defaultLocale"
158
- class="mc-source-hint"
175
+ class="sa-marketing-source-hint"
159
176
  >
160
177
  {{ defaultLocale.toUpperCase() }}:
161
178
  <em>
@@ -167,15 +184,18 @@
167
184
  </em>
168
185
  </span>
169
186
  </div>
170
- <div v-if="activeLocale === defaultLocale" class="mc-locked-value">
187
+ <div
188
+ v-if="activeLocale === defaultLocale"
189
+ class="sa-marketing-locked-value"
190
+ >
171
191
  <span>{{ row.plan.label }}</span>
172
- <span class="mc-locked-hint">
192
+ <span class="sa-marketing-locked-hint">
173
193
  {{ msg.admin.planNameLocked }}
174
194
  </span>
175
195
  </div>
176
196
  <input
177
197
  v-else
178
- class="mc-field"
198
+ class="sa-marketing-field"
179
199
  :placeholder="row.plan.label"
180
200
  :value="row.m.displayLabel"
181
201
  :disabled="busy"
@@ -183,7 +203,7 @@
183
203
  />
184
204
  <div
185
205
  v-if="activeLocale !== defaultLocale && !row.m.displayLabel"
186
- class="mc-expand-hint"
206
+ class="sa-marketing-expand-hint"
187
207
  >
188
208
  {{
189
209
  formatMessage(msg.admin.planNameFallbackHint, {
@@ -193,10 +213,12 @@
193
213
  </div>
194
214
  </div>
195
215
 
196
- <div class="mc-expand-sec">
197
- <label class="mc-expand-label">{{ msg.admin.teaserLabel }}</label>
216
+ <div class="sa-marketing-expand-sec">
217
+ <label class="sa-marketing-expand-label">{{
218
+ msg.admin.teaserLabel
219
+ }}</label>
198
220
  <textarea
199
- class="mc-field mc-field--area"
221
+ class="sa-marketing-field sa-marketing-field--area"
200
222
  rows="2"
201
223
  :placeholder="msg.admin.teaserPlaceholder"
202
224
  :value="row.m.description"
@@ -205,13 +227,17 @@
205
227
  $emit('patch', row, { description: textValue($event) })
206
228
  "
207
229
  />
208
- <div class="mc-expand-hint">{{ msg.admin.teaserHint }}</div>
230
+ <div class="sa-marketing-expand-hint">
231
+ {{ msg.admin.teaserHint }}
232
+ </div>
209
233
  </div>
210
234
 
211
- <div class="mc-expand-sec">
212
- <label class="mc-expand-label">{{ msg.admin.trialLabel }}</label>
213
- <div class="mc-trial-row">
214
- <label class="mc-toggle">
235
+ <div class="sa-marketing-expand-sec">
236
+ <label class="sa-marketing-expand-label">{{
237
+ msg.admin.trialLabel
238
+ }}</label>
239
+ <div class="sa-marketing-trial-row">
240
+ <label class="sa-marketing-toggle">
215
241
  <input
216
242
  type="checkbox"
217
243
  :checked="row.m.trialEnabled"
@@ -224,19 +250,19 @@
224
250
  />
225
251
  <span />
226
252
  </label>
227
- <span class="mc-trial-label">
253
+ <span class="sa-marketing-trial-label">
228
254
  {{
229
255
  row.m.trialEnabled
230
256
  ? msg.admin.trialOn
231
257
  : msg.admin.trialOff
232
258
  }}
233
259
  </span>
234
- <span class="mc-trial-days">
260
+ <span class="sa-marketing-trial-days">
235
261
  <input
236
262
  type="number"
237
263
  min="1"
238
264
  max="365"
239
- class="mc-field"
265
+ class="sa-marketing-field"
240
266
  style="max-width: 72px"
241
267
  :value="row.m.trialDays"
242
268
  :disabled="!row.m.trialEnabled || busy"
@@ -246,20 +272,20 @@
246
272
  })
247
273
  "
248
274
  />
249
- <span class="mc-trial-unit">
275
+ <span class="sa-marketing-trial-unit">
250
276
  {{ msg.admin.trialDaysUnit }}
251
277
  </span>
252
278
  </span>
253
279
  </div>
254
- <div class="mc-expand-hint">{{ trialCtaHint(row) }}</div>
280
+ <div class="sa-marketing-expand-hint">{{ trialCtaHint(row) }}</div>
255
281
  </div>
256
282
 
257
- <div class="mc-expand-sec">
258
- <label class="mc-expand-label">
283
+ <div class="sa-marketing-expand-sec">
284
+ <label class="sa-marketing-expand-label">
259
285
  {{ msg.admin.ctaOverrideLabel }}
260
286
  </label>
261
287
  <input
262
- class="mc-field"
288
+ class="sa-marketing-field"
263
289
  :placeholder="autoCtaText(row)"
264
290
  :value="row.m.ctaLabel ?? ''"
265
291
  :disabled="busy"
@@ -269,17 +295,22 @@
269
295
  })
270
296
  "
271
297
  />
272
- <div class="mc-expand-hint">{{ msg.admin.ctaOverrideHint }}</div>
298
+ <div class="sa-marketing-expand-hint">
299
+ {{ msg.admin.ctaOverrideHint }}
300
+ </div>
273
301
  </div>
274
302
  </div>
275
303
 
276
- <div class="mc-expand-col">
277
- <div class="mc-expand-sec">
278
- <div class="mc-tf-head">
279
- <label class="mc-expand-label" style="margin: 0">
304
+ <div class="sa-marketing-expand-col">
305
+ <div class="sa-marketing-expand-sec">
306
+ <div class="sa-marketing-tf-head">
307
+ <label class="sa-marketing-expand-label" style="margin: 0">
280
308
  {{ msg.topFeatures }}
281
309
  </label>
282
- <span class="mc-expand-hint" style="margin-left: auto">
310
+ <span
311
+ class="sa-marketing-expand-hint"
312
+ style="margin-left: auto"
313
+ >
283
314
  {{
284
315
  formatMessage(msg.admin.topFeatureCount, {
285
316
  count: editFeatures.length,
@@ -288,11 +319,15 @@
288
319
  </span>
289
320
  </div>
290
321
 
291
- <div class="mc-tf-list">
292
- <div v-for="(f, i) in editFeatures" :key="i" class="mc-tf-row">
293
- <span class="mc-tf-num">{{ i + 1 }}</span>
322
+ <div class="sa-marketing-tf-list">
323
+ <div
324
+ v-for="(f, i) in editFeatures"
325
+ :key="i"
326
+ class="sa-marketing-tf-row"
327
+ >
328
+ <span class="sa-marketing-tf-num">{{ i + 1 }}</span>
294
329
  <input
295
- class="mc-field mc-tf-label"
330
+ class="sa-marketing-field sa-marketing-tf-label"
296
331
  :placeholder="
297
332
  f.key
298
333
  ? resolveComponentLabel(f.key)
@@ -306,7 +341,7 @@
306
341
  @change="$emit('persist-features', row)"
307
342
  />
308
343
  <input
309
- class="mc-field mc-tf-strong"
344
+ class="sa-marketing-field sa-marketing-tf-strong"
310
345
  :placeholder="msg.admin.featureStrongPlaceholder"
311
346
  :value="f.strong"
312
347
  :disabled="busy"
@@ -315,10 +350,10 @@
315
350
  "
316
351
  @change="$emit('persist-features', row)"
317
352
  />
318
- <div class="mc-tf-actions">
353
+ <div class="sa-marketing-tf-actions">
319
354
  <button
320
355
  type="button"
321
- class="mc-iconbtn"
356
+ class="sa-marketing-iconbtn"
322
357
  :title="msg.admin.moveUp"
323
358
  :disabled="i === 0 || busy"
324
359
  @click="$emit('move-feature', row, i, -1)"
@@ -327,7 +362,7 @@
327
362
  </button>
328
363
  <button
329
364
  type="button"
330
- class="mc-iconbtn"
365
+ class="sa-marketing-iconbtn"
331
366
  :title="msg.admin.moveDown"
332
367
  :disabled="i === editFeatures.length - 1 || busy"
333
368
  @click="$emit('move-feature', row, i, 1)"
@@ -336,7 +371,7 @@
336
371
  </button>
337
372
  <button
338
373
  type="button"
339
- class="mc-iconbtn mc-iconbtn--danger"
374
+ class="sa-marketing-iconbtn sa-marketing-iconbtn--danger"
340
375
  :title="common.remove"
341
376
  :disabled="busy"
342
377
  @click="$emit('remove-feature', row, i)"
@@ -354,15 +389,18 @@
354
389
  </button>
355
390
  </div>
356
391
  </div>
357
- <div v-if="editFeatures.length === 0" class="mc-tf-empty">
392
+ <div
393
+ v-if="editFeatures.length === 0"
394
+ class="sa-marketing-tf-empty"
395
+ >
358
396
  {{ msg.admin.topFeaturesEmpty }}
359
397
  </div>
360
398
  </div>
361
399
 
362
- <div class="mc-tf-add">
400
+ <div class="sa-marketing-tf-add">
363
401
  <button
364
402
  type="button"
365
- class="mc-btn mc-btn--sm"
403
+ class="sa-marketing-btn sa-marketing-btn--sm"
366
404
  :disabled="busy"
367
405
  @click="$emit('add-feature', row)"
368
406
  >
@@ -380,16 +418,16 @@
380
418
  </button>
381
419
  <div
382
420
  v-if="suggestionsFor(row).length > 0"
383
- class="mc-tf-suggestions"
421
+ class="sa-marketing-tf-suggestions"
384
422
  >
385
- <span class="mc-expand-hint">
423
+ <span class="sa-marketing-expand-hint">
386
424
  {{ msg.admin.suggestionsLabel }}
387
425
  </span>
388
426
  <button
389
427
  v-for="(s, i) in suggestionsFor(row)"
390
428
  :key="i"
391
429
  type="button"
392
- class="mc-tf-chip"
430
+ class="sa-marketing-tf-chip"
393
431
  :disabled="busy"
394
432
  :title="
395
433
  formatMessage(msg.admin.addSuggestionTitle, {
package/src/pages-standard/marketing-catalog/MarketingCatalogHeader.vue CHANGED
@@ -1,74 +1,66 @@
1
1
  <template>
2
- <div class="mc-page-head">
3
- <div>
4
- <h2 class="mc-h-title">{{ msg.header.title }}</h2>
5
- <p class="mc-h-sub">{{ msg.header.subtitle }}</p>
6
- </div>
7
- <div class="mc-head-actions">
8
- <div class="mc-locale-mgr">
9
- <span class="mc-locale-mgr-label">{{ msg.header.localesLabel }}</span>
10
- <span
11
- v-for="loc in activeLocaleSet"
12
- :key="loc"
13
- class="mc-locale-pill"
14
- :class="{ active: loc === activeLocale }"
2
+ <div class="sa-marketing-head-actions">
3
+ <div class="sa-marketing-locale-mgr">
4
+ <span class="sa-marketing-locale-mgr-label">{{ msg.header.localesLabel }}</span>
5
+ <span
6
+ v-for="loc in activeLocaleSet"
7
+ :key="loc"
8
+ class="sa-marketing-locale-pill"
9
+ :class="{ active: loc === activeLocale }"
10
+ >
11
+ <button
12
+ type="button"
13
+ class="sa-marketing-locale-pill-btn"
14
+ @click="$emit('localeChange', loc)"
15
15
  >
16
+ {{ loc.toUpperCase() }}
17
+ <span v-if="loc === defaultLocale" :title="msg.header.defaultLocale">★</span>
18
+ </button>
19
+ <button
20
+ v-if="loc !== defaultLocale"
21
+ type="button"
22
+ class="sa-marketing-locale-x"
23
+ :title="msg.header.deactivateLocale"
24
+ @click="$emit('removeLocale', loc)"
25
+ >
26
+ ×
27
+ </button>
28
+ </span>
29
+ <div class="sa-marketing-locale-add-wrap">
30
+ <button
31
+ type="button"
32
+ class="sa-marketing-locale-add"
33
+ :disabled="addableLocales.length === 0"
34
+ @click="$emit('update:localePickerOpen', !localePickerOpen)"
35
+ >
36
+ {{ msg.header.addLocale }}
37
+ </button>
38
+ <div v-if="localePickerOpen" class="sa-marketing-locale-picker">
16
39
  <button
40
+ v-for="l in addableLocales"
41
+ :key="l"
17
42
  type="button"
18
- class="mc-locale-pill-btn"
19
- @click="$emit('localeChange', loc)"
20
- >
21
- {{ loc.toUpperCase() }}
22
- <span v-if="loc === defaultLocale" :title="msg.header.defaultLocale"
23
- >★</span
24
- >
25
- </button>
26
- <button
27
- v-if="loc !== defaultLocale"
28
- type="button"
29
- class="mc-locale-x"
30
- :title="msg.header.deactivateLocale"
31
- @click="$emit('removeLocale', loc)"
32
- >
33
- ×
34
- </button>
35
- </span>
36
- <div class="mc-locale-add-wrap">
37
- <button
38
- type="button"
39
- class="mc-locale-add"
40
- :disabled="addableLocales.length === 0"
41
- @click="$emit('update:localePickerOpen', !localePickerOpen)"
43
+ class="sa-marketing-locale-picker-row"
44
+ @click="$emit('addLocale', l)"
42
45
  >
43
- {{ msg.header.addLocale }}
46
+ {{ l.toUpperCase() }}
44
47
  </button>
45
- <div v-if="localePickerOpen" class="mc-locale-picker">
46
- <button
47
- v-for="l in addableLocales"
48
- :key="l"
49
- type="button"
50
- class="mc-locale-picker-row"
51
- @click="$emit('addLocale', l)"
52
- >
53
- {{ l.toUpperCase() }}
54
- </button>
55
- </div>
56
48
  </div>
57
49
  </div>
58
- <button class="mc-btn" type="button" :disabled="busy" @click="$emit('reload')">
59
- <svg
60
- width="14"
61
- height="14"
62
- viewBox="0 0 24 24"
63
- fill="none"
64
- stroke="currentColor"
65
- stroke-width="2"
66
- >
67
- <path d="M21 12a9 9 0 1 1-3-6.7M21 3v6h-6" />
68
- </svg>
69
- <span>{{ msg.header.refresh }}</span>
70
- </button>
71
50
  </div>
51
+ <button class="sa-marketing-btn" type="button" :disabled="busy" @click="$emit('reload')">
52
+ <svg
53
+ width="14"
54
+ height="14"
55
+ viewBox="0 0 24 24"
56
+ fill="none"
57
+ stroke="currentColor"
58
+ stroke-width="2"
59
+ >
60
+ <path d="M21 12a9 9 0 1 1-3-6.7M21 3v6h-6" />
61
+ </svg>
62
+ <span>{{ msg.header.refresh }}</span>
63
+ </button>
72
64
  </div>
73
65
  </template>
74
66