@asd20/ui-next 2.0.3 → 2.0.4

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 (40) hide show
  1. package/CHANGELOG.md +2 -0
  2. package/package.json +1 -1
  3. package/src/components/atoms/Asd20Badge/index.vue +1 -0
  4. package/src/components/molecules/Asd20Share/index.vue +1 -0
  5. package/src/components/organisms/Asd20AiSearch/index.vue +4 -0
  6. package/src/components/organisms/Asd20CampusHeader/index.vue +5 -7
  7. package/src/components/organisms/Asd20ImageGallery/index.vue +1 -0
  8. package/src/components/organisms/Asd20ImageHeader/index.vue +4 -6
  9. package/src/components/organisms/Asd20PageHeader/index.vue +4 -6
  10. package/src/components/organisms/Asd20SiteMenu/index.vue +2 -0
  11. package/src/components/organisms/Asd20SiteNavigation/index.vue +10 -8
  12. package/src/components/organisms/Asd20SiteSearch/index.vue +1 -0
  13. package/src/components/templates/Asd20AppTemplate/index.vue +18 -24
  14. package/src/components/templates/Asd20ArticleDigestCompactTemplate/index.vue +20 -26
  15. package/src/components/templates/Asd20ArticleDigestTemplate/index.vue +20 -26
  16. package/src/components/templates/Asd20ArticleListTemplate/index.vue +20 -26
  17. package/src/components/templates/Asd20ArticleTemplate/index.vue +14 -18
  18. package/src/components/templates/Asd20BasePageTemplate/index.vue +26 -34
  19. package/src/components/templates/Asd20CampusDetailTemplate/index.vue +20 -26
  20. package/src/components/templates/Asd20CampusTemplate/index.vue +50 -58
  21. package/src/components/templates/Asd20ClubsTemplate/index.vue +20 -26
  22. package/src/components/templates/Asd20DetailAlternateTemplate/index.vue +20 -26
  23. package/src/components/templates/Asd20DetailImageFullTemplate/index.vue +20 -26
  24. package/src/components/templates/Asd20DetailImageTemplate/index.vue +20 -26
  25. package/src/components/templates/Asd20DetailTemplate/index.vue +20 -26
  26. package/src/components/templates/Asd20DistrictHomeTemplate/index.vue +45 -55
  27. package/src/components/templates/Asd20DistrictVideoTemplate/index.vue +45 -55
  28. package/src/components/templates/Asd20FileListPageTemplate/index.vue +20 -26
  29. package/src/components/templates/Asd20GroupFeatureTemplate/index.vue +20 -26
  30. package/src/components/templates/Asd20LoginsTemplate/index.vue +21 -27
  31. package/src/components/templates/Asd20PeopleFeatureTemplate/index.vue +20 -26
  32. package/src/components/templates/Asd20ProfileTemplate/index.vue +20 -26
  33. package/src/components/templates/Asd20SalaryCalculatorTemplate/index.vue +20 -26
  34. package/src/components/templates/Asd20SchoolHomeTemplate/index.vue +84 -96
  35. package/src/components/templates/Asd20SchoolHomeVideoTemplate/index.vue +81 -93
  36. package/src/components/templates/Asd20WayfindingAccessibilityTemplate/index.vue +21 -27
  37. package/src/components/templates/Asd20WayfindingAlternateTemplate/index.vue +21 -27
  38. package/src/components/templates/Asd20WayfindingImageTemplate/index.vue +21 -27
  39. package/src/components/templates/Asd20WayfindingTemplate/index.vue +21 -27
  40. package/src/design/_template.scss +1 -1
@@ -17,14 +17,12 @@
17
17
  </asd20-site-navigation>
18
18
 
19
19
  <!-- Banner Notifications -->
20
- <client-only>
21
- <asd20-notification-group
22
- :notifications="activeNotificationsByType.banner"
23
- group-type="banner"
24
- @dismiss="$emit('dismiss-notification', $event)"
25
- @toggle-all="$emit('toggle-all')"
26
- />
27
- </client-only>
20
+ <asd20-notification-group
21
+ :notifications="activeNotificationsByType.banner"
22
+ group-type="banner"
23
+ @dismiss="$emit('dismiss-notification', $event)"
24
+ @toggle-all="$emit('toggle-all')"
25
+ />
28
26
 
29
27
  <!-- Page Header -->
30
28
  <asd20-page-header
@@ -41,28 +39,24 @@
41
39
  >
42
40
  <!-- Floating Notifications -->
43
41
  <template #top>
44
- <client-only>
45
- <asd20-notification-group
46
- class="asd20-notification-group--floating"
47
- :notifications="activeNotificationsByType.floating"
48
- :total-dismissed-notifications="totalDismissedNotifications"
49
- group-type="floating"
50
- @dismiss="$emit('dismiss-notification', $event)"
51
- @toggle-all="$emit('toggle-all')"
52
- ></asd20-notification-group>
53
- </client-only>
42
+ <asd20-notification-group
43
+ class="asd20-notification-group--floating"
44
+ :notifications="activeNotificationsByType.floating"
45
+ :total-dismissed-notifications="totalDismissedNotifications"
46
+ group-type="floating"
47
+ @dismiss="$emit('dismiss-notification', $event)"
48
+ @toggle-all="$emit('toggle-all')"
49
+ ></asd20-notification-group>
54
50
  </template>
55
51
  </asd20-page-header>
56
52
 
57
53
  <!-- Inline-Notifications -->
58
- <client-only>
59
- <asd20-notification-group
60
- :notifications="activeNotificationsByType.inline"
61
- group-type="inline"
62
- @dismiss="$emit('dismiss-notification', $event)"
63
- @toggle-all="$emit('toggle-all')"
64
- ></asd20-notification-group>
65
- </client-only>
54
+ <asd20-notification-group
55
+ :notifications="activeNotificationsByType.inline"
56
+ group-type="inline"
57
+ @dismiss="$emit('dismiss-notification', $event)"
58
+ @toggle-all="$emit('toggle-all')"
59
+ ></asd20-notification-group>
66
60
 
67
61
  <!-- Page Content -->
68
62
  <asd20-page-content
@@ -16,14 +16,12 @@
16
16
  />
17
17
 
18
18
  <!-- Banner Notifications -->
19
- <client-only>
20
- <asd20-notification-group
21
- :notifications="activeNotificationsByType.banner"
22
- group-type="banner"
23
- @dismiss="$emit('dismiss-notification', $event)"
24
- @toggle-all="$emit('toggle-all')"
25
- />
26
- </client-only>
19
+ <asd20-notification-group
20
+ :notifications="activeNotificationsByType.banner"
21
+ group-type="banner"
22
+ @dismiss="$emit('dismiss-notification', $event)"
23
+ @toggle-all="$emit('toggle-all')"
24
+ />
27
25
 
28
26
  <!-- Page Header -->
29
27
  <asd20-school-homepage-header
@@ -33,51 +31,49 @@
33
31
  fullscreen
34
32
  >
35
33
  <template #top>
36
- <client-only>
37
- <div class="pickerContainer">
38
- <asd20-organization-picker
39
- v-if="organization.title !== 'Academy District 20'"
40
- :organization-options="organizationOptions"
41
- :organization="organization"
42
- logo-size="lg"
34
+ <div class="pickerContainer">
35
+ <asd20-organization-picker
36
+ v-if="organization.title !== 'Academy District 20'"
37
+ :organization-options="organizationOptions"
38
+ :organization="organization"
39
+ logo-size="lg"
40
+ />
41
+ <a
42
+ v-if="websiteLogoProps && showLogo"
43
+ :href="websiteLogoProps.logoLink ? websiteLogoProps.logoLink : ''"
44
+ >
45
+ <img
46
+ class="optionalLogo"
47
+ :src="
48
+ websiteLogoProps.logoImageUrl
49
+ ? websiteLogoProps.logoImageUrl
50
+ : ''
51
+ "
52
+ :alt="websiteLogoProps.logoAlt ? websiteLogoProps.logoAlt : ''"
53
+ :aria-label="
54
+ websiteLogoProps.logoAlt ? websiteLogoProps.logoAlt : ''
55
+ "
43
56
  />
44
- <a
45
- v-if="websiteLogoProps && showLogo"
46
- :href="websiteLogoProps.logoLink ? websiteLogoProps.logoLink : ''"
47
- >
48
- <img
49
- class="optionalLogo"
50
- :src="
51
- websiteLogoProps.logoImageUrl
52
- ? websiteLogoProps.logoImageUrl
53
- : ''
54
- "
55
- :alt="websiteLogoProps.logoAlt ? websiteLogoProps.logoAlt : ''"
56
- :aria-label="
57
- websiteLogoProps.logoAlt ? websiteLogoProps.logoAlt : ''
58
- "
59
- />
60
- </a>
61
- <a
62
- v-if="websiteLogoProps2 && showLogo"
63
- :href="
64
- websiteLogoProps2.logoLink ? websiteLogoProps2.logoLink : ''
57
+ </a>
58
+ <a
59
+ v-if="websiteLogoProps2 && showLogo"
60
+ :href="
61
+ websiteLogoProps2.logoLink ? websiteLogoProps2.logoLink : ''
62
+ "
63
+ >
64
+ <img
65
+ class="optionalLogo"
66
+ :src="
67
+ websiteLogoProps2.logoImageUrl
68
+ ? websiteLogoProps2.logoImageUrl
69
+ : ''
65
70
  "
66
- >
67
- <img
68
- class="optionalLogo"
69
- :src="
70
- websiteLogoProps2.logoImageUrl
71
- ? websiteLogoProps2.logoImageUrl
72
- : ''
73
- "
74
- :alt="
75
- websiteLogoProps2.logoAlt ? websiteLogoProps2.logoAlt : ''
76
- "
77
- />
78
- </a>
79
- </div>
80
- </client-only>
71
+ :alt="
72
+ websiteLogoProps2.logoAlt ? websiteLogoProps2.logoAlt : ''
73
+ "
74
+ />
75
+ </a>
76
+ </div>
81
77
  <div class="notification-translation-container">
82
78
  <div class="language-wrapper">
83
79
  <!-- <client-only>
@@ -111,37 +107,31 @@
111
107
  :ai-search-feedback-form-url="aiSearchFeedbackFormUrl"
112
108
  />
113
109
  </client-only>
114
- <client-only>
115
- <Asd20BlockSchedule
116
- v-if="blockEvent"
117
- :block-event="blockEvent"
118
- class="block-schedule"
119
- />
120
- </client-only>
121
- <client-only>
122
- <Asd20LanguageTranslation
123
- v-if="languageCode"
124
- reversed
125
- no-label
126
- :language-code="languageCode"
127
- @update:languageCode="$emit('update:languageCode', $event)"
128
- />
129
- </client-only>
110
+ <Asd20BlockSchedule
111
+ v-if="blockEvent"
112
+ :block-event="blockEvent"
113
+ class="block-schedule"
114
+ />
115
+ <Asd20LanguageTranslation
116
+ v-if="languageCode"
117
+ reversed
118
+ no-label
119
+ :language-code="languageCode"
120
+ @update:languageCode="$emit('update:languageCode', $event)"
121
+ />
130
122
  <!-- Floating Notifications -->
131
- <client-only>
132
- <asd20-notification-group
133
- :class="
134
- !blockEvent
135
- ? 'asd20-notification-group--floating no-block-widget'
136
- : 'asd20-notification-group--floating'
137
- "
138
- :notifications="activeNotificationsByType.floating"
139
- :total-dismissed-notifications="totalDismissedNotifications"
140
- group-type="floating"
141
- @dismiss="$emit('dismiss-notification', $event)"
142
- @toggle-all="$emit('toggle-all')"
143
- />
144
- </client-only>
123
+ <asd20-notification-group
124
+ :class="
125
+ !blockEvent
126
+ ? 'asd20-notification-group--floating no-block-widget'
127
+ : 'asd20-notification-group--floating'
128
+ "
129
+ :notifications="activeNotificationsByType.floating"
130
+ :total-dismissed-notifications="totalDismissedNotifications"
131
+ group-type="floating"
132
+ @dismiss="$emit('dismiss-notification', $event)"
133
+ @toggle-all="$emit('toggle-all')"
134
+ />
145
135
  </div>
146
136
  </div>
147
137
  </template>
@@ -155,21 +145,19 @@
155
145
  <!-- Page Content -->
156
146
 
157
147
  <!-- Feeds -->
158
- <client-only>
159
- <asd20-feeds-section
160
- :announcements="announcements"
161
- :announcements-feed-props="announcementsFeedProps"
162
- :stories="stories"
163
- :stories-feed-props="storiesFeedProps"
164
- :organization="organization"
165
- :events-feed-props="eventsFeedProps"
166
- :events="events"
167
- :organization-options="organizationOptions"
168
- @announcements-in-view="$emit('announcements-in-view')"
169
- @stories-in-view="$emit('stories-in-view')"
170
- @events-in-view="$emit('events-in-view')"
171
- />
172
- </client-only>
148
+ <asd20-feeds-section
149
+ :announcements="announcements"
150
+ :announcements-feed-props="announcementsFeedProps"
151
+ :stories="stories"
152
+ :stories-feed-props="storiesFeedProps"
153
+ :organization="organization"
154
+ :events-feed-props="eventsFeedProps"
155
+ :events="events"
156
+ :organization-options="organizationOptions"
157
+ @announcements-in-view="$emit('announcements-in-view')"
158
+ @stories-in-view="$emit('stories-in-view')"
159
+ @events-in-view="$emit('events-in-view')"
160
+ />
173
161
 
174
162
  <!-- Footer -->
175
163
  <asd20-page-footer
@@ -16,14 +16,12 @@
16
16
  />
17
17
 
18
18
  <!-- Banner Notifications -->
19
- <client-only>
20
- <asd20-notification-group
21
- :notifications="activeNotificationsByType.banner"
22
- group-type="banner"
23
- @dismiss="$emit('dismiss-notification', $event)"
24
- @toggle-all="$emit('toggle-all')"
25
- />
26
- </client-only>
19
+ <asd20-notification-group
20
+ :notifications="activeNotificationsByType.banner"
21
+ group-type="banner"
22
+ @dismiss="$emit('dismiss-notification', $event)"
23
+ @toggle-all="$emit('toggle-all')"
24
+ />
27
25
 
28
26
  <!-- Page Header -->
29
27
  <asd20-school-homepage-video-header
@@ -33,48 +31,46 @@
33
31
  fullscreen
34
32
  >
35
33
  <template #top>
36
- <client-only>
37
- <div class="pickerContainer">
38
- <asd20-organization-picker
39
- v-if="organization.title !== 'Academy District 20'"
40
- :organization-options="organizationOptions"
41
- :organization="organization"
42
- logo-size="lg"
34
+ <div class="pickerContainer">
35
+ <asd20-organization-picker
36
+ v-if="organization.title !== 'Academy District 20'"
37
+ :organization-options="organizationOptions"
38
+ :organization="organization"
39
+ logo-size="lg"
40
+ />
41
+ <a
42
+ v-if="websiteLogoProps"
43
+ :href="websiteLogoProps.logoLink ? websiteLogoProps.logoLink : ''"
44
+ >
45
+ <img
46
+ class="optionalLogo"
47
+ :src="
48
+ websiteLogoProps.logoImageUrl
49
+ ? websiteLogoProps.logoImageUrl
50
+ : ''
51
+ "
52
+ :alt="websiteLogoProps.logoAlt ? websiteLogoProps.logoAlt : ''"
43
53
  />
44
- <a
45
- v-if="websiteLogoProps"
46
- :href="websiteLogoProps.logoLink ? websiteLogoProps.logoLink : ''"
47
- >
48
- <img
49
- class="optionalLogo"
50
- :src="
51
- websiteLogoProps.logoImageUrl
52
- ? websiteLogoProps.logoImageUrl
53
- : ''
54
- "
55
- :alt="websiteLogoProps.logoAlt ? websiteLogoProps.logoAlt : ''"
56
- />
57
- </a>
58
- <a
59
- v-if="websiteLogoProps2"
60
- :href="
61
- websiteLogoProps2.logoLink ? websiteLogoProps2.logoLink : ''
54
+ </a>
55
+ <a
56
+ v-if="websiteLogoProps2"
57
+ :href="
58
+ websiteLogoProps2.logoLink ? websiteLogoProps2.logoLink : ''
59
+ "
60
+ >
61
+ <img
62
+ class="optionalLogo"
63
+ :src="
64
+ websiteLogoProps2.logoImageUrl
65
+ ? websiteLogoProps2.logoImageUrl
66
+ : ''
62
67
  "
63
- >
64
- <img
65
- class="optionalLogo"
66
- :src="
67
- websiteLogoProps2.logoImageUrl
68
- ? websiteLogoProps2.logoImageUrl
69
- : ''
70
- "
71
- :alt="
72
- websiteLogoProps2.logoAlt ? websiteLogoProps2.logoAlt : ''
73
- "
74
- />
75
- </a>
76
- </div>
77
- </client-only>
68
+ :alt="
69
+ websiteLogoProps2.logoAlt ? websiteLogoProps2.logoAlt : ''
70
+ "
71
+ />
72
+ </a>
73
+ </div>
78
74
  <div class="notification-translation-container">
79
75
  <div class="language-wrapper">
80
76
  <!-- <client-only>
@@ -111,39 +107,33 @@
111
107
  />
112
108
  </client-only>
113
109
 
114
- <client-only>
115
- <Asd20BlockSchedule
116
- v-if="blockEvent"
117
- :block-event="blockEvent"
118
- class="block-schedule"
119
- />
120
- </client-only>
110
+ <Asd20BlockSchedule
111
+ v-if="blockEvent"
112
+ :block-event="blockEvent"
113
+ class="block-schedule"
114
+ />
121
115
 
122
- <client-only>
123
- <Asd20LanguageTranslation
124
- v-if="languageCode"
125
- reversed
126
- no-label
127
- :language-code="languageCode"
128
- @update:languageCode="$emit('update:languageCode', $event)"
129
- />
130
- </client-only>
116
+ <Asd20LanguageTranslation
117
+ v-if="languageCode"
118
+ reversed
119
+ no-label
120
+ :language-code="languageCode"
121
+ @update:languageCode="$emit('update:languageCode', $event)"
122
+ />
131
123
 
132
124
  <!-- Floating Notifications -->
133
- <client-only>
134
- <asd20-notification-group
135
- :class="
136
- !blockEvent
137
- ? 'asd20-notification-group--floating no-block-widget'
138
- : 'asd20-notification-group--floating'
139
- "
140
- :notifications="activeNotificationsByType.floating"
141
- :total-dismissed-notifications="totalDismissedNotifications"
142
- group-type="floating"
143
- @dismiss="$emit('dismiss-notification', $event)"
144
- @toggle-all="$emit('toggle-all')"
145
- />
146
- </client-only>
125
+ <asd20-notification-group
126
+ :class="
127
+ !blockEvent
128
+ ? 'asd20-notification-group--floating no-block-widget'
129
+ : 'asd20-notification-group--floating'
130
+ "
131
+ :notifications="activeNotificationsByType.floating"
132
+ :total-dismissed-notifications="totalDismissedNotifications"
133
+ group-type="floating"
134
+ @dismiss="$emit('dismiss-notification', $event)"
135
+ @toggle-all="$emit('toggle-all')"
136
+ />
147
137
  </div>
148
138
  </div>
149
139
  </template>
@@ -157,21 +147,19 @@
157
147
  <!-- Page Content -->
158
148
 
159
149
  <!-- Feeds -->
160
- <client-only>
161
- <asd20-feeds-section
162
- :announcements="announcements"
163
- :announcements-feed-props="announcementsFeedProps"
164
- :stories="stories"
165
- :stories-feed-props="storiesFeedProps"
166
- :events="events"
167
- :events-feed-props="eventsFeedProps"
168
- :organization="organization"
169
- :organization-options="organizationOptions"
170
- @announcements-in-view="$emit('announcements-in-view')"
171
- @stories-in-view="$emit('stories-in-view')"
172
- @events-in-view="$emit('events-in-view')"
173
- />
174
- </client-only>
150
+ <asd20-feeds-section
151
+ :announcements="announcements"
152
+ :announcements-feed-props="announcementsFeedProps"
153
+ :stories="stories"
154
+ :stories-feed-props="storiesFeedProps"
155
+ :events="events"
156
+ :events-feed-props="eventsFeedProps"
157
+ :organization="organization"
158
+ :organization-options="organizationOptions"
159
+ @announcements-in-view="$emit('announcements-in-view')"
160
+ @stories-in-view="$emit('stories-in-view')"
161
+ @events-in-view="$emit('events-in-view')"
162
+ />
175
163
 
176
164
  <!-- Footer -->
177
165
  <asd20-page-footer
@@ -17,14 +17,12 @@
17
17
  </asd20-site-navigation>
18
18
 
19
19
  <!-- Banner Notifications -->
20
- <client-only>
21
- <asd20-notification-group
22
- :notifications="activeNotificationsByType.banner"
23
- group-type="banner"
24
- @dismiss="$emit('dismiss-notification', $event)"
25
- @toggle-all="$emit('toggle-all')"
26
- ></asd20-notification-group>
27
- </client-only>
20
+ <asd20-notification-group
21
+ :notifications="activeNotificationsByType.banner"
22
+ group-type="banner"
23
+ @dismiss="$emit('dismiss-notification', $event)"
24
+ @toggle-all="$emit('toggle-all')"
25
+ ></asd20-notification-group>
28
26
 
29
27
  <!-- Page Header -->
30
28
  <asd20-page-header
@@ -39,30 +37,26 @@
39
37
  >
40
38
  <!-- Floating Notifications -->
41
39
  <template #top>
42
- <client-only>
43
- <asd20-notification-group
44
- class="asd20-notification-group--floating"
45
- :notifications="activeNotificationsByType.floating"
46
- :total-dismissed-notifications="totalDismissedNotifications"
47
- group-type="floating"
48
- @dismiss="$emit('dismiss-notification', $event)"
49
- @toggle-all="$emit('toggle-all')"
50
- ></asd20-notification-group>
51
- </client-only>
40
+ <asd20-notification-group
41
+ class="asd20-notification-group--floating"
42
+ :notifications="activeNotificationsByType.floating"
43
+ :total-dismissed-notifications="totalDismissedNotifications"
44
+ group-type="floating"
45
+ @dismiss="$emit('dismiss-notification', $event)"
46
+ @toggle-all="$emit('toggle-all')"
47
+ ></asd20-notification-group>
52
48
  </template>
53
49
  <!-- <template #top><asd20-breadcrumb :links="breadcrumbLinks"></asd20-breadcrumb></template> -->
54
50
  </asd20-page-header>
55
51
 
56
52
  <!-- Inline-Notifications -->
57
- <client-only>
58
- <asd20-notification-group
59
- class="asd20-notification-group--inline"
60
- :notifications="activeNotificationsByType.inline"
61
- group-type="inline"
62
- @dismiss="$emit('dismiss-notification', $event)"
63
- @toggle-all="$emit('toggle-all')"
64
- ></asd20-notification-group>
65
- </client-only>
53
+ <asd20-notification-group
54
+ class="asd20-notification-group--inline"
55
+ :notifications="activeNotificationsByType.inline"
56
+ group-type="inline"
57
+ @dismiss="$emit('dismiss-notification', $event)"
58
+ @toggle-all="$emit('toggle-all')"
59
+ ></asd20-notification-group>
66
60
 
67
61
  <!-- Page Content -->
68
62
  <asd20-page-content
@@ -17,14 +17,12 @@
17
17
  </asd20-site-navigation>
18
18
 
19
19
  <!-- Banner Notifications -->
20
- <client-only>
21
- <asd20-notification-group
22
- :notifications="activeNotificationsByType.banner"
23
- group-type="banner"
24
- @dismiss="$emit('dismiss-notification', $event)"
25
- @toggle-all="$emit('toggle-all')"
26
- ></asd20-notification-group>
27
- </client-only>
20
+ <asd20-notification-group
21
+ :notifications="activeNotificationsByType.banner"
22
+ group-type="banner"
23
+ @dismiss="$emit('dismiss-notification', $event)"
24
+ @toggle-all="$emit('toggle-all')"
25
+ ></asd20-notification-group>
28
26
 
29
27
  <!-- Page Header -->
30
28
  <asd20-page-header
@@ -39,30 +37,26 @@
39
37
  >
40
38
  <!-- Floating Notifications -->
41
39
  <template #top>
42
- <client-only>
43
- <asd20-notification-group
44
- class="asd20-notification-group--floating"
45
- :notifications="activeNotificationsByType.floating"
46
- :total-dismissed-notifications="totalDismissedNotifications"
47
- group-type="floating"
48
- @dismiss="$emit('dismiss-notification', $event)"
49
- @toggle-all="$emit('toggle-all')"
50
- ></asd20-notification-group>
51
- </client-only>
40
+ <asd20-notification-group
41
+ class="asd20-notification-group--floating"
42
+ :notifications="activeNotificationsByType.floating"
43
+ :total-dismissed-notifications="totalDismissedNotifications"
44
+ group-type="floating"
45
+ @dismiss="$emit('dismiss-notification', $event)"
46
+ @toggle-all="$emit('toggle-all')"
47
+ ></asd20-notification-group>
52
48
  </template>
53
49
  <!-- <template #top><asd20-breadcrumb :links="breadcrumbLinks"></asd20-breadcrumb></template> -->
54
50
  </asd20-page-header>
55
51
 
56
52
  <!-- Inline-Notifications -->
57
- <client-only>
58
- <asd20-notification-group
59
- class="asd20-notification-group--inline"
60
- :notifications="activeNotificationsByType.inline"
61
- group-type="inline"
62
- @dismiss="$emit('dismiss-notification', $event)"
63
- @toggle-all="$emit('toggle-all')"
64
- ></asd20-notification-group>
65
- </client-only>
53
+ <asd20-notification-group
54
+ class="asd20-notification-group--inline"
55
+ :notifications="activeNotificationsByType.inline"
56
+ group-type="inline"
57
+ @dismiss="$emit('dismiss-notification', $event)"
58
+ @toggle-all="$emit('toggle-all')"
59
+ ></asd20-notification-group>
66
60
 
67
61
  <!-- Page Content -->
68
62
  <asd20-page-content