diff --git a/README.md b/README.md
index a9d4bea..bf5087f 100644
--- a/README.md
+++ b/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.
diff --git a/assets/styles/BoxL.module.styl b/assets/styles/BoxL.module.styl
index b7d4a8a..7c92f4f 100644
--- a/assets/styles/BoxL.module.styl
+++ b/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
\ No newline at end of file
diff --git a/assets/styles/CenterL.module.styl b/assets/styles/CenterL.module.styl
index 5b5d04c..1393c88 100644
--- a/assets/styles/CenterL.module.styl
+++ b/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
\ No newline at end of file
diff --git a/assets/styles/ClusterL.module.styl b/assets/styles/ClusterL.module.styl
index 6d894fc..9f46269 100644
--- a/assets/styles/ClusterL.module.styl
+++ b/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
diff --git a/assets/styles/ModalL.module.styl b/assets/styles/ModalL.module.styl
index 5695b34..fb37bbe 100644
--- a/assets/styles/ModalL.module.styl
+++ b/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%)
\ No newline at end of file
diff --git a/assets/styles/RowL.module.styl b/assets/styles/RowL.module.styl
deleted file mode 100644
index a4cd476..0000000
--- a/assets/styles/RowL.module.styl
+++ /dev/null
@@ -1,6 +0,0 @@
-.row-l:not(:last-child)
- padding-block-end: var(--gap, 1.5rem)
- border-bottom: var(--border-thin, .0625rem) solid var(--color-grey-light, #F0F0F0)
-
- &[dashed]
- border-bottom-style: dashed
\ No newline at end of file
diff --git a/assets/styles/SidebarL.module.styl b/assets/styles/SidebarL.module.styl
new file mode 100644
index 0000000..8b0e61d
--- /dev/null
+++ b/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%)
diff --git a/assets/styles/StackL.module.styl b/assets/styles/StackL.module.styl
index a468fee..d40fb17 100644
--- a/assets/styles/StackL.module.styl
+++ b/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)
\ No newline at end of file
+ &[wide]:not([wide='false']) > * + *
+ margin-block-start: calc(var(--stackl-gap, var(--lc-gap, 1.5rem)) * 3)
\ No newline at end of file
diff --git a/components/BasicLayout.vue b/components/BasicLayout.vue
new file mode 100644
index 0000000..f2972f2
--- /dev/null
+++ b/components/BasicLayout.vue
@@ -0,0 +1,30 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/components/BoxL.vue b/components/BoxL.vue
index 2cd27de..1c96a45 100644
--- a/components/BoxL.vue
+++ b/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)
}
})
diff --git a/components/CenterL.vue b/components/CenterL.vue
index bd73656..283c9d1 100644
--- a/components/CenterL.vue
+++ b/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)
}
})
diff --git a/components/ClusterL.vue b/components/ClusterL.vue
index 39a4e01..409327f 100644
--- a/components/ClusterL.vue
+++ b/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)
}
})
diff --git a/components/ModalL.vue b/components/ModalL.vue
index 5583e22..13711bd 100644
--- a/components/ModalL.vue
+++ b/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)
}
})
diff --git a/components/RowL.vue b/components/SidebarL.vue
similarity index 62%
rename from components/RowL.vue
rename to components/SidebarL.vue
index 724388d..4ed52bc 100644
--- a/components/RowL.vue
+++ b/components/SidebarL.vue
@@ -1,12 +1,12 @@