@asd20/ui-next 2.0.2 → 2.0.4

package/src/components/templates/Asd20WayfindingImageTemplate/index.vue

@@ -17,14 +17,12 @@
     </asd20-site-navigation>
 
     <!-- Banner Notifications -->
-    <client-only>
-      <asd20-notification-group
-        :notifications="activeNotificationsByType.banner"
-        group-type="banner"
-        @dismiss="$emit('dismiss-notification', $event)"
-        @toggle-all="$emit('toggle-all')"
-      ></asd20-notification-group>
-    </client-only>
+    <asd20-notification-group
+      :notifications="activeNotificationsByType.banner"
+      group-type="banner"
+      @dismiss="$emit('dismiss-notification', $event)"
+      @toggle-all="$emit('toggle-all')"
+    ></asd20-notification-group>
 
     <!-- Page Header -->
     <asd20-image-header
@@ -39,30 +37,26 @@
     >
       <!-- Floating Notifications -->
       <template #top>
-        <client-only>
-          <asd20-notification-group
-            class="asd20-notification-group--floating"
-            :notifications="activeNotificationsByType.floating"
-            :total-dismissed-notifications="totalDismissedNotifications"
-            group-type="floating"
-            @dismiss="$emit('dismiss-notification', $event)"
-            @toggle-all="$emit('toggle-all')"
-          ></asd20-notification-group>
-        </client-only>
+        <asd20-notification-group
+          class="asd20-notification-group--floating"
+          :notifications="activeNotificationsByType.floating"
+          :total-dismissed-notifications="totalDismissedNotifications"
+          group-type="floating"
+          @dismiss="$emit('dismiss-notification', $event)"
+          @toggle-all="$emit('toggle-all')"
+        ></asd20-notification-group>
       </template>
       <!-- <template #top><asd20-breadcrumb :links="breadcrumbLinks"></asd20-breadcrumb></template> -->
     </asd20-image-header>
 
     <!-- Inline-Notifications -->
-    <client-only>
-      <asd20-notification-group
-        class="asd20-notification-group--inline"
-        :notifications="activeNotificationsByType.inline"
-        group-type="inline"
-        @dismiss="$emit('dismiss-notification', $event)"
-        @toggle-all="$emit('toggle-all')"
-      ></asd20-notification-group>
-    </client-only>
+    <asd20-notification-group
+      class="asd20-notification-group--inline"
+      :notifications="activeNotificationsByType.inline"
+      group-type="inline"
+      @dismiss="$emit('dismiss-notification', $event)"
+      @toggle-all="$emit('toggle-all')"
+    ></asd20-notification-group>
 
     <!-- Page Content -->
     <asd20-page-content

package/src/components/templates/Asd20WayfindingTemplate/index.vue

@@ -17,14 +17,12 @@
     </asd20-site-navigation>
 
     <!-- Banner Notifications -->
-    <client-only>
-      <asd20-notification-group
-        :notifications="activeNotificationsByType.banner"
-        group-type="banner"
-        @dismiss="$emit('dismiss-notification', $event)"
-        @toggle-all="$emit('toggle-all')"
-      ></asd20-notification-group>
-    </client-only>
+    <asd20-notification-group
+      :notifications="activeNotificationsByType.banner"
+      group-type="banner"
+      @dismiss="$emit('dismiss-notification', $event)"
+      @toggle-all="$emit('toggle-all')"
+    ></asd20-notification-group>
 
     <!-- Page Header -->
     <asd20-page-header
@@ -39,30 +37,26 @@
     >
       <!-- Floating Notifications -->
       <template #top>
-        <client-only>
-          <asd20-notification-group
-            class="asd20-notification-group--floating"
-            :notifications="activeNotificationsByType.floating"
-            :total-dismissed-notifications="totalDismissedNotifications"
-            group-type="floating"
-            @dismiss="$emit('dismiss-notification', $event)"
-            @toggle-all="$emit('toggle-all')"
-          ></asd20-notification-group>
-        </client-only>
+        <asd20-notification-group
+          class="asd20-notification-group--floating"
+          :notifications="activeNotificationsByType.floating"
+          :total-dismissed-notifications="totalDismissedNotifications"
+          group-type="floating"
+          @dismiss="$emit('dismiss-notification', $event)"
+          @toggle-all="$emit('toggle-all')"
+        ></asd20-notification-group>
       </template>
       <!-- <template #top><asd20-breadcrumb :links="breadcrumbLinks"></asd20-breadcrumb></template> -->
     </asd20-page-header>
 
     <!-- Inline-Notifications -->
-    <client-only>
-      <asd20-notification-group
-        class="asd20-notification-group--inline"
-        :notifications="activeNotificationsByType.inline"
-        group-type="inline"
-        @dismiss="$emit('dismiss-notification', $event)"
-        @toggle-all="$emit('toggle-all')"
-      ></asd20-notification-group>
-    </client-only>
+    <asd20-notification-group
+      class="asd20-notification-group--inline"
+      :notifications="activeNotificationsByType.inline"
+      group-type="inline"
+      @dismiss="$emit('dismiss-notification', $event)"
+      @toggle-all="$emit('toggle-all')"
+    ></asd20-notification-group>
 
     <!-- Page Content -->
     <asd20-page-content

package/src/design/_template.scss

@@ -2,7 +2,7 @@
   .page-enter-active, .page-leave-active {
     transition: opacity .5s;
   }
-  .page-enter, .page-leave-to {
+  .page-enter, .page-enter-from, .page-leave-to {
     opacity: 0;
   }
   .notification-group--inline {

package/src/helpers/linkPolicy.js

@@ -50,20 +50,14 @@ export function shouldOpenInNewWindow(href, options) {
   return !isAsd20Hostname(url.hostname, options)
 }
 
-export function resolveCurrentHostname(vm, options) {
+export function resolveCurrentHostname(_vm, options = {}) {
   if (typeof window !== 'undefined' && window.location) {
     return normalizeHostname(window.location.hostname, options)
   }
 
-  const requestHost =
-    vm &&
-    vm.$ssrContext &&
-    vm.$ssrContext.req &&
-    vm.$ssrContext.req.headers &&
-    (vm.$ssrContext.req.headers['x-forwarded-host'] ||
-      vm.$ssrContext.req.headers.host)
-
-  return normalizeHostname(requestHost, options)
+  // Server renders should stay deterministic and avoid reaching through the
+  // component proxy for SSR internals that are not part of the Vue 3 public API.
+  return normalizeHostname(options.currentHostname || '', options)
 }
 
 export function shouldShowExternalIcon(href, currentHostname, options) {

package/src/mixins/inputComponentMixin.js

@@ -1,6 +1,12 @@
 import kebabCase from 'lodash/kebabCase'
+import createComponentInstanceId from '../utils/createComponentInstanceId'
 
 const INPUT_MODEL_LISTENER_KEYS = ['onInput', 'onUpdate:modelValue']
+const DEFAULT_INPUT_COMPONENT_NAME = 'asd20-input'
+
+function resolveKebabComponentName(componentName = DEFAULT_INPUT_COMPONENT_NAME) {
+  return kebabCase(componentName).replace(/-([0-9])/g, '$1')
+}
 
 function omitKeys(source, keys) {
   const target = { ...(source || {}) }
@@ -46,18 +52,23 @@ export default {
     reversed: { type: Boolean, default: false },
     taggable: { type: Boolean, default: true },
   },
-  data: () => ({
-    isDirty: false,
-    isActive: false,
-    validationErrors: [],
-  }),
+  data() {
+    return {
+      isDirty: false,
+      isActive: false,
+      validationErrors: [],
+      generatedInputId: createComponentInstanceId(
+        resolveKebabComponentName(this.$options.name)
+      ),
+    }
+  },
   mounted() {
     this.validate(this.resolvedValue)
   },
 
   computed: {
     kebabComponentName() {
-      return kebabCase(this.$options.name).replace(/-([0-9])/g, '$1')
+      return resolveKebabComponentName(this.$options.name)
     },
     classes() {
       let classes = {}
@@ -92,11 +103,7 @@ export default {
     },
 
     computedId() {
-      return this.$attrs.id
-        ? this.$attrs.id
-        : `${this.kebabComponentName}_${Math.round(
-            Math.random() * 10000000000000000
-          )}`
+      return this.$attrs.id ? this.$attrs.id : this.generatedInputId
     },
 
     selectedItem() {

package/src/utils/createComponentInstanceId.js

@@ -1,6 +1,9 @@
-let nextComponentInstanceId = 0
+import { getCurrentInstance, useId } from 'vue'
 
 export default function createComponentInstanceId(prefix = 'asd20-component') {
-  nextComponentInstanceId += 1
-  return `${prefix}-${nextComponentInstanceId}`
+  if (getCurrentInstance()) {
+    return `${prefix}-${useId()}`
+  }
+
+  return `${prefix}-detached`
 }