srcdev-nuxt-components 5.0.3 → 6.0.0

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

@@ -1,115 +0,0 @@
-<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/components/pop-over/PopOver.vue

@@ -1,88 +0,0 @@
-<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/components/responsive-header/NavigationItems.vue

@@ -1,169 +0,0 @@
-<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 #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>