<script setup>
import { computed } from "vue";
defineOptions({ inheritAttrs: false });
const props = defineProps({
  label: { type: String, required: false },
  name: { type: String, required: false },
  top: { type: Boolean, required: false, default: false },
  labelTop: { type: Boolean, required: false, default: false },
  alignItems: { type: String, required: false, default: "flex-end" },
  to: { type: null, required: false },
  exact: { type: Boolean, required: false, skipCheck: true },
  replace: { type: Boolean, required: false, skipCheck: true },
  activeClass: { type: null, required: false },
  exactActiveClass: { type: null, required: false },
  href: { type: null, required: false },
  target: { type: null, required: false },
  disable: { type: Boolean, required: false, skipCheck: true },
  active: { type: [Boolean, null], required: false, skipCheck: true },
  dark: { type: [Boolean, null], required: false, skipCheck: true },
  clickable: { type: Boolean, required: false, skipCheck: true },
  dense: { type: Boolean, required: false, skipCheck: true },
  insetLevel: { type: null, required: false },
  tabindex: { type: null, required: false },
  tag: { type: null, required: false },
  manualFocus: { type: Boolean, required: false, skipCheck: true },
  focused: { type: Boolean, required: false, skipCheck: true },
  onClick: { type: Function, required: false }
});
const L_KEYS = ["label", "name", "top", "labelTop", "alignItems"];
const itemProps = computed(() => {
  const result = {};
  for (const [k, v] of Object.entries(props)) {
    if (!L_KEYS.includes(k) && v !== void 0) result[k] = v;
  }
  return result;
});
</script>

<template>
    <q-item v-bind="itemProps">
        <q-item-section side v-if="$slots.avatar">
            <slot name="avatar"></slot>
        </q-item-section>

        <q-item-section side v-if="label" :top="labelTop">
            <q-item-label>{{ $t(label) }}</q-item-label>
        </q-item-section>

        <q-item-section :style="{ alignItems }">
            <slot></slot>
        </q-item-section>

        <q-item-section side v-if="$slots.end">
            <slot name="end"></slot>
        </q-item-section>
    </q-item>
</template>
