srcdev-nuxt-components 6.1.2 → 6.1.4

package/app/components/masonry-grid-ordered/MasonryGridOrdered.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script setup lang="ts">
-import { useBreakpoints, useElementSize, useResizeObserver } from '@vueuse/core';
+import { useBreakpoints, useElementSize, useResizeObserver } from "@vueuse/core"
 
 const props = defineProps({
   gridData: {
@@ -38,77 +38,79 @@ const props = defineProps({
   },
   justify: {
     type: String as PropType<String>,
-    default: 'left',
-    validator: (val: string) => ['left', 'center', 'right'].includes(val),
+    default: "left",
+    validator: (val: string) => ["left", "center", "right"].includes(val),
   },
-});
+})
 
-const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 
-const gridData = toRef(() => props.gridData);
+const gridData = toRef(() => props.gridData)
 
-const minTileWidth = toRef(() => props.minTileWidth);
-const gridWrapper = ref<null | HTMLDivElement>(null);
-const gridItemsRefs = ref<HTMLDivElement[]>([]);
-const { width } = useElementSize(gridWrapper);
+const minTileWidth = toRef(() => props.minTileWidth)
+const gridWrapper = ref<null | HTMLDivElement>(null)
+const gridItemsRefs = ref<HTMLDivElement[]>([])
+const { width } = useElementSize(gridWrapper)
 const columnCount = computed(() => {
-  return Math.floor(width.value / minTileWidth.value);
-});
+  return Math.floor(width.value / minTileWidth.value)
+})
 
-const gapNum = toRef(props.gap);
-const gapStr = toRef(props.gap + 'px');
+const gapNum = toRef(props.gap)
+const gapStr = toRef(props.gap + "px")
 
-const fixedWidth = toRef(() => props.fixedWidth);
-const minTileWidthStr = toRef(props.minTileWidth + 'px');
+const fixedWidth = toRef(() => props.fixedWidth)
+const minTileWidthStr = toRef(props.minTileWidth + "px")
 const maxTileWidth = computed(() => {
-  return fixedWidth.value ? minTileWidth.value + 'px' : '1fr';
-});
+  return fixedWidth.value ? minTileWidth.value + "px" : "1fr"
+})
 
 const justify = computed(() => {
-  return fixedWidth.value ? props.justify : 'stretch';
-});
+  return fixedWidth.value ? props.justify : "stretch"
+})
 
 const updateGrid = () => {
   if (gridWrapper.value !== null) {
-    const wrapperWidth = gridWrapper.value?.offsetWidth ?? 0;
-    const itemWidth = fixedWidth.value ? minTileWidth.value : Math.floor((wrapperWidth - (columnCount.value - 1) * gapNum.value) / columnCount.value);
+    const wrapperWidth = gridWrapper.value?.offsetWidth ?? 0
+    const itemWidth = fixedWidth.value
+      ? minTileWidth.value
+      : Math.floor((wrapperWidth - (columnCount.value - 1) * gapNum.value) / columnCount.value)
 
-    const colHeights = Array(columnCount.value).fill(0);
+    const colHeights = Array(columnCount.value).fill(0)
 
     gridItemsRefs.value.forEach((item) => {
-      const minHeight = Math.min(...colHeights);
-      const minIndex = colHeights.indexOf(minHeight);
+      const minHeight = Math.min(...colHeights)
+      const minIndex = colHeights.indexOf(minHeight)
 
-      item?.style.setProperty('--_position', 'absolute');
-      item?.style.setProperty('--_position-top', minHeight + 'px');
-      item?.style.setProperty('--_position-left', minIndex * (100 / columnCount.value) + '%');
-      item?.style.setProperty('--_element-width', itemWidth + 'px');
+      item?.style.setProperty("--_position", "absolute")
+      item?.style.setProperty("--_position-top", minHeight + "px")
+      item?.style.setProperty("--_position-left", minIndex * (100 / columnCount.value) + "%")
+      item?.style.setProperty("--_element-width", itemWidth + "px")
 
-      colHeights[minIndex] += Math.floor(item.offsetHeight + gapNum.value);
-    });
+      colHeights[minIndex] += Math.floor(item.offsetHeight + gapNum.value)
+    })
 
-    const maxHeight = Math.max(...colHeights);
-    gridWrapper.value?.style.setProperty('--_wrapper-height', maxHeight + 'px');
+    const maxHeight = Math.max(...colHeights)
+    gridWrapper.value?.style.setProperty("--_wrapper-height", maxHeight + "px")
   }
-};
+}
 
 useResizeObserver(gridWrapper, () => {
-  updateGrid();
-});
+  updateGrid()
+})
 
 watch(
   () => fixedWidth.value,
   () => {
-    updateGrid();
+    updateGrid()
   }
-);
+)
 
 watch(
   () => props.styleClassPassthrough,
   () => {
-    resetElementClasses(props.styleClassPassthrough);
+    resetElementClasses(props.styleClassPassthrough)
   }
-);
+)
 </script>
 
 <style scoped lang="css">
@@ -142,7 +144,8 @@ watch(
     }
 
     .masonry-grid-ordered-item {
-      transition: position var(--_transition-duration) ease, top var(--_transition-duration) ease, left var(--_transition-duration) ease;
+      transition: position var(--_transition-duration) ease, top var(--_transition-duration) ease,
+        left var(--_transition-duration) ease;
 
       position: var(--_position);
       top: var(--_position-top);

package/app/components/responsive-header/NavigationItems.vue

@@ -13,7 +13,10 @@
           v-if="link.path"
           class="overflow-navigation-item"
           :class="{ visible: !mainNavigationState.clonedNavLinks?.[groupKey]?.[localIndex]?.config?.visible }"
-          :style="{ '--_main-navigation-item-width': mainNavigationState.clonedNavLinks?.[groupKey]?.[localIndex]?.config?.width + 'px' }"
+          :style="{
+            '--_main-navigation-item-width':
+              mainNavigationState.clonedNavLinks?.[groupKey]?.[localIndex]?.config?.width + 'px',
+          }"
           :data-group-key="groupKey"
           :data-local-index="localIndex"
           role="none"
@@ -26,28 +29,41 @@
           v-else
           class="overflow-navigation-item"
           :class="{ visible: !mainNavigationState.clonedNavLinks?.[groupKey]?.[localIndex]?.config?.visible }"
-          :style="{ '--_main-navigation-item-width': mainNavigationState.clonedNavLinks?.[groupKey]?.[localIndex]?.config?.width + 'px' }"
+          :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()"
+          <ExpandingPanel
             name="overflow-navigation-group"
             :animation-duration="detailsAanimationDuration"
             icon-size="medium"
             :style-class-passthrough="['overflow-navigation-details']"
           >
             <template #summary>
-              <span class="overflow-navigation-text" :aria-label="`${link.childLinksTitle} submenu`" role="menuitem" :aria-haspopup="true">{{ link.childLinksTitle }}</span>
+              <span
+                class="overflow-navigation-text"
+                :aria-label="`${link.childLinksTitle} submenu`"
+                role="menuitem"
+                :aria-haspopup="true"
+              >
+                {{ link.childLinksTitle }}
+              </span>
             </template>
-            <template #summaryIcon>
+            <template #icon>
               <Icon name="mdi:chevron-down" class="icon" :aria-hidden="true" />
             </template>
-            <template #layout-content>
+            <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">
+                  <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" role="menuitem">
                       <span class="overflow-navigation-sub-nav-text">{{ childLink.name }}</span>
                     </NuxtLink>
@@ -55,7 +71,7 @@
                 </ul>
               </div>
             </template>
-          </DisplayDetailsCore>
+          </ExpandingPanel>
         </li>
       </template>
     </ul>
@@ -63,7 +79,7 @@
 </template>
 
 <script setup lang="ts">
-import type { ResponsiveHeaderState } from '@/types/responsiveHeader';
+import type { ResponsiveHeaderState } from "@/types/responsiveHeader"
 
 const props = defineProps({
   mainNavigationState: {
@@ -74,32 +90,35 @@ const props = defineProps({
     type: Array as PropType<string[]>,
     default: () => [],
   },
-});
+})
 
-const detailsAanimationDuration = 200;
-const detailsAanimationDurationString = `${detailsAanimationDuration}ms`;
+const detailsAanimationDuration = 200
+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));
-  }, 0);
-});
+    return Math.max(maxWidth, ...group.map((link) => link.config?.width || 0))
+  }, 0)
+})
 
-const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 
 watch(
   () => props.styleClassPassthrough,
   () => {
-    resetElementClasses(props.styleClassPassthrough);
+    resetElementClasses(props.styleClassPassthrough)
   }
-);
+)
 </script>
 
 <style lang="css">
 .overflow-navigation-wrapper {
+  --overflow-nav-padding-inline: 0.8rem;
+  --overflow-nav-items-gap: 0px;
+  --overflow-nav-items-padding-block: 0.8rem;
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: var(--overflow-nav-items-gap);
 
   .overflow-navigation-list {
     display: none;
@@ -107,7 +126,7 @@ watch(
     &.visible {
       display: flex;
       flex-direction: column;
-      gap: 12px;
+      gap: var(--overflow-nav-items-gap);
       min-width: var(--_overflow-navigation-list-min-width, auto);
     }
 
@@ -121,41 +140,72 @@ watch(
       .overflow-navigation-link {
         text-decoration: none;
         color: inherit;
+        padding-block: var(--overflow-nav-items-padding-block);
+        padding-inline: var(--overflow-nav-padding-inline);
+        display: flex;
+        /* background-color: red; */
+        border-bottom: 0.1rem solid #efefef75;
       }
 
       .overflow-navigation-details {
-        --_overflow-navigation-sub-nav-list-margin-block-start: 0;
-
-        &[open] {
-          --_overflow-navigation-sub-nav-list-margin-block-start: 12px;
-        }
-
-        &.display-details {
+        &.expanding-panel {
           margin-block-end: 0;
 
-          .display-details-summary {
-            .label {
-              .overflow-navigation-text {
-                text-wrap: nowrap;
+          .expanding-panel-details {
+            .expanding-panel-summary {
+              padding-block: var(--overflow-nav-items-padding-block);
+              padding-inline: var(--overflow-nav-padding-inline);
+              gap: 1rem;
+              /* background-color: red; */
+              border-bottom: 0.1rem solid #efefef75;
+
+              .label-wrapper {
+                .overflow-navigation-text {
+                  text-wrap: nowrap;
+                }
+              }
+              .icon-wrapper {
+                padding: 0;
+              }
+            }
+
+            &[open] {
+              .expanding-panel-summary {
+                border-bottom: 0.1rem solid transparent;
+              }
+              + .expanding-panel-content {
+                border-bottom: 0.1rem solid #efefef75;
+                .inner {
+                  .overflow-navigation-sub-nav-inner {
+                    margin-top: var(--overflow-nav-items-gap);
+                  }
+                }
               }
             }
-            /* .icon {} */
           }
-          .display-details-content {
-            .overflow-navigation-sub-nav-inner {
-              .overflow-navigation-sub-nav-list {
-                display: flex;
-                flex-direction: column;
-                gap: 12px;
-                margin-block-start: var(--_overflow-navigation-sub-nav-list-margin-block-start);
-                transition: margin-block-start v-bind(detailsAanimationDurationString) ease;
-
-                .overflow-navigation-sub-nav-item {
-                  .overflow-navigation-sub-nav-link {
-                    text-decoration: none;
-                    color: inherit;
-
-                    /* .overflow-navigation-sub-nav-text {} */
+
+          .expanding-panel-content {
+            border-bottom: 0.1rem solid transparent;
+
+            .inner {
+              margin-top: 0;
+
+              .overflow-navigation-sub-nav-inner {
+                margin-top: 0;
+
+                .overflow-navigation-sub-nav-list {
+                  display: flex;
+                  flex-direction: column;
+                  gap: 2px;
+
+                  .overflow-navigation-sub-nav-item {
+                    padding-block: var(--overflow-nav-items-padding-block);
+                    padding-inline: var(--overflow-nav-padding-inline);
+
+                    .overflow-navigation-sub-nav-link {
+                      text-decoration: none;
+                      color: inherit;
+                    }
                   }
                 }
               }

package/app/components/responsive-header/ResponsiveHeader.vue

@@ -696,7 +696,7 @@ watch(
         background-color: #000;
         border: 1px solid #ffffff90;
         border-radius: 8px;
-        padding: 12px;
+        padding-block: 12px;
         margin: 0;
         z-index: 999;
         min-width: var(--_overflow-drop-down-width, fit-content);

package/nuxt.config.ts

@@ -1,7 +1,7 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   devtools: { enabled: true },
-  css: ["modern-normalize", "./app/assets/styles/main.css"],
+  // css: ["modern-normalize", "./app/assets/styles/main.css"],
   modules: ["@nuxt/eslint", "@nuxt/icon", "@nuxt/image"],
   app: {
     head: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "6.1.2",
+  "version": "6.1.4",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",
@@ -24,6 +24,7 @@
   "devDependencies": {
     "@iconify-json/akar-icons": "1.2.7",
     "@iconify-json/bitcoin-icons": "1.2.4",
+    "@iconify-json/material-symbols": "^1.2.33",
     "@nuxt/eslint": "1.8.0",
     "@nuxt/icon": "2.0.0",
     "@nuxt/image": "1.11.0",
@@ -35,8 +36,7 @@
     "typescript": "5.9.2"
   },
   "dependencies": {
-    "focus-trap-vue": "4.0.3",
-    "modern-normalize": "3.0.1"
+    "focus-trap-vue": "4.0.3"
   },
   "release-it": {
     "$schema": "https://unpkg.com/release-it/schema/release-it.json",

package/app/assets/styles/extends-layer/srcdev-components/components/_display-prompt-core.css

@@ -1,72 +0,0 @@
-.srcdev-components-extended {
-  .display-prompt-core {
-    .display-prompt-wrapper {
-      background-color: var(--component-theme-10);
-      border: 1px solid var(--component-theme-8);
-      border-inline-start: 8px solid var(--component-theme-8);
-      border-radius: 4px;
-      border-start-start-radius: 8px;
-      border-end-start-radius: 8px;
-
-      .display-prompt-inner {
-        align-items: center;
-        gap: 12px;
-        padding-block: 1rem;
-        padding-inline: 1.5rem;
-
-        .display-prompt-icon {
-          .icon {
-            color: var(--component-theme-0);
-            font-size: 3rem;
-            font-style: normal;
-            font-weight: normal;
-          }
-        }
-
-        .display-prompt-content {
-          gap: 1rem;
-          margin: 0;
-          padding: 0.2rem;
-
-          .title {
-            font-size: var(--step-5);
-            font-weight: bold;
-            line-height: 1.3;
-            color: var(--component-theme-0);
-            margin: 0;
-            padding: 0;
-          }
-
-          .text {
-            font-size: var(--step-5);
-            font-weight: normal;
-            line-height: 1.3;
-            color: var(--component-theme-0);
-            margin: 0;
-            padding: 0;
-          }
-        }
-        .display-prompt-action {
-          background-color: transparent;
-          align-items: center;
-          margin: 1rem;
-          padding: 0.5rem;
-          border: 0.1rem solid var(--component-theme-8);
-          border-radius: 50%;
-          outline: 1px solid var(--component-theme-3);
-
-          &:hover {
-            cursor: pointer;
-          }
-
-          .icon {
-            color: var(--component-theme-0);
-            font-size: var(--step-5);
-            border: 1px solid green;
-            padding: 1rem;
-          }
-        }
-      }
-    }
-  }
-}

package/app/assets/styles/extends-layer/srcdev-components/components/index.css

@@ -1 +0,0 @@
-@import './_display-prompt-core';

package/app/assets/styles/extends-layer/srcdev-components/index.css

@@ -1,2 +0,0 @@
-@import './setup';
-@import './components';

package/app/assets/styles/extends-layer/srcdev-components/setup/index.css

@@ -1 +0,0 @@
-@import './themes';

package/app/assets/styles/extends-layer/srcdev-components/setup/themes/_error.css

@@ -1,15 +0,0 @@
-[data-component-theme='error'] {
-  --component-theme-0: var(--red-0);
-  --component-theme-1: var(--red-1);
-  --component-theme-2: var(--red-2);
-  --component-theme-3: var(--red-3);
-  --component-theme-4: var(--red-4);
-  --component-theme-5: var(--red-5);
-  --component-theme-6: var(--red-6);
-  --component-theme-7: var(--red-7);
-  --component-theme-8: var(--red-8);
-  --component-theme-9: var(--red-9);
-  --component-theme-10: var(--red-10);
-  --component-theme-11: var(--red-11);
-  --component-theme-12: var(--red-12);
-}

package/app/assets/styles/extends-layer/srcdev-components/setup/themes/_info.css

@@ -1,15 +0,0 @@
-[data-component-theme='info'] {
-  --component-theme-0: var(--blue-0);
-  --component-theme-1: var(--blue-1);
-  --component-theme-2: var(--blue-2);
-  --component-theme-3: var(--blue-3);
-  --component-theme-4: var(--blue-4);
-  --component-theme-5: var(--blue-5);
-  --component-theme-6: var(--blue-6);
-  --component-theme-7: var(--blue-7);
-  --component-theme-8: var(--blue-8);
-  --component-theme-9: var(--blue-9);
-  --component-theme-10: var(--blue-10);
-  --component-theme-11: var(--blue-11);
-  --component-theme-12: var(--blue-12);
-}

package/app/assets/styles/extends-layer/srcdev-components/setup/themes/_secondary.css

@@ -1,15 +0,0 @@
-[data-component-theme='secondary'] {
-  --component-theme-0: var(--gray-0);
-  --component-theme-1: var(--gray-1);
-  --component-theme-2: var(--gray-2);
-  --component-theme-3: var(--gray-3);
-  --component-theme-4: var(--gray-4);
-  --component-theme-5: var(--gray-5);
-  --component-theme-6: var(--gray-6);
-  --component-theme-7: var(--gray-7);
-  --component-theme-8: var(--gray-8);
-  --component-theme-9: var(--gray-9);
-  --component-theme-10: var(--gray-10);
-  --component-theme-11: var(--gray-11);
-  --component-theme-12: var(--gray-12);
-}

package/app/assets/styles/extends-layer/srcdev-components/setup/themes/_success.css

@@ -1,15 +0,0 @@
-[data-component-theme='success'] {
-  --component-theme-0: var(--green-0);
-  --component-theme-1: var(--green-1);
-  --component-theme-2: var(--green-2);
-  --component-theme-3: var(--green-3);
-  --component-theme-4: var(--green-4);
-  --component-theme-5: var(--green-5);
-  --component-theme-6: var(--green-6);
-  --component-theme-7: var(--green-7);
-  --component-theme-8: var(--green-8);
-  --component-theme-9: var(--green-9);
-  --component-theme-10: var(--green-10);
-  --component-theme-11: var(--green-11);
-  --component-theme-12: var(--green-12);
-}

package/app/assets/styles/extends-layer/srcdev-components/setup/themes/_warning.css

@@ -1,15 +0,0 @@
-[data-component-theme='warning'] {
-  --component-theme-0: var(--orange-0);
-  --component-theme-1: var(--orange-1);
-  --component-theme-2: var(--orange-2);
-  --component-theme-3: var(--orange-3);
-  --component-theme-4: var(--orange-4);
-  --component-theme-5: var(--orange-5);
-  --component-theme-6: var(--orange-6);
-  --component-theme-7: var(--orange-7);
-  --component-theme-8: var(--orange-8);
-  --component-theme-9: var(--orange-9);
-  --component-theme-10: var(--orange-10);
-  --component-theme-11: var(--orange-11);
-  --component-theme-12: var(--orange-12);
-}

package/app/assets/styles/extends-layer/srcdev-components/setup/themes/index.css

@@ -1,5 +0,0 @@
-@import './_error';
-@import './_success';
-@import './_warning';
-@import './_info';
-@import './_secondary';

package/app/assets/styles/main.css

@@ -1,2 +0,0 @@
-@import './setup/';
-@import './extends-layer/srcdev-components/';

package/app/assets/styles/setup/_head.css

@@ -1,36 +0,0 @@
-:root {
-  /* --font-family: futura-pt, Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif; */
-  /* --font-family: Poppins, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; */
-
-  --font-family: 'Quicksand', futura-pt, Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
-}
-
-html {
-  color-scheme: light dark;
-
-  &[data-color-scheme='light'] {
-    color-scheme: light;
-  }
-
-  &[data-color-scheme='dark'] {
-    color-scheme: dark;
-  }
-
-  background-color: var(--page-bg);
-
-  font-size: 62.5%;
-
-  transition: background-color 0.4s ease, color 0.4s ease;
-  scrollbar-gutter: stable;
-
-  overflow-x: hidden;
-}
-body {
-  color: var(--grayscale-text-body);
-  font-family: var(--font-family);
-  font-size: var(--step-4);
-  min-height: 100vh;
-  transition: background-color 0.4s ease, color 0.4s ease;
-
-  overflow-x: hidden;
-}

package/app/assets/styles/setup/a11y/_utils.css

@@ -1,20 +0,0 @@
-.sr-only {
-  border-width: 0;
-  clip: rect(1px, 0.1rem, 0.1rem, 0.1rem);
-  clip-path: inset(50%);
-  height: 0.1rem;
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-  width: 0.1rem;
-}
-/* .sr-only {
-  position: absolute;
-  width: 0.1rem;
-  height: 0.1rem;
-  padding: 0;
-  margin: -0.1rem;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-} */

package/app/assets/styles/setup/a11y/_variables.css

@@ -1,8 +0,0 @@
-:root {
-  --focus-box-shadow-colour-off: transparent;
-  --focus-box-shadow-colour-on: light-dark(var(--blue-12), var(--gray-0));
-  --form-focus-box-shadow: 0 0 0 0.3rem;
-
-  --box-shadow-off: 0 0 0 0.3rem transparent;
-  --box-shadow-on: 0 0 0 0.3rem light-dark(var(--blue-12), var(--gray-0));
-}

package/app/assets/styles/setup/a11y/index.css

@@ -1,2 +0,0 @@
-@import './_variables.css';
-@import './_utils.css';