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