srcdev-nuxt-components 6.1.3 → 6.1.4

package/app/components/carousel-basic/CarouselBasic.vue

@@ -1,11 +1,30 @@
 <template>
-  <section class="carousel-basic" :class="[elementClasses]" ref="carouselWrapperRef" role="region" aria-label="Image carousel">
+  <section
+    class="carousel-basic"
+    :class="[elementClasses]"
+    ref="carouselWrapperRef"
+    role="region"
+    aria-label="Image carousel"
+  >
     <!-- Screen reader announcement for current item -->
     <div aria-live="polite" aria-atomic="true" class="sr-only">Item {{ currentIndex + 1 }} of {{ itemCount }}</div>
 
     <LayoutRow tag="div" variant="full-width" :style-class-passthrough="['mbe-20']">
-      <div tabindex="0" class="item-container" :class="{ 'allow-overflow': allowCarouselOverflow }" ref="carouselContainerRef" role="group" aria-label="Carousel items">
-        <div v-for="(item, index) in carouselDataIds" :key="index" class="item" ref="carouselItems" :aria-current="currentIndex === index ? 'true' : 'false'">
+      <div
+        tabindex="0"
+        class="item-container"
+        :class="{ 'allow-overflow': allowCarouselOverflow }"
+        ref="carouselContainerRef"
+        role="group"
+        aria-label="Carousel items"
+      >
+        <div
+          v-for="(item, index) in carouselDataIds"
+          :key="index"
+          class="item"
+          ref="carouselItems"
+          :aria-current="currentIndex === index ? 'true' : 'false'"
+        >
           <slot :name="item"></slot>
         </div>
       </div>
@@ -24,7 +43,12 @@
         <div class="markers-container">
           <ul class="markers-list">
             <li v-for="index in itemCount" :key="index" class="markers-item">
-              <button @click.prevent="jumpToFrame(index - 1)" class="btn-marker" :class="[{ active: currentIndex === index - 1 }]" :aria-label="`Jump to item ${Math.floor(index + 1)}`"></button>
+              <button
+                @click.prevent="jumpToFrame(index - 1)"
+                class="btn-marker"
+                :class="[{ active: currentIndex === index - 1 }]"
+                :aria-label="`Jump to item ${Math.floor(index + 1)}`"
+              ></button>
             </li>
           </ul>
         </div>
@@ -42,7 +66,7 @@
 </template>
 
 <script setup lang="ts">
-import { useEventListener, useResizeObserver, useSwipe } from '@vueuse/core';
+import { useEventListener, useResizeObserver, useSwipe } from "@vueuse/core"
 
 const props = defineProps({
   carouselDataIds: {
@@ -65,108 +89,108 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-});
+})
 
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 
-const carouselWrapperRef = ref<HTMLDivElement | null>(null);
-const carouselContainerRef = ref<HTMLDivElement | null>(null);
-const carouselItemsRef = useTemplateRef<HTMLDivElement[]>('carouselItems');
-const controlsContainerRef = ref<HTMLDivElement | null>(null);
-const carouselInitComplete = ref(false);
+const carouselWrapperRef = ref<HTMLDivElement | null>(null)
+const carouselContainerRef = ref<HTMLDivElement | null>(null)
+const carouselItemsRef = useTemplateRef<HTMLDivElement[]>("carouselItems")
+const controlsContainerRef = ref<HTMLDivElement | null>(null)
+const carouselInitComplete = ref(false)
 
-const currentIndex = ref(0);
-const itemCount = ref(props.carouselDataIds.length);
-const offset = ref(0);
-const transitionSpeedStr = props.transitionSpeed + 'ms';
+const currentIndex = ref(0)
+const itemCount = ref(props.carouselDataIds.length)
+const offset = ref(0)
+const transitionSpeedStr = props.transitionSpeed + "ms"
 const itemTransform = computed(() => {
-  return `translateX(calc(${offset.value} * (${itemWidth.value} + var(--_carousel-item-track-gap))))`;
-});
+  return `translateX(calc(${offset.value} * (${itemWidth.value} + var(--_carousel-item-track-gap))))`
+})
 
-const itemWidth = ref('0px');
+const itemWidth = ref("0px")
 
 const actionPrevious = () => {
   if (props.returnToStart && currentIndex.value === 0) {
-    offset.value = -itemCount.value;
-    doAction();
+    offset.value = -itemCount.value
+    doAction()
   }
 
   if (offset.value >= 0) {
-    return;
+    return
   }
 
-  offset.value = Math.min(offset.value + 1);
-  doAction();
-};
+  offset.value = Math.min(offset.value + 1)
+  doAction()
+}
 
 const actionNext = () => {
   if (props.returnToStart && offset.value <= -1 * (itemCount.value - 1)) {
-    offset.value = 0;
-    doAction();
-    return;
+    offset.value = 0
+    doAction()
+    return
   }
 
   if (offset.value <= -1 * (itemCount.value - 1)) {
-    return;
+    return
   }
 
-  offset.value = Math.min(offset.value - 1);
-  doAction();
-};
+  offset.value = Math.min(offset.value - 1)
+  doAction()
+}
 
 const doAction = () => {
-  currentIndex.value = Math.abs(offset.value);
-};
+  currentIndex.value = Math.abs(offset.value)
+}
 
 const jumpToFrame = (index: number) => {
   if (index >= 0 && index < itemCount.value) {
-    offset.value = -index;
-    doAction();
+    offset.value = -index
+    doAction()
   }
-};
+}
 
 const initialSetup = () => {
   if (carouselItemsRef?.value && carouselItemsRef.value.length > 0 && carouselItemsRef.value[0]) {
-    itemWidth.value = carouselItemsRef.value[0].offsetWidth + 'px';
+    itemWidth.value = carouselItemsRef.value[0].offsetWidth + "px"
   }
 
-  carouselInitComplete.value = true;
-};
+  carouselInitComplete.value = true
+}
 
 const { direction } = useSwipe(carouselContainerRef, {
   passive: false,
   onSwipeEnd() {
-    if (direction.value === 'left') {
-      actionNext();
-    } else if (direction.value === 'right') {
-      actionPrevious();
+    if (direction.value === "left") {
+      actionNext()
+    } else if (direction.value === "right") {
+      actionPrevious()
     }
   },
-});
+})
 
-useEventListener(carouselContainerRef, 'keydown', (event: KeyboardEvent) => {
-  if (event.key === 'ArrowLeft') {
-    actionPrevious();
-  } else if (event.key === 'ArrowRight') {
-    actionNext();
+useEventListener(carouselContainerRef, "keydown", (event: KeyboardEvent) => {
+  if (event.key === "ArrowLeft") {
+    actionPrevious()
+  } else if (event.key === "ArrowRight") {
+    actionNext()
   }
-});
+})
 
-useEventListener(controlsContainerRef, 'keydown', (event: KeyboardEvent) => {
-  if (event.key === 'ArrowLeft') {
-    actionPrevious();
-  } else if (event.key === 'ArrowRight') {
-    actionNext();
+useEventListener(controlsContainerRef, "keydown", (event: KeyboardEvent) => {
+  if (event.key === "ArrowLeft") {
+    actionPrevious()
+  } else if (event.key === "ArrowRight") {
+    actionNext()
   }
-});
+})
 
 useResizeObserver(carouselWrapperRef, async () => {
-  initialSetup();
-});
+  initialSetup()
+})
 
 onMounted(() => {
-  initialSetup();
-});
+  initialSetup()
+})
 </script>
 
 <style lang="css">
@@ -203,7 +227,7 @@ onMounted(() => {
       position: relative;
 
       &::before {
-        content: '';
+        content: "";
         position: absolute;
         height: 2px;
         background-color: #fff;

package/app/components/marquee-scroller/MarqueeScroller.vue

@@ -0,0 +1,122 @@
+<template>
+  <div v-if="displayComponent" class="marquee-scroller" :reverse>
+    <ul class="list">
+      <li v-for="item in marqueeData" :key="item.id" class="item" :style="{ '--position': item.id }">
+        <slot :name="item.id"></slot>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  animationRuntime: {
+    type: String,
+    default: "40s",
+  },
+  reverse: {
+    type: Boolean,
+    default: false,
+  },
+  marqueeData: {
+    type: Array as PropType<Array<{ id: number; content: string }>>,
+    default: () => [],
+  },
+  itemConfig: {
+    type: Object,
+    default: () => ({
+      width: "50px",
+      height: "50px",
+      quantity: 30,
+    }),
+    required: true,
+  },
+})
+
+const displayComponent = ref(false)
+
+const height = computed(() => props.itemConfig.height)
+const quantity = computed(() => props.itemConfig.quantity)
+const width = computed(() => props.itemConfig.width)
+
+const animationRuntimeNumber = computed(() => {
+  const [seconds] = props.animationRuntime.split("s")
+  return parseFloat(seconds ?? "0")
+})
+
+const animationDelay = computed(() => {
+  return Math.floor(animationRuntimeNumber.value * 1.25) + "s"
+})
+
+onMounted(() => {
+  console.log(`Mounted: quantity(${quantity.value}) | animationDelay(${animationDelay.value})`)
+  displayComponent.value = true
+})
+</script>
+
+<style lang="css">
+.marquee-scroller {
+  width: 100%;
+  height: v-bind(height);
+  overflow: hidden;
+  mask-image: linear-gradient(to right, transparent, #000 10% 90%, transparent);
+
+  &:hover .item {
+    animation-play-state: paused !important;
+    filter: grayscale(1);
+  }
+
+  &[reverse="true"] .item {
+    animation: reversePlay v-bind(animationRuntime) linear infinite;
+  }
+
+  .list {
+    display: flex;
+    width: 100%;
+    height: v-bind(height);
+    min-width: calc(v-bind(width) * v-bind(quantity));
+    position: relative;
+
+    .item {
+      width: v-bind(width);
+      height: v-bind(height);
+      display: grid;
+      place-items: center;
+      position: absolute;
+      aspect-ratio: 1 / 1;
+      left: 100%;
+      animation: autoRun v-bind(animationRuntime) linear infinite;
+      transition: filter 0.5s;
+      /* animation-delay: calc((50s / v-bind(quantity)) * (var(--position) - 1) - 50s) !important; */
+      animation-delay: calc(
+        (v-bind(animationDelay) / v-bind(quantity)) * (var(--position) - 1) - v-bind(animationDelay)
+      ) !important;
+
+      border: 1px solid light-dark(var(--gray-12), var(--gray-0));
+      border-radius: 4px;
+
+      &:hover {
+        filter: grayscale(0);
+      }
+    }
+  }
+}
+
+@keyframes autoRun {
+  from {
+    left: 100%;
+  }
+  to {
+    left: calc(v-bind(width) * -1);
+  }
+}
+
+@keyframes reversePlay {
+  from {
+    left: calc(v-bind(width) * -1);
+  }
+  to {
+    left: 100%;
+  }
+}
+</style>

package/app/components/masonry-grid-ordered/MasonryGridOrdered.vue

@@ -9,7 +9,7 @@
 </template>
 
 <script setup lang="ts">
-import { useBreakpoints, useElementSize, useResizeObserver } from '@vueuse/core';
+import { useBreakpoints, useElementSize, useResizeObserver } from "@vueuse/core"
 
 const props = defineProps({
   gridData: {
@@ -38,77 +38,79 @@ const props = defineProps({
   },
   justify: {
     type: String as PropType<String>,
-    default: 'left',
-    validator: (val: string) => ['left', 'center', 'right'].includes(val),
+    default: "left",
+    validator: (val: string) => ["left", "center", "right"].includes(val),
   },
-});
+})
 
-const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 
-const gridData = toRef(() => props.gridData);
+const gridData = toRef(() => props.gridData)
 
-const minTileWidth = toRef(() => props.minTileWidth);
-const gridWrapper = ref<null | HTMLDivElement>(null);
-const gridItemsRefs = ref<HTMLDivElement[]>([]);
-const { width } = useElementSize(gridWrapper);
+const minTileWidth = toRef(() => props.minTileWidth)
+const gridWrapper = ref<null | HTMLDivElement>(null)
+const gridItemsRefs = ref<HTMLDivElement[]>([])
+const { width } = useElementSize(gridWrapper)
 const columnCount = computed(() => {
-  return Math.floor(width.value / minTileWidth.value);
-});
+  return Math.floor(width.value / minTileWidth.value)
+})
 
-const gapNum = toRef(props.gap);
-const gapStr = toRef(props.gap + 'px');
+const gapNum = toRef(props.gap)
+const gapStr = toRef(props.gap + "px")
 
-const fixedWidth = toRef(() => props.fixedWidth);
-const minTileWidthStr = toRef(props.minTileWidth + 'px');
+const fixedWidth = toRef(() => props.fixedWidth)
+const minTileWidthStr = toRef(props.minTileWidth + "px")
 const maxTileWidth = computed(() => {
-  return fixedWidth.value ? minTileWidth.value + 'px' : '1fr';
-});
+  return fixedWidth.value ? minTileWidth.value + "px" : "1fr"
+})
 
 const justify = computed(() => {
-  return fixedWidth.value ? props.justify : 'stretch';
-});
+  return fixedWidth.value ? props.justify : "stretch"
+})
 
 const updateGrid = () => {
   if (gridWrapper.value !== null) {
-    const wrapperWidth = gridWrapper.value?.offsetWidth ?? 0;
-    const itemWidth = fixedWidth.value ? minTileWidth.value : Math.floor((wrapperWidth - (columnCount.value - 1) * gapNum.value) / columnCount.value);
+    const wrapperWidth = gridWrapper.value?.offsetWidth ?? 0
+    const itemWidth = fixedWidth.value
+      ? minTileWidth.value
+      : Math.floor((wrapperWidth - (columnCount.value - 1) * gapNum.value) / columnCount.value)
 
-    const colHeights = Array(columnCount.value).fill(0);
+    const colHeights = Array(columnCount.value).fill(0)
 
     gridItemsRefs.value.forEach((item) => {
-      const minHeight = Math.min(...colHeights);
-      const minIndex = colHeights.indexOf(minHeight);
+      const minHeight = Math.min(...colHeights)
+      const minIndex = colHeights.indexOf(minHeight)
 
-      item?.style.setProperty('--_position', 'absolute');
-      item?.style.setProperty('--_position-top', minHeight + 'px');
-      item?.style.setProperty('--_position-left', minIndex * (100 / columnCount.value) + '%');
-      item?.style.setProperty('--_element-width', itemWidth + 'px');
+      item?.style.setProperty("--_position", "absolute")
+      item?.style.setProperty("--_position-top", minHeight + "px")
+      item?.style.setProperty("--_position-left", minIndex * (100 / columnCount.value) + "%")
+      item?.style.setProperty("--_element-width", itemWidth + "px")
 
-      colHeights[minIndex] += Math.floor(item.offsetHeight + gapNum.value);
-    });
+      colHeights[minIndex] += Math.floor(item.offsetHeight + gapNum.value)
+    })
 
-    const maxHeight = Math.max(...colHeights);
-    gridWrapper.value?.style.setProperty('--_wrapper-height', maxHeight + 'px');
+    const maxHeight = Math.max(...colHeights)
+    gridWrapper.value?.style.setProperty("--_wrapper-height", maxHeight + "px")
   }
-};
+}
 
 useResizeObserver(gridWrapper, () => {
-  updateGrid();
-});
+  updateGrid()
+})
 
 watch(
   () => fixedWidth.value,
   () => {
-    updateGrid();
+    updateGrid()
   }
-);
+)
 
 watch(
   () => props.styleClassPassthrough,
   () => {
-    resetElementClasses(props.styleClassPassthrough);
+    resetElementClasses(props.styleClassPassthrough)
   }
-);
+)
 </script>
 
 <style scoped lang="css">
@@ -142,7 +144,8 @@ watch(
     }
 
     .masonry-grid-ordered-item {
-      transition: position var(--_transition-duration) ease, top var(--_transition-duration) ease, left var(--_transition-duration) ease;
+      transition: position var(--_transition-duration) ease, top var(--_transition-duration) ease,
+        left var(--_transition-duration) ease;
 
       position: var(--_position);
       top: var(--_position-top);

package/nuxt.config.ts

@@ -1,7 +1,7 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   devtools: { enabled: true },
-  css: ["modern-normalize", "./app/assets/styles/main.css"],
+  // css: ["modern-normalize", "./app/assets/styles/main.css"],
   modules: ["@nuxt/eslint", "@nuxt/icon", "@nuxt/image"],
   app: {
     head: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "6.1.3",
+  "version": "6.1.4",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",
@@ -24,6 +24,7 @@
   "devDependencies": {
     "@iconify-json/akar-icons": "1.2.7",
     "@iconify-json/bitcoin-icons": "1.2.4",
+    "@iconify-json/material-symbols": "^1.2.33",
     "@nuxt/eslint": "1.8.0",
     "@nuxt/icon": "2.0.0",
     "@nuxt/image": "1.11.0",
@@ -35,8 +36,7 @@
     "typescript": "5.9.2"
   },
   "dependencies": {
-    "focus-trap-vue": "4.0.3",
-    "modern-normalize": "3.0.1"
+    "focus-trap-vue": "4.0.3"
   },
   "release-it": {
     "$schema": "https://unpkg.com/release-it/schema/release-it.json",

package/app/assets/styles/extends-layer/srcdev-components/components/_display-prompt-core.css

@@ -1,72 +0,0 @@
-.srcdev-components-extended {
-  .display-prompt-core {
-    .display-prompt-wrapper {
-      background-color: var(--component-theme-10);
-      border: 1px solid var(--component-theme-8);
-      border-inline-start: 8px solid var(--component-theme-8);
-      border-radius: 4px;
-      border-start-start-radius: 8px;
-      border-end-start-radius: 8px;
-
-      .display-prompt-inner {
-        align-items: center;
-        gap: 12px;
-        padding-block: 1rem;
-        padding-inline: 1.5rem;
-
-        .display-prompt-icon {
-          .icon {
-            color: var(--component-theme-0);
-            font-size: 3rem;
-            font-style: normal;
-            font-weight: normal;
-          }
-        }
-
-        .display-prompt-content {
-          gap: 1rem;
-          margin: 0;
-          padding: 0.2rem;
-
-          .title {
-            font-size: var(--step-5);
-            font-weight: bold;
-            line-height: 1.3;
-            color: var(--component-theme-0);
-            margin: 0;
-            padding: 0;
-          }
-
-          .text {
-            font-size: var(--step-5);
-            font-weight: normal;
-            line-height: 1.3;
-            color: var(--component-theme-0);
-            margin: 0;
-            padding: 0;
-          }
-        }
-        .display-prompt-action {
-          background-color: transparent;
-          align-items: center;
-          margin: 1rem;
-          padding: 0.5rem;
-          border: 0.1rem solid var(--component-theme-8);
-          border-radius: 50%;
-          outline: 1px solid var(--component-theme-3);
-
-          &:hover {
-            cursor: pointer;
-          }
-
-          .icon {
-            color: var(--component-theme-0);
-            font-size: var(--step-5);
-            border: 1px solid green;
-            padding: 1rem;
-          }
-        }
-      }
-    }
-  }
-}

package/app/assets/styles/extends-layer/srcdev-components/components/_expanding-panel.css

@@ -1,37 +0,0 @@
-.srcdev-components-extended {
-  .expanding-panel {
-    .expanding-panel-details {
-      .expanding-panel-summary {
-        &::-webkit-details-marker,
-        &::marker {
-          display: none;
-        }
-
-        .label-wrapper {
-        }
-        .icon-wrapper {
-          .icon {
-          }
-        }
-      }
-
-      &[open] {
-        .expanding-panel-summary {
-          .icon-wrapper {
-            .icon {
-            }
-          }
-        }
-        + .expanding-panel-content {
-          .inner {
-          }
-        }
-      }
-    }
-
-    .expanding-panel-content {
-      .inner {
-      }
-    }
-  }
-}

package/app/assets/styles/extends-layer/srcdev-components/components/index.css

@@ -1,2 +0,0 @@
-@import "./_display-prompt-core";
-@import "./_expanding-panel";

package/app/assets/styles/extends-layer/srcdev-components/index.css

@@ -1,2 +0,0 @@
-@import './setup';
-@import './components';

package/app/assets/styles/extends-layer/srcdev-components/setup/index.css

@@ -1 +0,0 @@
-@import './themes';

package/app/assets/styles/extends-layer/srcdev-components/setup/themes/_error.css

@@ -1,15 +0,0 @@
-[data-component-theme='error'] {
-  --component-theme-0: var(--red-0);
-  --component-theme-1: var(--red-1);
-  --component-theme-2: var(--red-2);
-  --component-theme-3: var(--red-3);
-  --component-theme-4: var(--red-4);
-  --component-theme-5: var(--red-5);
-  --component-theme-6: var(--red-6);
-  --component-theme-7: var(--red-7);
-  --component-theme-8: var(--red-8);
-  --component-theme-9: var(--red-9);
-  --component-theme-10: var(--red-10);
-  --component-theme-11: var(--red-11);
-  --component-theme-12: var(--red-12);
-}

package/app/assets/styles/extends-layer/srcdev-components/setup/themes/_info.css

@@ -1,15 +0,0 @@
-[data-component-theme='info'] {
-  --component-theme-0: var(--blue-0);
-  --component-theme-1: var(--blue-1);
-  --component-theme-2: var(--blue-2);
-  --component-theme-3: var(--blue-3);
-  --component-theme-4: var(--blue-4);
-  --component-theme-5: var(--blue-5);
-  --component-theme-6: var(--blue-6);
-  --component-theme-7: var(--blue-7);
-  --component-theme-8: var(--blue-8);
-  --component-theme-9: var(--blue-9);
-  --component-theme-10: var(--blue-10);
-  --component-theme-11: var(--blue-11);
-  --component-theme-12: var(--blue-12);
-}