<script lang='ts' setup>
import type { ComponentInstance } from "vue";
import { IonInput } from "@ionic/vue";
import { h } from "vue";

const vm = getCurrentInstance()!;

function changeRef(exposed: any) {
  vm.exposed = exposed;
}

defineExpose({} as ComponentInstance<typeof IonInput>);
</script>

<template>
  <component :is="h(IonInput, { ...$attrs, ref: changeRef }, { default: () => { return $slots.default ? $slots.default() : null } })" class="ui-input" />
</template>

<style scoped>
.ui-input {
  --padding-start: 12px;
  --padding-end: 12px;
  --background: var(--ui-input-background, #fff);
  --color: var(--ui-input-color, #000);
  --border-radius: 8px;
}
.ui-input + .ui-input {
  margin-top: 12px;
}
</style>
