mirror of
https://git.hmsn.ink/kospo/svcm/dmz.git
synced 2026-03-20 06:13:33 +09:00
81 lines
1.7 KiB
Vue
81 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
export type VFlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse'
|
|
export type VFlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse'
|
|
export type VFlexJustifyContent =
|
|
| 'flex-start'
|
|
| 'flex-end'
|
|
| 'start'
|
|
| 'end'
|
|
| 'left'
|
|
| 'right'
|
|
| 'center'
|
|
| 'space-between'
|
|
| 'space-around'
|
|
| 'space-evenly'
|
|
| 'normal'
|
|
export type VFlexAlignItems =
|
|
| 'flex-start'
|
|
| 'flex-end'
|
|
| 'start'
|
|
| 'end'
|
|
| 'left'
|
|
| 'right'
|
|
| 'center'
|
|
| 'baseline'
|
|
| 'stretch'
|
|
| 'normal'
|
|
export type VFlexAlignContent =
|
|
| 'flex-start'
|
|
| 'flex-end'
|
|
| 'start'
|
|
| 'end'
|
|
| 'left'
|
|
| 'right'
|
|
| 'center'
|
|
| 'space-between'
|
|
| 'space-around'
|
|
| 'space-evenly'
|
|
| 'normal'
|
|
|
|
export interface VFlexProps {
|
|
inline?: boolean
|
|
flexDirection?: VFlexDirection
|
|
flexWrap?: VFlexWrap
|
|
justifyContent?: VFlexJustifyContent
|
|
alignItems?: VFlexAlignItems
|
|
alignContent?: VFlexAlignContent
|
|
rowGap?: string
|
|
columnGap?: string
|
|
}
|
|
|
|
const props = withDefaults(defineProps<VFlexProps>(), {
|
|
flexDirection: 'row',
|
|
flexWrap: 'nowrap',
|
|
justifyContent: 'normal',
|
|
alignItems: 'normal',
|
|
alignContent: 'normal',
|
|
rowGap: 'normal',
|
|
columnGap: 'normal',
|
|
})
|
|
const display = computed(() => (props.inline ? 'inline-flex' : 'flex'))
|
|
</script>
|
|
|
|
<template>
|
|
<div class="v-flex">
|
|
<slot />
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
.v-flex {
|
|
display: v-bind(display);
|
|
flex-direction: v-bind('props.flexDirection');
|
|
flex-wrap: v-bind('props.flexWrap');
|
|
justify-content: v-bind('props.justifyContent');
|
|
align-items: v-bind('props.alignItems');
|
|
align-content: v-bind('props.alignContent');
|
|
row-gap: v-bind('props.rowGap');
|
|
column-gap: v-bind('props.columnGap');
|
|
}
|
|
</style>
|