srcdev-nuxt-components 6.0.0 → 6.1.0

package/app/components/masonry-grid-sorted/MasonryGridSorted.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="masonry-grid-wrapper" :class="[elementClasses]" :style="`--_masonry-grid-gap: ${gap}${unit}; --_item-min-width: ${itemMinWidth}px`" ref="gridWrapper">
+    <template v-for="item in rearrangedItems" :key="item.id">
+      <div class="masonry-grid-item">
+        <slot :name="item.id"></slot>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useResizeObserver } from '@vueuse/core';
+
+const props = defineProps({
+  gridData: {
+    type: Array as PropType<any[]>,
+    default: () => [],
+  },
+  itemMinWidth: {
+    type: Number,
+    default: 300,
+  },
+  gap: {
+    type: Number,
+    default: 1.2,
+  },
+  unit: {
+    type: String,
+    default: 'rem',
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+});
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+const gridData = toRef(() => props.gridData);
+
+const gridWrapper = ref<HTMLDivElement>();
+
+const getColumnCountWithinGridWrapper = () => {
+  return gridWrapper.value ? Math.floor(gridWrapper.value.clientWidth / props.itemMinWidth) : 0;
+};
+
+// const columns = ref(4);
+const columns = computed(() => {
+  return gridWrapper.value ? Math.floor(gridWrapper.value.clientWidth / props.itemMinWidth) : 0;
+});
+
+const rearrangeArray = (items: any[], columns: number): any[] => {
+  const rows = Math.ceil(items.length / columns);
+  const rearrangedArray = [];
+
+  for (let col = 0; col < columns; col++) {
+    for (let row = 0; row < rows; row++) {
+      const index = row * columns + col;
+      if (index < items.length) {
+        rearrangedArray.push(items[index]);
+      }
+    }
+  }
+
+  return rearrangedArray;
+};
+
+const rearrangedItems = computed(() => rearrangeArray(props.gridData, columns.value));
+// const rearrangedItems = computed(() => {
+//   const rows = Math.ceil(props.gridData.length / columns.value);
+//   const rearrangedArray = [];
+
+//   for (let col = 0; col < columns.value; col++) {
+//     for (let row = 0; row < rows; row++) {
+//       const index = row * columns.value + col;
+//       if (index < props.gridData.length) {
+//         rearrangedArray.push(props.gridData[index]);
+//       }
+//     }
+//   }
+
+//   return rearrangedArray;
+// });
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
+
+// onMounted(() => {
+//   console.log(getColumnCountWithinGridWrapper());
+// });
+
+// useResizeObserver(gridWrapper, () => {
+//   console.log(getColumnCountWithinGridWrapper());
+// });
+</script>
+
+<style lang="css">
+.masonry-grid-wrapper {
+  --_border-color: light-dark(hsl(0, 29%, 3%), hsl(0, 0%, 92%));
+
+  columns: var(--_item-min-width);
+  gap: var(--_masonry-grid-gap);
+
+  .masonry-grid-item {
+    break-inside: avoid;
+    outline: 0.1rem solid var(--_border-color);
+    padding: 1.2rem;
+    margin-block-end: var(--_masonry-grid-gap);
+  }
+}
+</style>

package/app/components/pop-over/PopOver.vue

@@ -0,0 +1,88 @@
+<template>
+  <ClientOnly>
+    <button :popovertarget popovertargetaction="toggle" class="popover-trigger" :class="[elementClasses]">
+      <slot name="trigger"></slot>
+    </button>
+
+    <div class="dialog" popover role="tooltip" :id="popovertarget" :class="[elementClasses]">
+      <button :popovertarget popovertargetaction="hide">x</button>
+      <slot name="popoverCotent"></slot>
+    </div>
+  </ClientOnly>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  popovertarget: {
+    type: String,
+    required: true,
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+});
+
+const anchorName = `--anchor-${useId()}`;
+
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+</script>
+
+<style scoped lang="css">
+@layer popover-setup {
+  /* @position-try --right {
+    inset: auto;
+    top: anchor(top);
+    left: calc(anchor(right) + 10px);
+  }
+
+  @position-try --left {
+    inset: auto;
+    top: anchor(top);
+    right: calc(anchor(left) + 10px);
+  } */
+
+  .popover-trigger {
+    anchor-name: v-bind(anchorName);
+  }
+
+  .dialog {
+    display: none;
+    position: absolute;
+    position-anchor: v-bind(anchorName);
+    margin: 0;
+    inset: auto;
+    top: calc(anchor(top) + 0px);
+    left: calc(anchor(right) + 10px);
+    opacity: 0;
+    transition: opacity 200ms, display 200ms, overlay 200ms;
+    transition-behavior: allow-discrete;
+
+    position-try-fallbacks: flip-inline;
+
+    &:popover-open {
+      display: block;
+      opacity: 1;
+
+      @starting-style {
+        display: block;
+        opacity: 0;
+      }
+    }
+  }
+
+  @position-try --top-left {
+    top: anchor(top);
+    right: calc(anchor(left + 10px));
+    left: unset;
+    /* width: revert; */
+  }
+
+  @position-try --bottom-right {
+    top: anchor(bottom);
+    /* right: calc(anchor(left + 10px)); */
+    /* left: unset; */
+    /* width: revert; */
+  }
+}
+</style>

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

@@ -0,0 +1,169 @@
+<template>
+  <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] }]"
+      :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 }"
+          :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" 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 }"
+          :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']"
+          >
+            <template #summary>
+              <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" :aria-hidden="true" />
+            </template>
+            <template #layout-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" role="menuitem">
+                      <span class="overflow-navigation-sub-nav-text">{{ childLink.name }}</span>
+                    </NuxtLink>
+                  </li>
+                </ul>
+              </div>
+            </template>
+          </DisplayDetailsCore>
+        </li>
+      </template>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ResponsiveHeaderState } from '@/types/responsiveHeader';
+
+const props = defineProps({
+  mainNavigationState: {
+    type: Object as PropType<ResponsiveHeaderState>,
+    default: () => [],
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+});
+
+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);
+});
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
+</script>
+
+<style lang="css">
+.overflow-navigation-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+
+  .overflow-navigation-list {
+    display: none;
+
+    &.visible {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      min-width: var(--_overflow-navigation-list-min-width, auto);
+    }
+
+    .overflow-navigation-item {
+      display: none;
+
+      &.visible {
+        display: block;
+      }
+
+      .overflow-navigation-link {
+        text-decoration: none;
+        color: inherit;
+      }
+
+      .overflow-navigation-details {
+        --_overflow-navigation-sub-nav-list-margin-block-start: 0;
+
+        &[open] {
+          --_overflow-navigation-sub-nav-list-margin-block-start: 12px;
+        }
+
+        &.display-details {
+          margin-block-end: 0;
+
+          .display-details-summary {
+            .label {
+              .overflow-navigation-text {
+                text-wrap: nowrap;
+              }
+            }
+            /* .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 {} */
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>