new v2

README.md

@@ -1,2 +1,5 @@
 # nuxt-layout-compositions
 A library with some useful layout compositions components
+
+This is v2.
+For v1 code, check v1 branch.

assets/styles/BoxL.module.styl

@@ -1,24 +1,6 @@
-.box-l
-  padding: var(--gap, 1.5rem)
-  border: var(--border-thin, .0625rem) solid var(--color-grey-light, #F0F0F0)
-  border-radius: var(--border-radius, .5rem)
-  color: var(--color-default, #595959)
-  background-color: #FFF
-  & *
-    color: inherit
+.boxl
+  padding: var(--boxl-gap, var(--lc-gap, 1.5rem))
 
-  &[compact]
+  &[nogap]:not([nogap='false'])
     overflow: hidden
-    padding: 0
-
-  &[transparent]
-    background-color: transparent
-
-  &[sharp]
-    border-radius: 0
-
-  &[borderless]
-    border-width: 0
-    border-color: transparent
-
-
+    padding: 0

assets/styles/CenterL.module.styl

@@ -1,14 +1,10 @@
-.center-l
+.centerl
   box-sizing: content-box
   margin-inline: auto
-  max-inline-size: var(--max-width, 65ch)
-  padding-inline-start: var(--gap, 1.5rem)
-  padding-inline-end: var(--gap, 1.5rem)
+  max-inline-size: var(--centerl-max-width, var(--lc-max-width, 40rem))
+  padding-inline: var(--centerl-gap, var(--lc-gap, 1.5rem))
 
-  &[center-text]
-    text-align: center
-
-  &[intrinsic]
+  &[intrinsic]:not([intrinsic='false'])
     display:flex
     flex-direction: column
     align-items: center

assets/styles/ClusterL.module.styl

@@ -1,24 +1,27 @@
-.cluster-l
+.clusterl
   display: flex
   flex-wrap: wrap
-  gap: var(--gap, 1.5rem)
+  gap: var(--clusterl-gap, var(--lc-gap, 1.5rem))
   justify-content: flex-start
   align-items: center
 
-  &[center]
+  &[center]:not([center='false'])
     justify-content: center
 
-  &[end]
+  &[end]:not([end='false'])
     justify-content: flex-end
 
-  &[between]
+  &[between]:not([between='false'])
     justify-content: space-between
 
-  &[around]
+  &[around]:not([around='false'])
     justify-content: space-around
 
-  &[narrow]
-    gap: var(--s0, 1rem)
+  &[evenly]:not([evenly='false'])
+    justify-content: space-evenly
+
+  &[narrow]:not([narrow='false'])
+    gap: calc(var(--clusterl-gap, var(--lc-gap, 1.5rem)) * 0.666666667) // ~1rem
 
-  &[wide]
-    gap: calc(var(--gap, 1.5rem) * 2)
+  &[wide]:not([wide='false'])
+    gap: calc(var(--clusterl-gap, var(--lc-gap, 1.5rem)) * 2) // 2rem

assets/styles/ModalL.module.styl

@@ -1,10 +1,5 @@
-.modal
+.modall
   position: fixed
   inset-block-start: 50%
   inset-inline-start: 50%
-  transform: translate(-50%, -50%)
-
-// .modal.contain
-//   overflow: auto
-//   max-inline-size: calc(100% - (var(--gap, 1.5rem) * 2))
-//   max-block-size: calc(100% - (var(--gap, 1.5rem) * 2))
+  transform: translate(-50%, -50%)

assets/styles/SidebarL.module.styl

@@ -0,0 +1,22 @@
+.sidebarl
+  display: flex
+  flex-wrap: wrap
+  gap: var(--sidebar-gap, 0)
+
+  &:not([right]) > :first-child
+    flex-basis: var(--sidebar-column-size, 0)
+    flex-grow: 1
+
+  &:not([right]) > :last-child
+    flex-basis: 0
+    flex-grow: 999
+    min-inline-size: var(--sidebar-content-size, 50%)
+
+  &[right] > :last-child
+    flex-basis: var(--sidebar-column-size, 0)
+    flex-grow: 1
+
+  &[right] > :first-child
+    flex-basis: 0
+    flex-grow: 999
+    min-inline-size: var(--sidebar-content-size, 50%)

assets/styles/StackL.module.styl

@@ -1,20 +1,20 @@
-.stack-l
+.stackl
   display: flex
   flex-direction: column
   justify-content: flex-start
 
-  &[recursive] > *
+  &[recursive]:not([recursive='false']) > *
     margin-block: 0
 
   & > * + *,
-  &[recursive] * + *
-    margin-block-start: var(--gap, 1.5rem)
+  &[recursive]:not([recursive='false']) * + *
+    margin-block-start: var(--stackl-gap, var(--lc-gap, 1.5rem))
 
-  &[squeezed] > * + *
+  &[compact]:not([compact='false']) > * + 
+    margin-block-start: calc(var(--stackl-gap, var(--lc-gap, 1.5rem)) / 2)
+
+  &[squeezed]:not([squeezed='false']) > * + *
     margin-block-start: 0
 
-  &[compact] > * + *
-    margin-block-start: calc(var(--gap, 1.5rem) / 2)
-
-  &[wide] > * + *
-    margin-block-start: calc(var(--gap, 1.5rem) * 3)
+  &[wide]:not([wide='false']) > * + *
+    margin-block-start: calc(var(--stackl-gap, var(--lc-gap, 1.5rem)) * 3)

components/BasicLayout.vue

@@ -0,0 +1,30 @@
+<script lang='ts' setup>
+/**
+* One Header-Body-Footer (HBF)
+* layout to rule them all
+* @name 'BasicLayout'
+* @version 1.0.0
+*/
+</script>
+
+<template>
+<div class='hbf-layout'>
+  <header>
+    <slot name='header' />
+  </header>
+  <main>
+    <slot />
+  </main>
+  <footer>
+    <slot name='footer' />
+  </footer>
+</div>
+</template>
+
+<style lang="stylus" scoped>
+.hbf-layout
+  display: grid
+  grid-template-rows: var(--lc-header-height, min-content) auto var(--lc-footer-height, min-content)
+  gap: var(--lc-gap, 1.5rem) 0
+  min-block-size: 100vh
+</style>

components/BoxL.vue

@@ -2,7 +2,7 @@
 /**
  * A simple box component
  * @name 'BoxL'
- * @version 1.0.0
+ * @version 2.0.0
  */
 
 import { defineComponent, h } from 'vue'
@@ -15,7 +15,7 @@ export default defineComponent({
       default: 'div'
     }
   },
-  setup (props, { slots }) {
+  setup(props, { slots }) {
     return () => h(props.tag, { class: Object.values(Styles) }, slots)
   }
 })

components/CenterL.vue

@@ -16,7 +16,7 @@ export default defineComponent({
       default: 'div'
     }
   },
-  setup (props, { slots }) {
+  setup(props, { slots }) {
     return () => h(props.tag, { class: Object.values(Styles) }, slots)
   }
 })

components/ClusterL.vue

@@ -3,7 +3,7 @@
    * A component that can create a
    * horizontally centered column
    * @name 'ClusterL'
-   * @version 1.0.0
+   * @version 2.0.0
    */
 import { defineComponent, h } from 'vue'
 import Styles from '@/assets/styles/ClusterL.module.styl'
@@ -15,7 +15,7 @@ export default defineComponent({
       default: 'div'
     }
   },
-  setup (props, { slots }) {
+  setup(props, { slots }) {
     return () => h(props.tag, { class: Object.values(Styles) }, slots)
   }
 })

components/ModalL.vue

@@ -2,7 +2,7 @@
 /**
    * A modal positioner
    * @name 'ModalL'
-   * @version 1.0.0
+   * @version 2.0.0
    */
 
 import { defineComponent, h } from 'vue'
@@ -15,7 +15,7 @@ export default defineComponent({
       default: 'div'
     }
   },
-  setup (props, { slots }) {
+  setup(props, { slots }) {
     return () => h(props.tag, { class: Object.values(Styles) }, slots)
   }
 })

components/RowL.vue → components/SidebarL.vue

@@ -1,12 +1,12 @@
 <script lang="ts">
 /**
-   * A simple separator.
-   * @name 'RowL'
-   * @version 1.0.0
-   */
+ * A layout using sidebar
+ * @name 'SidebarL'
+ * @version 1.0.0
+ */
 
 import { defineComponent, h } from 'vue'
-import Styles from '@/assets/styles/RowL.module.styl'
+import Styles from '@/assets/styles/SidebarL.module.styl'
 
 export default defineComponent({
   props: {
@@ -15,7 +15,7 @@ export default defineComponent({
       default: 'div'
     }
   },
-  setup (props, { slots }) {
+  setup(props, { slots }) {
     return () => h(props.tag, { class: Object.values(Styles) }, slots)
   }
 })

components/StackL.vue

@@ -4,7 +4,7 @@
  * margin between elements via their
  * common parent.
  * @name 'StackL'
- * @version 1.0.0
+ * @version 2.0.0
  */
 
 import { defineComponent, h } from 'vue'
@@ -17,7 +17,7 @@ export default defineComponent({
       default: 'div'
     }
   },
-  setup (props, { slots }) {
+  setup(props, { slots }) {
     return () => h(props.tag, { class: Object.values(Styles) }, slots)
   }
 })