<template>
    <div class="uk-panel">
        <div
            v-for="field in fields"
            v-show="evaluate(field.show)"
            :key="field.name"
            class="uk-flex uk-flex-middle uk-flex-wrap uk-margin-small"
        >
            <div class="uk-width-expand uk-text-truncate">
                <span
                    v-if="field.description"
                    :title="field.description"
                    uk-tooltip="delay: 300; pos: top-left"
                    >{{ $t(field.label || '') }}</span
                >
                <span v-else>{{ $t(field.label || '') }}</span>
            </div>

            <div class="uk-width-medium">
                <component
                    :is="field.component"
                    :values="values"
                    :field="assign(field, { attrs: { class: 'yo-form-medium' } })"
                    @change="change"
                />
            </div>
        </div>
    </div>
</template>

<script>
import fields from '@yootheme/fields';
import { assign } from 'uikit-util';

export default {
    extends: fields,

    methods: {
        assign,
    },
};
</script>
