This repository has been archived on 2023-08-30. You can view files and clone it, but cannot push or open issues/pull-requests.
bytedo
/
wcui
Archived
1
0
Fork 0

增加layout组件

old
yutent 2023-02-28 19:27:39 +08:00
parent 70d5172543
commit 95727082ab
3 changed files with 170 additions and 54 deletions

55
src/layout/column.wc Normal file
View File

@ -0,0 +1,55 @@
<template>
<div class="col"><slot /></div>
</template>
<script>
export default class Col {
props = {
gap: ''
}
__init__() {
/* render */
}
mounted() {}
unmounted() {}
watch() {}
}
</script>
<style lang="scss">
:host {
// display: flex;
max-width: 100%;
}
.col {
display: block;
width: 100%;
height: 100%;
}
@for $i from 1 through 24 {
:host([span='#{$i}']) {
max-width: math.percentage(math.div($i, 24));
flex: 0 0 math.percentage(math.div($i, 24));
}
}
$gaps: (
's': 4px,
'm': 8px,
'l': 12px,
'xl': 16px,
'xxl': 20px,
'xxxl': 24px,
'xxxxl': 28px
);
@each $k, $v in $gaps {
:host([gap='#{$k}']) .col {
padding: 0 math.div($v, 2);
}
}
</style>

75
src/layout/index.wc Normal file
View File

@ -0,0 +1,75 @@
<template>
<div class="row"><slot /></div>
</template>
<script>
import './column'
export default class Row {
props = {
gap: null
}
__init__() {
/* render */
}
_updateChildrenStat() {
Array.from(this.children).forEach(it => {
if (it.tagName === 'WC-COL') {
it.setAttribute('gap', this.props.gap)
} else {
it.remove()
}
})
}
mounted() {
this.__observer = new MutationObserver(_ => {
this._updateChildrenStat()
})
this.__observer.observe(this, {
childList: true,
subtree: true
})
}
unmounted() {
this.__observer.disconnect()
}
watch() {
switch (name) {
case 'gap':
this.props.gap = val || ''
this._updateChildrenStat()
break
}
}
}
</script>
<style lang="scss">
:host {
display: block;
}
.row {
display: flex;
flex-wrap: wrap;
}
$gaps: (
's': 4px,
'm': 8px,
'l': 12px,
'xl': 16px,
'xxl': 20px,
'xxxl': 24px,
'xxxxl': 28px
);
@each $k, $v in $gaps {
:host([gap='#{$k}']) .row {
margin: 0 math.div(-$v, 2);
}
}
</style>

View File

@ -2,60 +2,6 @@
<div class="container"><slot /></div> <div class="container"><slot /></div>
</template> </template>
<style lang="scss">
:host {
display: block;
}
.container {
display: flex;
flex-wrap: wrap;
align-items: center;
width: 100%;
gap: 12px;
}
:host([vertical]) {
.container {
flex-direction: column;
}
}
:host([gap='s']) {
.container {
gap: 4px;
}
}
:host([gap='m']) {
.container {
gap: 8px;
}
}
:host([gap='l']) {
.container {
gap: 12px;
}
}
:host([gap='xl']) {
.container {
gap: 16px;
}
}
:host([gap='xxl']) {
.container {
gap: 20px;
}
}
:host([gap='xxxl']) {
.container {
gap: 24px;
}
}
:host([gap='xxxxl']) {
.container {
gap: 28px;
}
}
</style>
<script> <script>
export default class Space { export default class Space {
props = { props = {
@ -77,3 +23,43 @@ export default class Space {
watch() {} watch() {}
} }
</script> </script>
<style lang="scss">
:host {
display: block;
}
.container {
display: flex;
flex-wrap: wrap;
align-items: center;
width: 100%;
gap: 12px;
}
:host([vertical]) {
.container {
flex-direction: column;
}
}
:host([justify]) {
.container {
justify-content: space-between;
}
}
$gaps: (
's': 4px,
'm': 8px,
'l': 12px,
'xl': 16px,
'xxl': 20px,
'xxxl': 24px,
'xxxxl': 28px
);
@each $k, $v in $gaps {
:host([gap='#{$k}']) {
.container {
gap: $v;
}
}
}
</style>