srcdev-nuxt-components 6.1.3 → 6.1.5

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/app/components/responsive-header/ResponsiveHeader.vue

@@ -101,14 +101,14 @@
     <LayoutRow tag="div" variant="full" :style-class-passthrough="['mb-20', 'debug-grid']">
       <ClientOnly>
         <div>
-          <h2 class="heading-4">navigationWrapperRects</h2>
+          <h2 class="page-heading-4">navigationWrapperRects</h2>
           <pre>{{ navigationWrapperRects }}</pre>
           <hr />
-          <h2 class="heading-4">secondaryNavRects</h2>
+          <h2 class="page-heading-4">secondaryNavRects</h2>
           <pre>{{ secondaryNavRects }}</pre>
         </div>
         <div>
-          <h2 class="heading-4">mainNavigationState</h2>
+          <h2 class="page-heading-4">mainNavigationState</h2>
           <pre>{{ mainNavigationState }}</pre>
         </div>
       </ClientOnly>

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.5",
   "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);
-}

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

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

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

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

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

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

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

@@ -1,5 +0,0 @@
-@import './_error';
-@import './_success';
-@import './_warning';
-@import './_info';
-@import './_secondary';

package/app/assets/styles/main.css

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

package/app/assets/styles/setup/_head.css

@@ -1,36 +0,0 @@
-:root {
-  /* --font-family: futura-pt, Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif; */
-  /* --font-family: Poppins, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; */
-
-  --font-family: 'Quicksand', futura-pt, Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
-}
-
-html {
-  color-scheme: light dark;
-
-  &[data-color-scheme='light'] {
-    color-scheme: light;
-  }
-
-  &[data-color-scheme='dark'] {
-    color-scheme: dark;
-  }
-
-  background-color: var(--page-bg);
-
-  font-size: 62.5%;
-
-  transition: background-color 0.4s ease, color 0.4s ease;
-  scrollbar-gutter: stable;
-
-  overflow-x: hidden;
-}
-body {
-  color: var(--grayscale-text-body);
-  font-family: var(--font-family);
-  font-size: var(--step-4);
-  min-height: 100vh;
-  transition: background-color 0.4s ease, color 0.4s ease;
-
-  overflow-x: hidden;
-}

package/app/assets/styles/setup/a11y/_utils.css

@@ -1,20 +0,0 @@
-.sr-only {
-  border-width: 0;
-  clip: rect(1px, 0.1rem, 0.1rem, 0.1rem);
-  clip-path: inset(50%);
-  height: 0.1rem;
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-  width: 0.1rem;
-}
-/* .sr-only {
-  position: absolute;
-  width: 0.1rem;
-  height: 0.1rem;
-  padding: 0;
-  margin: -0.1rem;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-} */

package/app/assets/styles/setup/a11y/_variables.css

@@ -1,8 +0,0 @@
-:root {
-  --focus-box-shadow-colour-off: transparent;
-  --focus-box-shadow-colour-on: light-dark(var(--blue-12), var(--gray-0));
-  --form-focus-box-shadow: 0 0 0 0.3rem;
-
-  --box-shadow-off: 0 0 0 0.3rem transparent;
-  --box-shadow-on: 0 0 0 0.3rem light-dark(var(--blue-12), var(--gray-0));
-}

package/app/assets/styles/setup/a11y/index.css

@@ -1,2 +0,0 @@
-@import './_variables.css';
-@import './_utils.css';

package/app/assets/styles/setup/index.css

@@ -1,5 +0,0 @@
-@import './_head.css';
-@import './utility-classes';
-@import './a11y';
-@import './variables';
-@import './typography';

package/app/assets/styles/setup/typography/index.css

@@ -1,2 +0,0 @@
-@import './utility-classes';
-@import './vars';