<script setup>
import { computed } from "vue";
defineOptions({ inheritAttrs: false });
const props = defineProps({
  fields: { type: Array, required: false },
  modelValue: { type: null, required: false },
  bordered: { type: Boolean, required: false, skipCheck: true, default: true },
  dense: { type: Boolean, required: false, skipCheck: true, default: true },
  separator: { type: Boolean, required: false, skipCheck: true, default: true },
  dark: { type: [Boolean, null], required: false, skipCheck: true },
  padding: { type: Boolean, required: false, skipCheck: true },
  tag: { type: null, required: false }
});
const L_KEYS = ["fields", "modelValue"];
const listProps = computed(() => {
  const result = {};
  for (const [k, v] of Object.entries(props)) {
    if (!L_KEYS.includes(k) && v !== void 0) result[k] = v;
  }
  return result;
});
function getTo(field) {
  if (!field.to) return null;
  if (field.to instanceof Function) return field.to(props.modelValue);
  if (typeof field.to === "string") return field.to;
  return null;
}
function getFieldValue(field) {
  const model = props.modelValue;
  if (field.field instanceof Function) return field.field(model);
  return model ? model[field.name] : null;
}
</script>

<template>
    <q-list v-bind="listProps">
        <template v-if="fields">
            <l-item v-for="field in fields" :key="field.name ?? field.label" :label="field.label" :to="getTo(field)">
                {{ getFieldValue(field) }}
            </l-item>
        </template>
        <template v-else>
            <slot></slot>
        </template>
    </q-list>
</template>
