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 @@