srcdev-nuxt-components 0.0.6 → 0.0.9

package/components/presentation/layout-row/LayoutRow.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="layout-row">
+    <component :is="tag" :data-testid="dataTestid" :class="[variant, elementClasses]">
+      <slot name="default"></slot>
+    </component>
+  </div>
+</template>
+
+<script lang="ts">
+const TAGS_ALLOWED = <string[]>['div', 'section', 'article', 'aside', 'header', 'footer', 'main', 'nav', 'ul', 'ol'];
+
+const VARIANT_CLASSES = <string[]>[
+  'full',
+  'full-start',
+  'full-end',
+  'popout',
+  'popout-start',
+  'popout-end',
+  'content',
+  'content-start',
+  'content-end',
+  'inset-content',
+  'inset-content-start',
+  'inset-content-end',
+  'full-width',
+  'full-content',
+  'full-content-nopad',
+  'full-content',
+];
+</script>
+
+<script setup lang="ts">
+const props = defineProps({
+  dataTestid: {
+    type: String,
+    default: 'layout-row',
+  },
+  tag: {
+    type: String,
+    default: 'div',
+    validator(value: string) {
+      return TAGS_ALLOWED.includes(value);
+    },
+  },
+  variant: {
+    type: String,
+    required: true,
+    validator(value: string) {
+      return VARIANT_CLASSES.includes(value);
+    },
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+});
+
+const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+</script>
+
+<style lang="css">
+/*
+* Page Layout by https://layout-breakouts-builder.vercel.app
+**/
+.layout-row > *,
+.full-width > * {
+  grid-column: content;
+}
+.layout-row,
+.full-width {
+  --minimum-content-padding: 1rem;
+
+  /** TRACK WIDTHS **/
+  --full-max-width: 1fr;
+  --popout-max-width: 1400px;
+  --content-max-width: 1060px;
+  --inset-content-max-width: 840px;
+
+  /** TRACK SIZES **/
+  --full: minmax(var(--minimum-content-padding), 1fr);
+  --popout: minmax(0, calc((var(--popout-max-width) - var(--content-max-width)) * 0.5));
+  --content: minmax(0, calc((var(--content-max-width) - var(--inset-content-max-width)) * 0.5));
+  --inset-content: min(var(--inset-content-max-width), 100% - var(--minimum-content-padding) * 2);
+
+  display: grid;
+  grid-template-columns:
+    [full-start]
+    var(--full)
+    [popout-start]
+    var(--popout)
+    [content-start]
+    var(--content)
+    [inset-content-start]
+    var(--inset-content)
+    [inset-content-end]
+    var(--content)
+    [content-end]
+    var(--popout)
+    [popout-end]
+    var(--full)
+    [full-end];
+}
+
+/** CLASSES **/
+.full {
+  grid-column: full;
+}
+.full-start {
+  grid-column-start: full-start;
+}
+.full-end {
+  grid-column-end: full-end;
+}
+
+.popout {
+  grid-column: popout;
+}
+.popout-start {
+  grid-column-start: popout-start;
+}
+.popout-end {
+  grid-column-end: popout-end;
+}
+
+.content {
+  grid-column: content;
+}
+.content-start {
+  grid-column-start: content-start;
+}
+.content-end {
+  grid-column-end: content-end;
+}
+
+.inset-content {
+  grid-column: inset-content;
+}
+.inset-content-start {
+  grid-column-start: inset-content-start;
+}
+.inset-content-end {
+  grid-column-end: inset-content-end;
+}
+
+.full-width {
+  grid-column: full;
+}
+.full-content,
+.full-content-nopad {
+  grid-column: full;
+}
+.full-content {
+  padding-inline: var(--minimum-content-padding);
+}
+</style>

package/nuxt.config.ts

@@ -16,6 +16,6 @@ export default defineNuxtConfig({
       pathPrefix: false,
     },
   ],
-  plugins: ['~/plugins/css-anchor-positioning.ts'],
+  // plugins: ['css-anchor-positioning'],
   compatibilityDate: '2024-07-13',
 });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "0.0.6",
+  "version": "0.0.9",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",
@@ -24,13 +24,11 @@
   ],
   "devDependencies": {
     "@nuxt/eslint-config": "0.7.1",
+    "@oddbird/css-anchor-positioning": "0.4.0",
     "eslint": "9.15.0",
     "nuxt": "3.14.1592",
     "release-it": "17.10.0",
-    "typescript": "5.6.3"
-  },
-  "dependencies": {
-    "@oddbird/css-anchor-positioning": "0.4.0"
+    "typescript": "^5.7.2"
   },
   "release-it": {
     "$schema": "https://unpkg.com/release-it/schema/release-it.json",
@@ -41,5 +39,8 @@
       "release": true,
       "releaseName": "v${version}"
     }
+  },
+  "dependencies": {
+    "modern-normalize": "3.0.1"
   }
 }

package/components/presentation/page-row/PageRow.vue

@@ -1,54 +0,0 @@
-<template>
-  <div class="page-row" :class="[elementClasses]" :data-testid="dataTestid">
-    <div class="page-row-inner" :class="[{ 'full-width': isFullWidth }]">
-      <slot name="default"></slot>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-const props = defineProps({
-  dataTestid: {
-    type: String,
-    default: 'page-row',
-  },
-  isFullWidth: {
-    type: Boolean,
-    default: false,
-  },
-  styleClassPassthrough: {
-    type: Array as PropType<string[]>,
-    default: () => [],
-  },
-});
-
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
-</script>
-
-<style lang="css">
-.page-row {
-  --_gutter-width: 24px;
-  --_content-width: 1fr;
-  --_grid-template-columns: var(--_gutter-width) 1fr var(--_gutter-width);
-
-  display: grid;
-  grid-template-columns: var(--_grid-template-columns);
-
-  @media screen and (min-width: 1024px) {
-    --_gutter-width: 24px;
-  }
-
-  @media screen and (min-width: 1280px) {
-    --_gutter-width: 32px;
-  }
-
-  .page-row-inner {
-    grid-column: 2;
-
-    &.full-width {
-      --_grid-template-columns: 0fr 1fr 0fr;
-      grid-column: 1 / span 3;
-    }
-  }
-}
-</style>