srcdev-nuxt-components 9.4.9 → 9.4.10

package/app/components/layout-grids/LayoutGridB.vue

@@ -1,134 +0,0 @@
-<template>
-  <div class="layout-grid-b" :class="[elementClasses]">
-    <section class="top-row">
-      <div class="top-row-slot-1">
-        <div class="top-row-slot-1-inner">
-          <div v-for="key in topRowSlot1ItemCount" :key="key" class="panel">
-            <slot :name="`top-row-slot1-${key}-content`"></slot>
-          </div>
-        </div>
-      </div>
-
-      <div class="top-row-slot-2">
-        <div class="panel">
-          <slot name="top-row-slot-2"></slot>
-        </div>
-      </div>
-      <div class="top-row-slot-3">
-        <div class="panel">
-          <slot name="top-row-slot-3"></slot>
-        </div>
-      </div>
-    </section>
-
-    <section class="bottom-row">
-      <div v-for="key in bottomRowItemCount" :key="key" class="panel">
-        <slot :name="`bottom-row-${key}-content`"></slot>
-      </div>
-    </section>
-  </div>
-</template>
-
-<script setup lang="ts">
-const props = defineProps({
-  topRowSlot1ItemCount: {
-    type: Number as PropType<number>,
-    default: 6,
-  },
-  bottomRowItemCount: {
-    type: Number as PropType<number>,
-    default: 4,
-  },
-  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 {
-.layout-grid-b {
-  --_border-color: light-dark(hsl(0, 29%, 3%), hsl(0, 0%, 92%));
-  --_color: light-dark(hsl(0, 29%, 3%), hsl(0, 0%, 92%));
-  --_gap: 12px;
-
-  .panel {
-    border: 1px solid var(--_border-color);
-    border-radius: 12px;
-    padding: 12px;
-    height: auto;
-  }
-
-  container-type: inline-size;
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: var(--_gap);
-  width: 100%;
-  margin-inline: auto;
-
-  .top-row {
-    display: grid;
-    gap: var(--_gap);
-    width: 100%;
-
-    grid-template-columns: 1fr;
-    grid-template-areas:
-      "slot1"
-      "slot2"
-      "slot3";
-
-    @container (min-width: 1024px) {
-      grid-template-columns: 1fr minmax(460px, 33%);
-      grid-template-areas:
-        "slot1 slot2"
-        "slot3 slot2";
-    }
-  }
-
-  .top-row-slot-1 {
-    grid-area: slot1;
-    container-type: inline-size;
-
-    .top-row-slot-1-inner {
-      display: grid;
-      grid-template-columns: repeat(2, 1fr);
-
-      gap: var(--_gap);
-
-      @container (min-width: 680px) {
-        grid-template-columns: repeat(3, 1fr);
-      }
-
-      .panel {
-        display: grid;
-      }
-    }
-  }
-
-  .top-row-slot-2 {
-    grid-area: slot2;
-    display: grid;
-  }
-  .top-row-slot-3 {
-    grid-area: slot3;
-    display: grid;
-  }
-
-  .bottom-row {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: var(--_gap);
-  }
-}
-}
-</style>

package/app/components/test-storybook/TestStorybook.vue

@@ -1,49 +0,0 @@
-<template>
-  <div class="test-storybook" :class="[elementClasses]" :data-testid="props.dataTestid">
-    <PageRow tag="div" variant="full" :style-class-passthrough="['mbe-20']">
-      <h1>Test Storybook Component</h1>
-      <slot v-if="slots.titleSlot" name="titleSlot"></slot>
-      <div class="test-storybook__content">
-        <p>
-          <code>&lt;Icon name="mdi:star"&gt;</code>
-          NuxtIcon test
-        </p>
-        <Icon name="mdi:star" style="width: 48px; height: 48px; color: orange" />
-      </div>
-    </PageRow>
-  </div>
-</template>
-
-<script setup lang="ts">
-const props = defineProps({
-  dataTestid: {
-    type: String,
-    default: "test-storybook",
-  },
-  styleClassPassthrough: {
-    type: Array as PropType<string[]>,
-    default: () => [],
-  },
-});
-const slots = useSlots();
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
-</script>
-
-<style lang="css">
-@layer components {
-  .test-storybook {
-    border: 1px solid #ccc;
-    padding: 16px;
-    margin: 16px;
-    text-align: center;
-    .test-storybook__content {
-      display: grid;
-      grid-template-columns: auto 1fr;
-      gap: 24px;
-      border: 1px solid #ccc;
-      padding: 16px;
-      margin-top: 12px;
-    }
-  }
-}
-</style>

package/app/components/test-storybook/stories/TestStorybook.stories.ts

@@ -1,28 +0,0 @@
-import type { Meta, StoryFn } from "@nuxtjs/storybook"
-import StoryBookComponent from "../TestStorybook.vue"
-
-export default {
-  title: "Components/TestStorybook/TestStorybook",
-  component: StoryBookComponent,
-  args: {
-    styleClassPassthrough: ["test-storybook"],
-  },
-} as Meta<typeof StoryBookComponent>
-
-const Template: StoryFn<typeof StoryBookComponent> = (args) => ({
-  components: { StoryBookComponent },
-  setup() {
-    return { args }
-  },
-  template: `
-    <StoryBookComponent v-bind="args">
-      <template v-if="args.titleSlot" v-slot:titleSlot>{{ args.titleSlot }}</template>
-    </StoryBookComponent>
-  `,
-})
-
-export const TitleOnlyDismissable = Template.bind({})
-TitleOnlyDismissable.args = {
-  styleClassPassthrough: ["test-storybook--title-only-dismissable"],
-  titleSlot: "Title Slot Content",
-}

package/app/components/ui-block-decorated/UiBlockDecorated.vue

@@ -1,167 +0,0 @@
-<template>
-  <component
-    :is="tag"
-    class="ui-block-decorated"
-    :class="[
-      { ['border-' + borderStrength]: borderStrength > 0 },
-      { ['shadow-' + shadowStrength]: shadowStrength > 0 },
-      { ['inner-shadow-' + innerShadowStrength]: innerShadowStrength > 0 },
-      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)
-    },
-  },
-  borderStrength: {
-    type: Number,
-    default: 0,
-    validator(value: number) {
-      return value >= 0 && value <= 6
-    },
-  },
-  shadowStrength: {
-    type: Number,
-    default: 0,
-    validator(value: number) {
-      return value >= 0 && value <= 6
-    },
-  },
-  innerShadowStrength: {
-    type: Number,
-    default: 0,
-    validator(value: number) {
-      return value >= 0 && value <= 4
-    },
-  },
-  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 {
-.ui-block-decorated {
-  /* Component styles */
-}
-
-/*
-* Border utility classes
-*/
-.border-1 {
-  border: var(--border-1);
-}
-.border-2 {
-  border: var(--border-2);
-}
-.border-3 {
-  border: var(--border-3);
-}
-.border-4 {
-  border: var(--border-4);
-}
-.border-5 {
-  border: var(--border-5);
-}
-.border-6 {
-  border: var(--border-6);
-}
-/*
-* Shadow utility classes
-*/
-.shadow-1 {
-  box-shadow: var(--shadow-1);
-}
-
-.shadow-2 {
-  box-shadow: var(--shadow-2);
-}
-.shadow-3 {
-  box-shadow: var(--shadow-3);
-}
-.shadow-4 {
-  box-shadow: var(--shadow-4);
-}
-.shadow-5 {
-  box-shadow: var(--shadow-5);
-}
-.shadow-6 {
-  box-shadow: var(--shadow-6);
-}
-
-/*
-* Inner shadow utility classes
-* Could use substring match [class*="inner-shadow"] but not as performant
-*/
-
-.inner-shadow-1,
-.inner-shadow-2,
-.inner-shadow-3,
-.inner-shadow-4 {
-  position: relative;
-  isolation: isolate;
-}
-
-.inner-shadow-1::before,
-.inner-shadow-2::before,
-.inner-shadow-3::before,
-.inner-shadow-4::before {
-  content: "";
-  display: block;
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  border-radius: inherit;
-  z-index: 2;
-}
-
-.inner-shadow-1::before {
-  box-shadow: var(--inner-shadow-1), var(--inner-shadow-highlight);
-}
-
-.inner-shadow-2::before {
-  box-shadow: var(--inner-shadow-2), var(--inner-shadow-highlight);
-}
-
-.inner-shadow-3::before {
-  box-shadow: var(--inner-shadow-3), var(--inner-shadow-highlight);
-}
-
-.inner-shadow-4::before {
-  box-shadow: var(--inner-shadow-4), var(--inner-shadow-highlight);
-}
-}
-</style>

package/app/components/view-timeline/WipeAwayVertical.vue

@@ -1,180 +0,0 @@
-<template>
-  <component
-    :is="tag"
-    class="wipe-away-vertical"
-    :class="[elementClasses]"
-    :style="{ 'timeline-scope': timelineScope }"
-    ref="scrollContainerRef"
-  >
-    <div ref="stickyItemsContainerRef" class="sticky-items-container">
-      <div
-        class="sticky-item"
-        v-for="(item, key) in itemCount"
-        :key="key"
-        :style="{
-          'animation-timeline': key === itemCount - 1 ? 'none' : `--section-${timelineId}-${key}`,
-          'z-index': itemCount - key,
-        }"
-        ref="stickyItemsRef"
-      >
-        <slot :name="`stickyItem-${key}`"></slot>
-      </div>
-    </div>
-
-    <section
-      v-for="(item, key) in itemCount"
-      :key="key"
-      class="scrolling-section"
-      :style="{
-        'view-timeline-name': `--section-${timelineId}-${key}`,
-      }"
-      ref="scrollingItemsRef"
-    >
-      <slot :name="`scrollingItem-${key}`"></slot>
-    </section>
-  </component>
-</template>
-
-<script setup lang="ts">
-const props = defineProps({
-  tag: {
-    type: String as PropType<"div" | "section" | "main" | "article" | "aside">,
-    default: "div",
-    validator: (val: string) => ["div", "section", "main", "article", "aside"].includes(val),
-  },
-  itemCount: {
-    type: Number as PropType<number>,
-    default: 0,
-  },
-  styleClassPassthrough: {
-    type: [String, Array] as PropType<string | string[]>,
-    default: () => [],
-  },
-})
-
-const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
-
-const timelineId = useId()
-const stickyItemsContainerRef = useTemplateRef<HTMLElement | null>("stickyItemsContainerRef")
-const stickyItemsRef = useTemplateRef<HTMLElement[] | null>("stickyItemsRef")
-const scrollContainerRef = useTemplateRef<HTMLElement | null>("scrollContainerRef")
-const scrollingItemsRef = useTemplateRef<HTMLElement[] | null>("scrollingItemsRef")
-const timelineInset = ref("35% 35%")
-const topPercent = ref("0")
-const bottomPercent = ref("0")
-
-const timelineScope = computed(() =>
-  Array.from({ length: props.itemCount }, (_, i) => `--section-${timelineId}-${i}`).join(", ")
-)
-
-const calculateInset = () => {
-  if (!stickyItemsContainerRef.value) return
-
-  const rect = stickyItemsContainerRef.value.getBoundingClientRect()
-  const innerHeight = window.innerHeight
-
-  topPercent.value = ((rect.top / innerHeight) * 100).toFixed(2)
-  bottomPercent.value = (((innerHeight - rect.bottom) / innerHeight) * 100).toFixed(2)
-
-  timelineInset.value = `${topPercent.value}% ${bottomPercent.value}%`
-
-  if (!scrollContainerRef.value) return
-  scrollContainerRef.value.style.setProperty("--calculated-inset", timelineInset.value)
-}
-
-let requestAnimationFrameId: number | null = null
-const onScrollDebounce = () => {
-  if (requestAnimationFrameId !== null) return
-  requestAnimationFrameId = requestAnimationFrame(() => {
-    calculateInset()
-    requestAnimationFrameId = null
-  })
-}
-
-watch(
-  () => props.styleClassPassthrough,
-  () => {
-    resetElementClasses(props.styleClassPassthrough)
-  }
-)
-
-const fallbackScrollHandler = () => {
-  const sections = scrollingItemsRef.value || []
-  const layers = stickyItemsRef.value || []
-
-  const mid = window.innerHeight / 2
-
-  sections.forEach((section, i) => {
-    const rect = section.getBoundingClientRect()
-    const active = rect.top <= mid && rect.bottom >= mid
-    if (layers[i]) layers[i].style.opacity = active ? "1" : "0"
-  })
-}
-
-const supportsScrollTimeline = import.meta.client ? CSS.supports("animation-timeline: view()") : false
-
-onMounted(() => {
-  calculateInset()
-  if (supportsScrollTimeline) {
-    window.addEventListener("scroll", onScrollDebounce)
-  } else {
-    window.addEventListener("scroll", fallbackScrollHandler)
-  }
-})
-
-onUnmounted(() => {
-  if (supportsScrollTimeline) {
-    window.removeEventListener("scroll", onScrollDebounce)
-  } else {
-    window.removeEventListener("scroll", fallbackScrollHandler)
-  }
-})
-</script>
-
-<style lang="css">
-@layer components {
-.wipe-away-vertical {
-  .sticky-items-container {
-    position: sticky;
-    top: 50%;
-    left: 100%;
-    transform: translateY(-50%);
-
-    .sticky-item {
-      position: absolute;
-      inset: 0;
-      border-radius: 0.5rem;
-      width: 100%;
-    }
-  }
-
-  .scrolling-section {
-    view-timeline-axis: block;
-    view-timeline-inset: var(--calculated-inset);
-  }
-}
-
-@supports (animation-timeline: view()) {
-  @keyframes wipe-out {
-    0% {
-      clip-path: inset(0 0 0% 0);
-    }
-    100% {
-      clip-path: inset(0 0 100% 0);
-    }
-  }
-
-  .sticky-item {
-    animation: wipe-out 1s linear both;
-    animation-range: entry 0% entry 100%;
-  }
-}
-
-@supports not (animation-timeline: view()) {
-  .sticky-item {
-    opacity: 0;
-    transition: opacity 0.4s ease-in-out;
-  }
-}
-}
-</style>

package/app/types/components/carousel-basic.d.ts

@@ -1,19 +0,0 @@
-export interface CarouselBasicItem {
-  id: number | string
-  url: string
-  alt: string
-}
-
-export interface CarouselModifiedItem {
-  id: number | string
-  url: string
-  alt: string
-  order: number
-}
-
-export interface ICarouselBasic {
-  items: CarouselBasicItem[] | CarouselModifiedItem[]
-  total: number
-  skip: number
-  limit: number
-}