<script setup>
import { ref, computed, useAttrs } from "vue";
import { useLight } from "#imports";
const light = useLight();
const props = defineProps({
  modelValue: { type: String, required: false },
  label: { type: String, required: false },
  filled: { type: Boolean, required: false, default: void 0 },
  outlined: { type: Boolean, required: false, default: void 0 },
  standout: { type: Boolean, required: false, default: void 0 },
  rounded: { type: Boolean, required: false, default: void 0 },
  dense: { type: Boolean, required: false, default: void 0 },
  square: { type: Boolean, required: false, default: void 0 },
  stackLabel: { type: Boolean, required: false, default: void 0 }
});
const emit = defineEmits(["update:modelValue"]);
const show = ref(false);
const onInput = (value) => {
  localValue.value = value;
  show.value = false;
};
const localValue = computed({
  get: () => props.modelValue,
  set: (value) => emit("update:modelValue", value)
});
const attrs = computed(() => {
  const a = {
    ...light.styles.input,
    ...useAttrs,
    ...JSON.parse(JSON.stringify(props))
  };
  return a;
});
</script>

<template>
    <l-input v-bind="attrs" v-model="localValue" hide-bottom-space>
        <q-dialog v-model="show" full-height full-width>
            <l-file-manager closable @close="show = false" @input="onInput"></l-file-manager>
        </q-dialog>
        <template v-slot:prepend>
            <q-btn dense flat round icon="sym_o_folder" @click="show = true"></q-btn>
        </template>
    </l-input>
</template>
