srcdev-nuxt-components 4.0.5 → 5.0.0

package/components/{functional/display-dialog → display-dialog}/DisplayDialogCore.vue

@@ -1,7 +1,7 @@
 <template>
-  <dialog class="display-dialog-core" :class="[variant, elementClasses]" role="dialog" :align-dialog :open :data-dialog-id="dataDialogId" ref="dialogRef">
+  <dialog class="display-dialog-core" :class="[elementClasses]" role="dialog" :align-dialog :justify-dialog :open :data-dialog-id="dataDialogId" ref="dialogRef">
     <focus-trap v-model:active="open" :clickOutsideDeactivates="true" @deactivate="closeDialog()">
-      <div class="inner">
+      <div class="inner" :class="[variant]">
         <div class="header">
           <div v-if="hasDialogTitle" class="col-left">
             <slot name="dialogTitle"></slot>
@@ -40,15 +40,15 @@ const props = defineProps({
     default: 'dialog',
     validator: (val) => ['dialog', 'modal', 'confirm'].includes(val as string),
   },
-  positionX: {
+  justifyDialog: {
     type: String,
     default: 'center',
-    validator: (val) => ['left', 'center', 'right'].includes(val as string),
+    validator: (val) => ['start', 'center', 'end'].includes(val as string),
   },
-  positionY: {
+  alignDialog: {
     type: String,
     default: 'center',
-    validator: (val) => ['top', 'center', 'bottom'].includes(val as string),
+    validator: (val) => ['start', 'center', 'end'].includes(val as string),
   },
   lockViewport: {
     type: Boolean,
@@ -83,8 +83,6 @@ const hasDialogTitle = computed(() => slots.dialogTitle !== undefined);
 const hasDialogContent = computed(() => slots.dialogContent !== undefined);
 const hasActionButtons = computed(() => slots.actionButtons !== undefined);
 
-const alignDialog = computed(() => `${props.positionY}-${props.positionX}`);
-
 onMounted(() => {
   bodyTag.value = document.querySelector('body');
   if (lockViewport.value && bodyTag.value !== null) {
@@ -95,9 +93,6 @@ onMounted(() => {
 
 <style lang="css">
 .display-dialog-core {
-  --_dialog-inner-height: initial;
-  --_dialog-inner-width: 100vw;
-
   display: flex;
   position: fixed;
   left: 0;
@@ -106,7 +101,7 @@ onMounted(() => {
   height: 100%;
   backdrop-filter: blur(5px);
   background-color: rgba(0, 0, 0, 0.5);
-  z-index: 13;
+  z-index: 999999;
   opacity: 0;
   border: none;
   padding: 0;
@@ -125,54 +120,70 @@ onMounted(() => {
     }
   }
 
-  &[align-dialog$='center'] {
-    justify-content: center;
-  }
-  &[align-dialog^='center'] {
-    align-items: center;
+  /* * Positioning the dialog */
+  &[justify-dialog='start'] {
+    justify-content: flex-start;
   }
 
-  &.confirm {
-    --_dialog-inner-width: initial;
+  &[justify-dialog='center'] {
+    justify-content: center;
   }
 
-  &.dialog {
-    --_dialog-inner-height: 70dvh;
-    --_dialog-inner-width: min(75%, 720px);
+  &[justify-dialog='end'] {
+    justify-content: flex-end;
   }
 
-  &.form {
-    --_dialog-inner-width: initial;
+  &[align-dialog='start'] {
+    align-items: flex-start;
   }
 
-  &.fullscreen {
-    --_dialog-inner-width: initial;
+  &[align-dialog='center'] {
+    align-items: center;
   }
-
-  &.modal {
-    --_dialog-inner-width: initial;
+  &[align-dialog='end'] {
+    align-items: flex-end;
   }
 
   .inner {
     display: grid;
     grid-template-rows: auto 1fr auto;
 
-    border-radius: var(--dialog-border-radius);
-    border: var(--dialog-border);
-    outline: var(--dialog-outline);
+    border-radius: 8px;
+    border: 1px solid light-dark(var(--gray-10), var(--gray-2));
+    outline: 1px solid light-dark(var(--gray-12), var(--gray-0));
 
     background-color: var(--dialog-inner-background);
-    height: var(--_dialog-inner-height);
-    width: var(--_dialog-inner-width);
-
+    height: initial;
+    width: 100vw;
     overflow: hidden;
 
+    &.confirm {
+      width: initial;
+    }
+
+    &.dialog {
+      height: 70dvh;
+      width: min(75%, 720px);
+    }
+
+    &.form {
+      width: initial;
+    }
+
+    &.fullscreen {
+      width: initial;
+    }
+
+    &.modal {
+      width: initial;
+    }
+
     .header {
       display: grid;
       grid-template-columns: auto 1fr auto;
       align-items: center;
 
-      padding: var(--dialog-header-padding);
+      padding: 12px;
 
       .col-left {
         /* grid-column: 1; */
@@ -223,7 +234,7 @@ onMounted(() => {
 
     .dialog-content {
       overflow: hidden;
-      padding: var(--dialog-content-padding);
+      padding: 12px;
 
       &.allow-content-scroll {
         overflow-y: auto;
@@ -237,7 +248,7 @@ onMounted(() => {
       display: flex;
       gap: 1.2rem;
       justify-content: flex-end;
-      padding: var(--dialog-footer-padding);
+      padding: 12px;
     }
   }
 }

package/components/display-prompt/DisplayPromptCore.vue

@@ -0,0 +1,187 @@
+<template>
+  <div class="display-prompt-core" :class="[{ dismissed: hide }, { 'use-local-style-overrides': useLocalStyleOverrides }]" :data-test-id="`display-prompt-core-${theme}`">
+    <div class="display-prompt-wrapper" :data-prompt-theme="theme" :class="[elementClasses]" data-test-id="display-prompt">
+      <div class="display-prompt-inner">
+        <div class="display-prompt-icon" data-test-id="prompt-icon">
+          <slot name="customDecoratorIcon">
+            <Icon :name="displayPromptIcons[theme]" class="icon" :color="iconColor" />
+          </slot>
+        </div>
+        <div class="display-prompt-content">
+          <p class="title" data-test-id="display-prompt-title">
+            <slot name="title"></slot>
+          </p>
+          <p v-if="hasContent" class="text" data-test-id="display-prompt-content">
+            <slot name="content"></slot>
+          </p>
+        </div>
+        <button v-if="dismissible" @click.prevent="dismissPrompt()" data-test-id="display-prompt-action" class="display-prompt-action">
+          <slot name="customCloseIcon">
+            <Icon name="bitcoin-icons:cross-filled" class="icon" />
+          </slot>
+          <span class="sr-only">
+            <slot name="customTitle">Close this prompt</slot>
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  dismissible: {
+    type: Boolean,
+    default: false,
+  },
+  theme: {
+    type: String,
+    default: 'error',
+    validator(value: string) {
+      return ['error', 'info', 'success', 'warning', 'secondary'].includes(value);
+    },
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  iconColor: {
+    type: String as PropType<string>,
+    default: 'dark-grey',
+    validator(value: string) {
+      return ['dark-grey', 'white'].includes(value);
+    },
+  },
+  useLocalStyleOverrides: {
+    type: Boolean,
+    default: false,
+  },
+  displayPromptIcons: {
+    type: Object as PropType<Record<string, string>>,
+    default: () => ({
+      error: 'akar-icons:circle-alert',
+      info: 'akar-icons:info',
+      success: 'akar-icons:check',
+      warning: 'akar-icons:circle-alert',
+      secondary: 'akar-icons:info',
+    }),
+  },
+});
+
+const slots = useSlots();
+const hasContent = ref(slots.content !== undefined);
+const hide = ref(false);
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+const dismissPrompt = () => {
+  // styleClassPassthrough.value = '';
+  hide.value = true;
+};
+</script>
+
+<style lang="css">
+.display-prompt-core {
+  display: grid;
+  grid-template-rows: 1fr;
+  opacity: 1;
+  transition: all 200ms ease-in-out;
+
+  &.dismissed {
+    grid-template-rows: 0fr;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .display-prompt-wrapper {
+    background-color: var(--component-theme-0);
+    border: 1px solid var(--component-theme-8);
+    border-radius: 4px;
+
+    border-inline-start: 8px solid var(--component-theme-8);
+    border-start-start-radius: 8px;
+    border-end-start-radius: 8px;
+
+    overflow: hidden;
+
+    .display-prompt-inner {
+      align-items: center;
+      display: flex;
+      gap: 12px;
+      justify-content: space-between;
+      padding-block: 1rem;
+      padding-inline: 1.5rem;
+
+      .display-prompt-icon {
+        display: inline-flex;
+        .icon {
+          color: var(--component-theme-8);
+          display: inline-block;
+          font-size: 3rem;
+          font-style: normal;
+          font-weight: normal;
+          overflow: hidden;
+        }
+      }
+
+      .display-prompt-content {
+        display: block flex;
+        flex-direction: column;
+        flex-grow: 1;
+        gap: 1rem;
+        margin: 0;
+        padding: 0.2rem;
+
+        .title {
+          font-size: var(--step-2);
+          font-weight: bold;
+          line-height: 1.3;
+          color: var(--component-theme-8);
+          margin: 0;
+          padding: 0;
+        }
+
+        .text {
+          font-size: var(--step-2);
+          font-weight: normal;
+          line-height: 1.3;
+          color: var(--component-theme-8);
+          margin: 0;
+          padding: 0;
+        }
+      }
+      .display-prompt-action {
+        background-color: transparent;
+        display: block flex;
+        align-items: center;
+        justify-content: center;
+        margin: 1rem;
+        padding: 0.5rem;
+        border: 0.1rem solid var(--component-theme-8);
+        border-radius: 50%;
+        outline: 1px solid var(--component-theme-3);
+
+        transition: border 200ms ease-in-out, outline 200ms ease-in-out;
+
+        &:hover {
+          cursor: pointer;
+          border: 0.1rem solid var(--component-theme-12);
+          outline: 2px solid var(--component-theme-6);
+        }
+
+        &:focus-visible {
+          box-shadow: var(--focus-box-shadow-colour-on);
+          border: 0.1rem solid var(--component-theme-12);
+          outline: 2px solid var(--component-theme-6);
+        }
+
+        .icon {
+          color: var(--component-theme-8);
+          display: block;
+          font-size: var(--step-2);
+          padding: 1rem;
+        }
+      }
+    }
+  }
+}
+</style>

package/components/expanding-panel/ExpandingPanel.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="expanding-panel" :class="[elementClasses]">
+    <details class="expanding-panel-details" :name>
+      <summary class="expanding-panel-summary" :id="triggerId" :aria-controls="contentId">
+        <span class="label-wrapper">
+          <slot name="summary"></slot>
+        </span>
+        <span class="icon-wrapper">
+          <slot name="icon">
+            <Icon name="bi:caret-down-fill" class="icon mi-12" />
+          </slot>
+        </span>
+      </summary>
+    </details>
+    <div class="expanding-panel-content" :aria-labelledby="triggerId" :id="contentId" role="region">
+      <div class="inner">
+        <slot name="content"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  name: {
+    type: String,
+    default: '',
+  },
+  iconSize: {
+    type: String,
+    default: 'medium',
+  },
+  animationDuration: {
+    type: Number,
+    default: 400,
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+});
+
+const name = computed(() => props.name || useId());
+
+const triggerId = computed(() => `id-${name.value}-trigger`);
+const contentId = computed(() => `id-${name.value}-content`);
+const animationDurationStr = computed(() => `${props.animationDuration}ms`);
+
+const { elementClasses, resetElementClasses, updateElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+</script>
+
+<style lang="css">
+.expanding-panel {
+  .expanding-panel-details {
+    .expanding-panel-summary {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      flex-direction: row;
+      gap: 0;
+      list-style: none;
+
+      padding-inline: 0.5rem;
+
+      &::-webkit-details-marker,
+      &::marker {
+        display: none;
+      }
+
+      overflow: clip;
+
+      .label-wrapper {
+      }
+      .icon-wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        aspect-ratio: 1;
+        outline: 1px solid var(--gray-3);
+        padding: 1rem;
+        overflow: hidden;
+
+        .icon {
+          display: block;
+          transform: scaleY(1);
+          transition: transform v-bind(animationDurationStr) ease-in-out;
+          font-size: 1.2rem;
+        }
+      }
+    }
+
+    &[open] {
+      .expanding-panel-summary {
+        .icon-wrapper {
+          .icon {
+            transform: scaleY(-1);
+          }
+        }
+      }
+      + .expanding-panel-content {
+        grid-template-rows: 1fr;
+        .inner {
+          /* transform: scaleY(1); */
+        }
+      }
+    }
+  }
+
+  .expanding-panel-content {
+    display: grid;
+    grid-template-rows: 0fr;
+    transition: all v-bind(animationDurationStr) ease-in-out;
+
+    .inner {
+      overflow: hidden;
+      padding: 0.5rem;
+
+      /* transform: scaleY(0); */
+      /* transition: transform v-bind(animationDurationStr) ease-in-out; */
+    }
+  }
+}
+</style>

package/components/responsive-header/NavigationItems.vue

@@ -1,43 +1,56 @@
 <template>
-  <div class="overflow-navigation-wrapper" :class="elementClasses">
+  <div class="overflow-navigation-wrapper" :class="elementClasses" role="menu" aria-label="Overflow navigation menu">
     <ul
       v-for="(navGroup, groupKey) in mainNavigationState.clonedNavLinks"
       :key="groupKey"
       class="overflow-navigation-list"
-      :class="[{visible: !mainNavigationState.navListVisibility[groupKey]}]"
+      :class="[{ visible: !mainNavigationState.navListVisibility[groupKey] }]"
       :style="{ '--_overflow-navigation-list-min-width': widestNavLinkWidthInMainNavigationState + 'px' }"
+      role="none"
     >
       <template v-for="(link, localIndex) in navGroup" :key="localIndex">
         <li
           v-if="link.path"
           class="overflow-navigation-item"
-          :class="{ 'visible': !mainNavigationState.clonedNavLinks?.[groupKey]?.[localIndex]?.config?.visible }"
+          :class="{ visible: !mainNavigationState.clonedNavLinks?.[groupKey]?.[localIndex]?.config?.visible }"
           :style="{ '--_main-navigation-item-width': mainNavigationState.clonedNavLinks?.[groupKey]?.[localIndex]?.config?.width + 'px' }"
           :data-group-key="groupKey"
           :data-local-index="localIndex"
+          role="none"
         >
-          <NuxtLink class="overflow-navigation-link" :to="link.path"><span class="overflow-navigation-text">{{ link.name }}</span></NuxtLink>
+          <NuxtLink class="overflow-navigation-link" :to="link.path" role="menuitem">
+            <span class="overflow-navigation-text">{{ link.name }}</span>
+          </NuxtLink>
         </li>
         <li
           v-else
           class="overflow-navigation-item"
-          :class="{ 'visible': !mainNavigationState.clonedNavLinks?.[groupKey]?.[localIndex]?.config?.visible }"
+          :class="{ visible: !mainNavigationState.clonedNavLinks?.[groupKey]?.[localIndex]?.config?.visible }"
           :style="{ '--_main-navigation-item-width': mainNavigationState.clonedNavLinks?.[groupKey]?.[localIndex]?.config?.width + 'px' }"
           :data-group-key="groupKey"
           :data-local-index="localIndex"
+          role="none"
         >
-          <DisplayDetailsCore :id="useId()" name="overflow-navigation-group" :animation-duration="detailsAanimationDuration" icon-size="medium" :style-class-passthrough="['overflow-navigation-details']">
+          <DisplayDetailsCore
+            :id="useId()"
+            name="overflow-navigation-group"
+            :animation-duration="detailsAanimationDuration"
+            icon-size="medium"
+            :style-class-passthrough="['overflow-navigation-details']"
+          >
             <template #summary>
-              <span class="overflow-navigation-text">{{ link.childLinksTitle }}</span>
+              <span class="overflow-navigation-text" :aria-label="`${link.childLinksTitle} submenu`" role="menuitem" :aria-haspopup="true">{{ link.childLinksTitle }}</span>
             </template>
             <template #summaryIcon>
-              <Icon name="mdi:chevron-down" class="icon" />
+              <Icon name="mdi:chevron-down" class="icon" :aria-hidden="true" />
             </template>
             <template #content>
               <div class="overflow-navigation-sub-nav-inner">
                 <ul class="overflow-navigation-sub-nav-list">
                   <li v-for="childLink in link.childLinks" :key="childLink.name" class="overflow-navigation-sub-nav-item">
-                    <NuxtLink :to="childLink.path" class="overflow-navigation-sub-nav-link"><span class="overflow-navigation-sub-nav-text">{{ childLink.name }}</span></NuxtLink>
+                    <NuxtLink :to="childLink.path" class="overflow-navigation-sub-nav-link" role="menuitem">
+                      <span class="overflow-navigation-sub-nav-text">{{ childLink.name }}</span>
+                    </NuxtLink>
                   </li>
                 </ul>
               </div>
@@ -68,10 +81,7 @@ const detailsAanimationDurationString = `${detailsAanimationDuration}ms`;
 
 const widestNavLinkWidthInMainNavigationState = computed(() => {
   return Object.values(props.mainNavigationState.clonedNavLinks || {}).reduce((maxWidth, group) => {
-    return Math.max(
-      maxWidth,
-      ...group.map(link => link.config?.width || 0)
-    );
+    return Math.max(maxWidth, ...group.map((link) => link.config?.width || 0));
   }, 0);
 });
 
@@ -86,14 +96,12 @@ watch(
 </script>
 
 <style lang="css">
-
 .overflow-navigation-wrapper {
   display: flex;
   flex-direction: column;
   gap: 12px;
 
   .overflow-navigation-list {
-
     display: none;
 
     &.visible {
@@ -104,7 +112,6 @@ watch(
     }
 
     .overflow-navigation-item {
-
       display: none;
 
       &.visible {
@@ -137,7 +144,6 @@ watch(
           .display-details-content {
             .overflow-navigation-sub-nav-inner {
               .overflow-navigation-sub-nav-list {
-
                 display: flex;
                 flex-direction: column;
                 gap: 12px;
@@ -145,7 +151,6 @@ watch(
                 transition: margin-block-start v-bind(detailsAanimationDurationString) ease;
 
                 .overflow-navigation-sub-nav-item {
-
                   .overflow-navigation-sub-nav-link {
                     text-decoration: none;
                     color: inherit;