srcdev-nuxt-components 9.4.3 → 9.4.5

package/app/components/canvas-switcher/CanvasSwitcher.vue

@@ -1,104 +0,0 @@
-<template>
-  <div class="canvas-switcher">
-    <p>Canvas switcher</p>
-    <ul class="canvas-switcher mbe-20">
-      <li>
-        <button type="button" @click.stop.prevent="updateCanvas('mobileCanvas')">
-          <Icon name="ic:baseline-phone-iphone" class="icon" :class="[{ current: canvasName === 'mobileCanvas' }]" />
-        </button>
-      </li>
-      <li>
-        <button type="button" @click.stop.prevent="updateCanvas('tabletCanvas')">
-          <Icon name="ic:baseline-tablet-mac" class="icon" :class="[{ current: canvasName === 'tabletCanvas' }]" />
-        </button>
-      </li>
-      <li>
-        <button type="button" @click.stop.prevent="updateCanvas('laptopCanvas')">
-          <Icon name="ic:baseline-laptop-mac" class="icon" :class="[{ current: canvasName === 'laptopCanvas' }]" />
-        </button>
-      </li>
-      <li>
-        <button type="button" @click.stop.prevent="updateCanvas('desktopCanvas')">
-          <Icon name="ic:outline-desktop-mac" class="icon" :class="[{ current: canvasName === 'desktopCanvas' }]" />
-        </button>
-      </li>
-      <li>
-        <button type="button" @click.stop.prevent="updateCanvas('fullWidthCanvas')">
-          <Icon
-            name="pixelarticons:viewport-wide"
-            class="icon"
-            :class="[{ current: canvasName === 'fullWidthCanvas' }]"
-          />
-        </button>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { MediaCanvas } from "../../types/components";
-
-const canvasName = defineModel<MediaCanvas>("canvasName");
-
-const updateCanvas = (setCanvas: MediaCanvas) => {
-  canvasName.value = setCanvas;
-};
-</script>
-
-<style lang="css">
-@layer components {
-.canvas-switcher {
-  display: flex;
-  align-items: center;
-  gap: 20px;
-
-  ul {
-    display: flex;
-    gap: 10px;
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-
-    li {
-      button {
-        all: unset;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        padding: 5px;
-        border: 0px solid light-dark(var(--slate-10), var(--slate-02));
-        border-radius: 4px;
-        cursor: pointer;
-
-        .icon {
-          color: light-dark(var(--slate-10), var(--slate-02));
-
-          width: 24px;
-          height: 24px;
-
-          &.current {
-            color: light-dark(var(--green-10), var(--green-04));
-          }
-        }
-      }
-    }
-  }
-}
-
-.mobileCanvas {
-  max-width: 412px;
-}
-.tabletCanvas {
-  max-width: 768px;
-}
-.laptopCanvas {
-  max-width: 1064px;
-}
-.desktopCanvas {
-  max-width: 1280px;
-}
-.fullWidthCanvas {
-  max-width: unset;
-}
-}
-</style>

package/app/components/clipped-panels/ClippedPanel.vue

@@ -1,87 +0,0 @@
-<template>
-  <component :is="tag" class="clipped-panel" :class="[variant, elementClasses]">
-    <slot name="default"></slot>
-  </component>
-</template>
-
-<script setup lang="ts">
-const props = defineProps({
-  tag: {
-    type: String,
-    default: "div",
-    validator(value: string) {
-      return [
-        "div",
-        "p",
-        "span",
-        "section",
-        "article",
-        "aside",
-        "header",
-        "footer",
-        "main",
-        "nav",
-        "ul",
-        "ol",
-      ].includes(value)
-    },
-  },
-  variant: {
-    type: String,
-    default: "square",
-    validator(value: string) {
-      return ["circle-cutout", "rectangle", "square"].includes(value)
-    },
-  },
-  styleClassPassthrough: {
-    type: [String, Array] as PropType<string | string[]>,
-    default: () => [],
-  },
-})
-
-const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
-
-watch(
-  () => props.styleClassPassthrough,
-  () => {
-    resetElementClasses(props.styleClassPassthrough)
-  }
-)
-</script>
-
-<style lang="css">
-@layer components {
-.clipped-panel {
-  --_foreground-color: light-dark(hsl(0, 29%, 3%), hsl(0, 0%, 92%));
-
-  /* Component styles */
-
-  background-color: red;
-  /* color: var(--_foreground-color); */
-  outline: 1px solid var(--_foreground-color);
-  /* box-shadow: 5px 5px 5px 5px white; */
-
-  aspect-ratio: 1;
-
-  &.rectangle {
-    --_max-x-position: 300px;
-    --_curve-radius: 10px;
-
-    clip-path: path(
-      "M 10, 50 L 140, 50 A 10, 10, 0, 0, 0 150, 40 L 150, 10 A 10, 10, 0, 0, 1 160, 0 L 290, 0 A 10, 10, 0, 0, 1 300, 10 L 300, 190 A 10, 10, 0, 0, 1 290, 200 L 10, 200 A 10, 10, 0, 0, 1 0, 190 L 0, 60 A 10, 10, 0, 0, 1 10, 50 Z"
-    );
-    width: 300px;
-  }
-  &.square {
-    /* clip-path: path('M 10, 50 L 90, 50 A 10, 10, 0, 0, 0 100, 40 L 100, 10 L 110, 0 L 190, 0 L 200, 10 L 200, 190 L 190, 200 L 10, 200 L 0, 190 L 0, 60 L 10, 50 Z'); */
-    clip-path: path(
-      "M 10, 50 L 90, 50 A 10, 10, 0, 0, 0 100, 40 L 100, 10 A 10, 10, 0, 0, 1 110, 0 L 190, 0 A 10, 10, 0, 0, 1 200, 10 L 200, 190 A 10, 10, 0, 0, 1 190, 200 L 10, 200 A 10, 10, 0, 0, 1 0, 190 L 0, 60 A 10, 10, 0, 0, 1 10, 50 Z"
-    );
-    width: 200px;
-  }
-  &.circle-cutout {
-    clip-path: path("M  Z");
-  }
-}
-}
-</style>

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>