srcdev-nuxt-components 9.4.4 → 9.4.5

package/app/components/deep-expanding-menu/DeepExpandingMenuOld.vue

@@ -1,218 +0,0 @@
-<template>
-  <component :is="tag" class="deep-expanding-menu-old" :class="[elementClasses]">
-    <div class="inner">
-      <template v-for="(link, key) in navLinks" :key="key">
-        <NuxtLink v-if="link.path" :to="link.path" class="navigation-link">{{ link.name }}</NuxtLink>
-        <details v-else ref="navigationGroupRef" class="navigation-group" name="navigation-group">
-          <summary class="navigation-group-toggle">
-            <span>{{ link.name }}</span>
-            <Icon name="bi:caret-down-fill" class="icon" />
-          </summary>
-          <div :id="`popovertarget-nav-1-${key}`" class="navigation-group-panel">
-            <h4 class="page-heading-4 mb-6">{{ link.childLinksTitle }}</h4>
-            <ul class="navigation-group-list">
-              <li v-for="childLink in link.childLinks" :key="childLink.name" class="navigation-group-item">
-                <NuxtLink :to="childLink.path" class="navigation-group-link">{{ childLink.name }}</NuxtLink>
-              </li>
-            </ul>
-          </div>
-        </details>
-      </template>
-    </div>
-  </component>
-</template>
-
-<script setup lang="ts">
-import { onClickOutside } from "@vueuse/core";
-
-const props = defineProps({
-  tag: {
-    type: String,
-    default: "nav",
-    validator(value: string) {
-      return ["div", "section", "nav", "ul", "ol"].includes(value);
-    },
-  },
-  navLinks: {
-    type: Array as PropType<ResponsiveHeaderNavItem[]>,
-    default: () => [],
-  },
-  styleClassPassthrough: {
-    type: [String, Array] as PropType<string | string[]>,
-    default: () => [],
-  },
-});
-
-const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
-
-const navigationGroupRef = useTemplateRef<HTMLElement[]>("navigationGroupRef");
-
-watch(
-  () => props.styleClassPassthrough,
-  () => {
-    resetElementClasses(props.styleClassPassthrough);
-  }
-);
-
-onMounted(() => {
-  navigationGroupRef.value?.forEach((element, index) => {
-    onClickOutside(element, () => {
-      navigationGroupRef.value?.[index]?.removeAttribute("open");
-    });
-  });
-});
-</script>
-
-<script lang="ts">
-interface ResponsiveHeaderNavItem {
-  name: string;
-  path?: string;
-  isExternal?: boolean;
-  childLinksTitle?: string;
-  childLinks?: ResponsiveHeaderNavItem[];
-}
-</script>
-
-<style lang="css">
-@layer components {
-@layer popover-setup {
-  .deep-expanding-menu-old {
-    container-type: inline-size;
-    display: grid;
-    grid-template-areas: "element-stack";
-    align-items: center;
-    gap: 12px;
-
-    .inner {
-      grid-area: element-stack;
-      display: flex;
-      gap: 24px;
-      align-items: center;
-      z-index: 1;
-
-      .navigation-link,
-      .navigation-group-toggle {
-        all: unset;
-        border-bottom: 2px solid transparent;
-        padding-block: 8px;
-
-        transition: border-color 200ms;
-
-        &:hover {
-          cursor: pointer;
-          border-color: light-dark(var(--blue-10), var(--slate-00));
-        }
-
-        &:focus {
-          border-color: light-dark(var(--blue-10), var(--slate-00));
-        }
-
-        &:focus-visible {
-          border-color: light-dark(var(--blue-10), var(--slate-00));
-        }
-      }
-
-      .navigation-group {
-        --_icon-transform: scaleY(1);
-
-        display: grid;
-        grid-template-areas: "details-stack";
-        z-index: 1;
-        position: relative;
-
-        summary::-webkit-details-marker,
-        summary::marker {
-          display: none;
-        }
-
-        &[open] {
-          --_icon-transform: scaleY(-1);
-        }
-
-        .navigation-group-toggle {
-          grid-area: details-stack;
-
-          display: flex !important;
-          align-items: center;
-          gap: 12px;
-          list-style: none;
-
-          .icon {
-            display: block;
-            font-size: 1.2rem;
-
-            transform: var(--_icon-transform);
-            transition: transform 200ms;
-          }
-        }
-
-        .navigation-group-panel {
-          background-color: black;
-          display: grid;
-          grid-area: details-stack;
-          z-index: 2;
-          position: absolute;
-          inset: auto;
-          top: 40px;
-          left: 0px;
-          gap: 12px;
-
-          width: 200px;
-
-          @media screen and (min-width: 768px) {
-            width: 400px;
-          }
-
-          @media screen and (min-width: 1024px) {
-            width: 600px;
-          }
-
-          background-color: white;
-          border: 1px solid black;
-          border-radius: 12px;
-          box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-          padding: 12px;
-          overflow: clip;
-
-          h4 {
-            color: var(--slate-10);
-          }
-
-          .navigation-group-list {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
-            gap: 12px;
-            padding-inline-start: 0;
-            margin-block-end: 8px;
-
-            .navigation-group-item {
-              display: block;
-
-              a.navigation-group-link {
-                display: inline-block;
-                color: var(--slate-10);
-                text-decoration: none;
-                padding-block: 8px;
-
-                border-bottom: 2px solid transparent;
-
-                transition: border-color 200ms;
-
-                &:hover {
-                  cursor: pointer;
-                  border-color: var(--slate-10);
-                }
-
-                &:focus-visible {
-                  border-color: var(--slate-10);
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-}
-</style>

package/app/components/display-details/DisplayDetailsCore.vue

@@ -1,122 +0,0 @@
-<template>
-  <details :name="name" class="display-details" :class="[elementClasses]" ref="detailsRef">
-    <summary class="display-details-summary" :id="triggerId" :aria-controls="contentId" ref="summaryRef">
-      <span class="label">
-        <slot name="summary"></slot>
-      </span>
-      <slot name="summaryIcon">
-        <Icon name="bi:caret-down-fill" class="icon" :class="iconSize" />
-      </slot>
-    </summary>
-    <div class="display-details-content" :aria-labelledby="triggerId" :id="contentId" role="region" ref="contentRef">
-      <div class="inner">
-        <slot name="details-content"></slot>
-      </div>
-    </div>
-  </details>
-</template>
-
-<script setup lang="ts">
-const props = defineProps({
-  name: {
-    type: String,
-    required: true,
-  },
-  id: {
-    type: String,
-    required: true,
-  },
-  iconSize: {
-    type: String,
-    default: "small",
-    validator(value: string) {
-      return ["small", "medium", "large"].includes(value)
-    },
-  },
-  styleClassPassthrough: {
-    type: [String, Array] as PropType<string | string[]>,
-    default: () => [],
-  },
-})
-
-const triggerId = computed(() => `${props.id}-trigger`)
-const contentId = computed(() => `${props.id}-content`)
-
-const { elementClasses, resetElementClasses, updateElementClasses } = useStyleClassPassthrough(
-  props.styleClassPassthrough
-)
-
-updateElementClasses([props.iconSize])
-
-const detailsRef = useTemplateRef<HTMLDetailsElement>("detailsRef")
-const summaryRef = useTemplateRef<HTMLElement | null>("summaryRef")
-const contentRef = useTemplateRef<HTMLDivElement | null>("contentRef")
-</script>
-
-<style lang="css">
-@layer components {
-.display-details {
-  border: none;
-  outline: none;
-  box-shadow: none;
-  border-radius: 0;
-
-  &[open] {
-    .display-details-summary {
-      .icon {
-        transform: scaleY(-1);
-      }
-    }
-    .display-details-content {
-      grid-template-rows: 1fr;
-      overflow: hidden;
-    }
-  }
-
-  .display-details-summary {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    flex-direction: row;
-    gap: 0;
-
-    list-style: none;
-
-    &::-webkit-details-marker,
-    &::marker {
-      display: none;
-    }
-
-    overflow: clip;
-
-    .label {
-      display: block;
-      flex-grow: 1;
-    }
-
-    .icon {
-      display: block;
-
-      transform: scaleY(1);
-
-      font-size: 1.2rem;
-      &.medium {
-        font-size: 1.8rem;
-      }
-      &.large {
-        font-size: 2.4rem;
-      }
-    }
-  }
-
-  .display-details-content {
-    display: grid;
-    grid-template-rows: 0;
-
-    .inner {
-      overflow: hidden;
-    }
-  }
-}
-}
-</style>

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

@@ -1,170 +0,0 @@
-<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 :id="tooltipId" ref="popover1" popover class="display-tooltip-popover">
-      <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">
-@layer components {
-.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-border);
-        outline: 1px solid var(--theme-ring);
-
-        font-weight: 600;
-        padding: 8px 12px;
-
-        &:hover,
-        &:focus {
-          text-decoration: underline;
-          border: 1px solid var(--theme-surface);
-          outline: 1px solid var(--theme-surface);
-          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

@@ -1,103 +0,0 @@
-<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">
-@layer components {
-.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>