69 lines
1.4 KiB
Vue
69 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
const props = defineProps({
|
|
label: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
name:{
|
|
type: String,
|
|
default: '',
|
|
},
|
|
labelWidth: {
|
|
type: String,
|
|
default: '8',
|
|
}
|
|
})
|
|
const itemLabel = ref('')
|
|
const itemName = ref('')
|
|
const itemLabelWidth = ref('8')
|
|
|
|
watchEffect(() => {
|
|
itemLabel.value = props.label
|
|
itemName.value = props.name
|
|
itemLabelWidth.value = props.labelWidth
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="NiFormItem" data-prefix="Ni">
|
|
<div class="content">
|
|
<div class="formLabel" :style="{width: itemLabelWidth+'em'}">
|
|
<span>{{itemLabel}}</span>
|
|
</div>
|
|
<div class="formValue"><slot/></div>
|
|
</div>
|
|
<div class="feedback"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.NiFormItem{
|
|
position: relative;
|
|
height: 3.6rem;
|
|
padding: .5rem 0;
|
|
|
|
& > div.content{
|
|
position: relative;
|
|
display: flex;
|
|
height: 2.4rem;
|
|
|
|
&>div.formLabel{
|
|
position: relative;
|
|
flex-shrink: 0;
|
|
font-weight: bold;
|
|
color: var(--Ni-theme-color);
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
&>div.formValue{
|
|
position: relative;
|
|
flex: 1;
|
|
}
|
|
}
|
|
& > div.feedback{
|
|
position: relative;
|
|
height: 1.2rem;
|
|
}
|
|
}
|
|
</style> |