srcdev-nuxt-components 6.2.12 → 6.3.0

package/app/components/alert-mask/AlertMaskCore.vue

@@ -8,8 +8,8 @@
         </mask>
       </defs>
 
-      <path :d="outerPath" :fill="cfg.color" mask="url(#borderMask)" vector-effect="non-scaling-stroke" />
-      <path :d="innerPath" fill="rgba(0,0,0,0.5)" />
+      <path :d="outerPath" :fill="cfg.borderColour" mask="url(#borderMask)" vector-effect="non-scaling-stroke" />
+      <path :d="innerPath" :fill="cfg.backgroundColour" />
     </svg>
 
     <div
@@ -28,21 +28,11 @@
   </div>
 </template>
 
-<script lang="ts">
-export interface BorderConfig {
-  color?: string
-  radiusLeft?: number
-  radiusRight?: number
-  borderLeft?: number
-  borderTop?: number
-  borderRight?: number
-  borderBottom?: number
-}
-</script>
-
 <script setup lang="ts">
+import type { AlertMaskConfig } from "../../types/components/alert-mask-core"
+
 const props = defineProps({
-  config: Object as PropType<BorderConfig>,
+  config: Object as PropType<AlertMaskConfig>,
   styleClassPassthrough: {
     type: [String, Array] as PropType<string | string[]>,
     default: () => [],
@@ -81,7 +71,8 @@ onMounted(() => {
 })
 
 const cfg = computed(() => ({
-  color: props.config?.color ?? "var(--orange-8)",
+  backgroundColour: props.config?.backgroundColour ?? "rgba(0,0,0,0.25)",
+  borderColour: props.config?.borderColour ?? "var(--orange-8)",
   radiusLeft: props.config?.radiusLeft ?? 12,
   radiusRight: props.config?.radiusRight ?? 12,
   borderLeft: props.config?.borderLeft ?? 8,

package/app/components/display-prompt/DisplayPromptCore.vue

@@ -6,7 +6,7 @@
     ref="promptElementRef"
     tabindex="0"
   >
-    <div class="display-prompt-wrapper" :data-theme="theme" :class="[elementClasses]" data-test-id="display-prompt">
+    <div class="display-prompt-wrapper" :class="[theme, elementClasses]" data-test-id="display-prompt">
       <div class="display-prompt-inner">
         <div class="display-prompt-icon" data-test-id="prompt-icon" aria-hidden="true">
           <slot name="customDecoratorIcon">
@@ -197,7 +197,9 @@ onMounted(async () => {
         border-radius: 50%;
         outline: 1px solid var(--colour-theme-3);
 
-        transition: border 200ms ease-in-out, outline 200ms ease-in-out;
+        transition:
+          border 200ms ease-in-out,
+          outline 200ms ease-in-out;
 
         &:hover {
           cursor: pointer;

package/app/components/display-toast/DisplayToast.vue

@@ -8,11 +8,11 @@
         elementClasses,
         cssStateClass,
         positionClasses,
+        theme,
         {
           'has-theme': !slots.default,
         },
       ]"
-      :data-theme="theme"
       :role="toastRole"
       :aria-live="ariaLive"
       :tabindex="slots.default ? undefined : '0'"
@@ -21,102 +21,41 @@
     >
       <slot v-if="slots.default"></slot>
 
-      <div v-else class="display-toast-inner">
-        <div class="toast-icon" aria-hidden="true">
-          <slot name="customToastIcon">
-            <Icon :name="customIcon || defaultThemeIcons[theme] || 'akar-icons:info'" class="icon" />
-          </slot>
-        </div>
-        <div class="toast-message" :id="'toast-message-' + toastId">{{ toastDisplayText }}</div>
-        <div v-if="!autoDismiss" class="toast-action">
-          <button @click.prevent="setDismissToast()">
-            <Icon name="material-symbols:close" class="icon" />
-            <span class="sr-only">Close</span>
-          </button>
-        </div>
-      </div>
+      <DefaultToastContent
+        v-else
+        :theme="theme"
+        :custom-icon="customIcon"
+        :toast-id="toastId"
+        :toast-display-text="toastDisplayText"
+        :toast-title="toastTitle"
+        :toast-description="toastDescription"
+        :auto-dismiss="autoDismiss"
+        :set-dismiss-toast="setDismissToast"
+      >
+        <template #customToastIcon>
+          <slot name="customToastIcon" />
+        </template>
+        <template #title>
+          <slot name="title" />
+        </template>
+        <template #description>
+          <slot name="description" />
+        </template>
+      </DefaultToastContent>
       <div v-if="autoDismiss" class="display-toast-progress"></div>
     </div>
   </Teleport>
 </template>
 
-<script lang="ts">
-/**
- * DisplayToast - Configurable toast notification component
- *
- * Example usage with config object:
- * <DisplayToast
- *   v-model="showToast"
- *   :config="{
- *     appearance: { theme: 'success', position: 'top', alignment: 'right' },
- *     behavior: { autoDismiss: true, duration: 3000, returnFocusTo: buttonRef },
- *     content: { text: 'Operation completed successfully!' }
- *   }"
- * />
- *
- * The returnFocusTo property accepts an HTMLElement or ComponentPublicInstance
- * and will focus that element when the toast is dismissed for better accessibility.
- *
- * Types exported for use in other components:
- * - DisplayToastConfig
- * - DisplayToastProps
- * - DisplayToastTheme
- * - DisplayToastAppearanceConfig
- * - DisplayToastBehaviorConfig
- * - DisplayToastContentConfig
- * - ToastSlots
- */
-
-export type DisplayToastTheme =
-  | "primary"
-  | "secondary"
-  | "tertiary"
-  | "ghost"
-  | "error"
-  | "info"
-  | "success"
-  | "warning"
-
-export type DisplayToastPosition = "top" | "bottom"
-export type DisplayToastAlignment = "left" | "center" | "right"
-
-export interface DisplayToastAppearanceConfig {
-  theme?: DisplayToastTheme
-  position?: DisplayToastPosition
-  alignment?: DisplayToastAlignment
-  fullWidth?: boolean
-}
-
-export interface DisplayToastBehaviorConfig {
-  autoDismiss?: boolean
-  duration?: number
-  revealDuration?: number
-  returnFocusTo?: HTMLElement | ComponentPublicInstance | null
-}
-
-export interface DisplayToastContentConfig {
-  text?: string
-  customIcon?: string
-}
-
-export interface DisplayToastConfig {
-  appearance?: DisplayToastAppearanceConfig
-  behavior?: DisplayToastBehaviorConfig
-  content?: DisplayToastContentConfig
-}
-
-export interface DisplayToastProps {
-  config?: DisplayToastConfig
-  styleClassPassthrough?: string | string[]
-}
-
-export interface ToastSlots {
-  default?(props?: {}): any
-  customToastIcon?(props?: {}): any
-}
-</script>
-
 <script setup lang="ts">
+import type {
+  DisplayToastProps,
+  DisplayToastTheme,
+  DisplayToastPosition,
+  DisplayToastAlignment,
+  ToastSlots,
+} from "../../types/components/display-toast.d"
+
 const props = withDefaults(defineProps<DisplayToastProps>(), {
   config: () => ({
     appearance: {
@@ -140,17 +79,6 @@ const props = withDefaults(defineProps<DisplayToastProps>(), {
 
 const slots = defineSlots<ToastSlots>()
 
-const defaultThemeIcons = {
-  primary: "akar-icons:info",
-  secondary: "akar-icons:info",
-  tertiary: "akar-icons:info",
-  ghost: "akar-icons:info",
-  error: "akar-icons:circle-alert",
-  info: "akar-icons:info",
-  success: "akar-icons:info",
-  warning: "akar-icons:circle-alert",
-}
-
 const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 
 // Computed properties for accessing config values with defaults
@@ -163,6 +91,8 @@ const duration = computed(() => props.config?.behavior?.duration ?? 5000)
 const revealDuration = computed(() => props.config?.behavior?.revealDuration ?? 550)
 const returnFocusTo = computed(() => props.config?.behavior?.returnFocusTo ?? null)
 const toastDisplayText = computed(() => props.config?.content?.text ?? "")
+const toastTitle = computed(() => props.config?.content?.title ?? "")
+const toastDescription = computed(() => props.config?.content?.description ?? "")
 const customIcon = computed(() => props.config?.content?.customIcon)
 
 // Computed classes for positioning
@@ -414,7 +344,7 @@ onBeforeRouteLeave(() => {
 
     overflow: hidden;
 
-    .display-toast-inner {
+    /* .display-toast-inner {
       display: grid;
       grid-template-columns: auto 1fr auto;
       gap: 12px;
@@ -491,7 +421,7 @@ onBeforeRouteLeave(() => {
           }
         }
       }
-    }
+    } */
   }
 
   .display-toast-progress {

package/app/components/display-toast/molecules/DefaultToastContent.vue

@@ -0,0 +1,165 @@
+<template>
+  <div class="display-toast-inner">
+    <div class="toast-icon" aria-hidden="true">
+      <slot name="customToastIcon">
+        <Icon :name="customIcon || defaultThemeIcons[theme] || 'akar-icons:info'" class="icon" />
+      </slot>
+    </div>
+    <div class="toast-message" :id="'toast-message-' + toastId">
+      <template v-if="slots.title || slots.description || toastTitle || toastDescription">
+        <p v-if="slots.title || toastTitle" class="title" data-test-id="toast-title">
+          <slot name="title">{{ toastTitle }}</slot>
+        </p>
+        <p v-if="slots.description || toastDescription" class="description" data-test-id="toast-description">
+          <slot name="description">{{ toastDescription }}</slot>
+        </p>
+      </template>
+      <template v-else>
+        {{ toastDisplayText }}
+      </template>
+    </div>
+
+    <div v-if="!autoDismiss" class="toast-action">
+      <button @click.prevent="setDismissToast()">
+        <Icon name="material-symbols:close" class="icon" />
+        <span class="sr-only">Close</span>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { DisplayToastTheme } from "../../../types/components/display-toast.d"
+
+interface DefaultToastContentProps {
+  theme: DisplayToastTheme
+  customIcon?: string
+  toastId: string
+  toastDisplayText: string
+  toastTitle?: string
+  toastDescription?: string
+  autoDismiss: boolean
+  setDismissToast: () => void
+}
+
+const props = defineProps<DefaultToastContentProps>()
+
+const defaultThemeIcons = {
+  primary: "akar-icons:info",
+  secondary: "akar-icons:info",
+  tertiary: "akar-icons:info",
+  ghost: "akar-icons:info",
+  error: "akar-icons:circle-alert",
+  info: "akar-icons:info",
+  success: "akar-icons:info",
+  warning: "akar-icons:circle-alert",
+}
+
+const slots = defineSlots<{
+  customToastIcon?: () => any
+  title?: () => any
+  description?: () => any
+}>()
+</script>
+
+<style lang="css">
+.display-toast-inner {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  gap: 12px;
+  align-items: center;
+  background-color: var(--gray-10);
+  border-start-start-radius: 8px;
+  border-end-start-radius: 8px;
+  padding: 12px 14px;
+  overflow: hidden;
+
+  .toast-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 12px;
+
+    .icon {
+      color: var(--colour-theme-0);
+      display: inline-block;
+      font-size: 2.5rem;
+      font-style: normal;
+      font-weight: normal;
+      overflow: hidden;
+    }
+  }
+
+  .toast-message {
+    display: flex;
+    align-items: center;
+    gap: var(--step-1);
+    font-size: var(--step-4);
+    font-weight: normal;
+    line-height: 1.3;
+    color: var(--colour-theme-0);
+    margin: 0;
+    padding: 0;
+
+    .title {
+      margin: 0;
+      font-weight: 600;
+      font-size: var(--step-4);
+      line-height: 1.2;
+    }
+
+    .description {
+      margin: 0;
+      font-size: var(--step-3);
+      line-height: 1.4;
+      opacity: 0.9;
+    }
+
+    /* When using slots, change flex direction to column */
+    &:has(.title, .text) {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+  }
+
+  .toast-action {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: 12px;
+
+    button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--colour-theme-10);
+      border: 0.1rem solid var(--colour-theme-8);
+      outline: 0.1rem solid transparent;
+      border-radius: 50%;
+      box-shadow: none;
+      color: var(--colour-theme-0);
+      cursor: pointer;
+      font-size: var(--step-4);
+      font-weight: bold;
+      padding: 0.5rem;
+      text-decoration: underline;
+
+      transition: all 0.3s ease;
+
+      .icon {
+        font-size: 1.5rem;
+        vertical-align: middle;
+      }
+
+      &:hover,
+      &:focus-visible {
+        box-shadow: none;
+        background-color: var(--colour-theme-8);
+        color: var(--colour-theme-0);
+        outline: 0.1rem solid var(--colour-theme-3);
+        outline-offset: 0.2rem;
+      }
+    }
+  }
+}
+</style>

package/app/components/display-tooltip/DisplayTooltip.vue

@@ -0,0 +1,165 @@
+<template>
+  <div class="display-tooltip-core" :class="[elementClasses]" :style="`--anchor-name: ${tooltipAnchorName}`">
+    <div class="display-tooltip-trigger-wrapper body-md">
+      <slot v-if="slots.triggerContent" name="triggerContent"></slot>
+      <button
+        :popovertarget="tooltipId"
+        popovertargetaction="toggle"
+        class="display-tooltip-trigger-button"
+        :class="{ hide: hideTooltipTrigger }"
+        aria-label="Toggle the popover"
+      >
+        <Icon name="fa7-solid:circle-question" class="display-tooltip-trigger-icon" aria-hidden="true" />
+      </button>
+    </div>
+    <div popover class="display-tooltip-popover" :id="tooltipId" ref="popover1">
+      <div class="display-tooltip-popover-content">
+        <slot name="tooltipContent"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  tooltipId: {
+    type: String,
+    default: "",
+  },
+  styleClassPassthrough: {
+    type: [String, Array] as PropType<string | string[]>,
+    default: () => [],
+  },
+})
+
+const slots = useSlots()
+const tooltipId = computed(() => {
+  return props.tooltipId.length ? props.tooltipId : `nuxt-tooltip-${useId()}`
+})
+const tooltipAnchorName = `tooltip-anchor-${useId()}`
+const hideTooltipTrigger = ref(false)
+
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
+</script>
+
+<style lang="css">
+.display-tooltip-core {
+  padding-block: 8px;
+  position: relative;
+
+  .display-tooltip-trigger-wrapper {
+    display: inline-flex;
+    align-items: flex-start;
+
+    .display-tooltip-trigger-button {
+      margin-left: 8px;
+
+      &.hide {
+        width: 0;
+        overflow: hidden;
+        opacity: 0;
+      }
+
+      .display-tooltip-trigger-icon {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 20px;
+        height: 20px;
+        color: var(--nuxt-text-header);
+        font-size: 18px;
+        line-height: 20px;
+      }
+    }
+  }
+
+  .display-tooltip-trigger-button {
+    all: unset;
+    aspect-ratio: 1 / 1;
+    width: 24px;
+    display: grid;
+    place-items: center;
+
+    outline: 1px solid transparent;
+    anchor-name: var(--anchor-name);
+
+    @supports (corner-shape: squircle) {
+      corner-shape: squircle;
+      border-radius: 50%;
+    }
+
+    &:hover {
+      cursor: pointer;
+      text-decoration: underline;
+    }
+
+    &:hover,
+    &:focus-visible {
+      outline-offset: 2px;
+    }
+  }
+
+  .display-tooltip-popover {
+    display: none;
+    position: absolute;
+    border: none;
+    width: 300px;
+
+    outline: 1px solid light-dark(black, white);
+    color: light-dark(black, white);
+    background-color: light-dark(white, black);
+    border-radius: 8px;
+
+    position-anchor: var(--anchor-name);
+    margin: 0;
+    inset: auto;
+    top: calc(anchor(top) + 0px);
+    left: calc(anchor(right) + 1px);
+    opacity: 0;
+    transition: opacity 200ms, display 200ms, overlay 200ms;
+
+    transition-behavior: allow-discrete;
+    position-try-fallbacks: flip-inline;
+
+    /* .popover-action {
+      display: flex;
+      justify-content: flex-end;
+      padding: 8px;
+      border-bottom: 1px solid var(--nuxt-stroke-border-grey);
+    } */
+
+    .display-tooltip-popover-content {
+      .display-tooltip-close-button {
+        all: unset;
+        cursor: pointer;
+        color: var(--nuxt-text-accessibility-blue);
+        border: 1px solid var(--theme-button-border);
+        outline: 1px solid var(--theme-button-outline);
+
+        font-weight: 600;
+        padding: 8px 12px;
+
+        &:hover,
+        &:focus {
+          text-decoration: underline;
+          border: 1px solid var(--theme-button-border-hover);
+          outline: 1px solid var(--theme-button-outline-hover);
+          outline-offset: 2px;
+        }
+      }
+    }
+
+    &:popover-open {
+      display: flex;
+      opacity: 1;
+
+      flex-direction: column;
+
+      @starting-style {
+        display: flex;
+        opacity: 0;
+      }
+    }
+  }
+}
+</style>

package/app/components/display-tooltip/DisplayTooltipDefined.vue

@@ -0,0 +1,101 @@
+<template>
+  <DisplayTooltip :tooltip-id="tooltipId" :style-class-passthrough>
+    <template v-if="slots.triggerContent" #triggerContent>
+      <slot name="triggerContent"></slot>
+    </template>
+    <template #tooltipContent>
+      <div class="popover-content-defined">
+        <component
+          :is="props.contentText.tooltipTitle?.tag"
+          v-if="props.contentText.tooltipTitle"
+          class="tooltip-title subtitle-sm"
+        >
+          {{ props.contentText.tooltipTitle.text }}
+        </component>
+        <component
+          :is="props.contentText.tooltipContent?.tag"
+          v-if="props.contentText.tooltipContent"
+          class="tooltip-body body-sm"
+        >
+          {{ props.contentText.tooltipContent.text }}
+        </component>
+        <component
+          :is="props.contentText.tooltipAction?.tag"
+          v-if="props.contentText.tooltipAction"
+          class="tooltip-action input-value"
+        >
+          {{ props.contentText.tooltipAction.text }}
+        </component>
+        <button
+          :popovertarget="tooltipId"
+          popovertargetaction="hide"
+          class="display-tooltip-close-button"
+          aria-label="Close tool tip"
+        >
+          Close
+        </button>
+      </div>
+    </template>
+  </DisplayTooltip>
+</template>
+
+<script lang="ts">
+export interface TooltipContentText {
+  tooltipTitle?: {
+    tag: string
+    text: string
+  }
+  tooltipContent?: {
+    tag: string
+    text: string
+  }
+  tooltipAction?: {
+    tag: string
+    text: string
+  }
+}
+</script>
+
+<script setup lang="ts">
+const props = defineProps({
+  tooltipId: {
+    type: String,
+    default: "",
+  },
+  contentText: {
+    type: Object as PropType<TooltipContentText>,
+    default: () => ({}),
+  },
+  styleClassPassthrough: {
+    type: [String, Array] as PropType<string | string[]>,
+    default: () => [],
+  },
+})
+
+const slots = useSlots()
+const tooltipId = computed(() => {
+  return props.tooltipId.length ? `nuxt-tooltip-${props.tooltipId}` : `nuxt-tooltip-${useId()}`
+})
+</script>
+
+<style lang="css">
+.display-tooltip-core {
+  .popover {
+    .popover-content {
+      .popover-content-defined {
+        .tooltip-title {
+          color: var(--nuxt-text-white-header);
+        }
+
+        .tooltip-body {
+          color: var(--nuxt-text-white-body);
+        }
+
+        .tooltip-action {
+          color: var(--nuxt-text-white-body);
+        }
+      }
+    }
+  }
+}
+</style>