f94b6d273a
* fix: adjustment some schemas * fix(room): fixing integrate unit of room * feat(warehouse): modify form and integration * feat(counter): modify form and integration * feat(screen): add list, form and integration * feat(screen): add page for public screen * fix: add on reset state at list * fix: solve list of relation * feat(chamber): integrate form to api chamber * feat(bed): integrate form to api bed * fix: add searching function on list service * fix: rewrite style for dropdown and tree select * fix: add sort params * fix: add sort params on division + medicine * feat(division-position): layouting form + list * fix: add sort params for getValueList * chore: modify side menu style * chore: fix ui dashboard * feat(division-position): add content list * feat(division-position): add temporary page * feat(division-position): modify content and entry form
40 lines
1.1 KiB
Vue
40 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
|
|
const props = defineProps({
|
|
height: { type: String, default: 'default' }, // 'default' | 'compact'
|
|
position: { type: String, default: 'default' }, // 'default' | 'dynamic'
|
|
positionPoint: { type: String, default: 'lg' },
|
|
class: { type: String, default: '' },
|
|
})
|
|
|
|
const breakpoints = ['','sm','md','lg','xl','2xl']
|
|
const getBreakpointIdx = (point: string) => {
|
|
return Math.max(0, breakpoints.findIndex(bp => bp === point))
|
|
}
|
|
|
|
const settingClass = computed(() => {
|
|
let cls = 'label'
|
|
cls += props.height === 'compact' ? ' height-compact ' : ' height-default '
|
|
if (props.position === 'dynamic') {
|
|
cls += ' ' + [
|
|
'text-end pe-2.5',
|
|
'sm:text-end pe-2.5',
|
|
'md:text-end pe-2.5',
|
|
'lg:text-end pe-2.5',
|
|
'xl:text-end pe-2.5',
|
|
'2xl:text-end pe-2.5',
|
|
][getBreakpointIdx(props.positionPoint)]
|
|
}
|
|
return cls + ' ' + (props.class?.trim() || '')
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div :class="settingClass">
|
|
<label v-bind="$attrs">
|
|
<slot />
|
|
</label>
|
|
</div>
|
|
</template>
|