<script setup>
import { ref } from "vue";
const props = defineProps({
  style: Object,
  name: String,
  autoFocus: Boolean,
});

const hasFocused = ref(false);
const onFocus = () => {
  hasFocused.value = true;
};

const onBlur = () => {
  hasFocused.value = false;
};

const focusStyle = {
  width: props.style.width + 10,
  height: props.style.height + 10,
};

const itemStyle = {
  width: props.style.width,
  height: props.style.height,
  backgroundColor: "#0FF000",
  lineHeight: props.style.height,
  fontSize: Math.floor(props.style.height * 0.55),
};
</script>

<template>
  <jsv-focus-block
    :name="name"
    :autoFocus="autoFocus ? '' : undefined"
    :onFocus="onFocus"
    :onBlur="onBlur"
  >
    <div :style="style">
      <div class="focus" :style="focusStyle" v-if="hasFocused"></div>
      <div class="item" :style="itemStyle">
        <slot></slot>
      </div>
    </div>
  </jsv-focus-block>
</template>

<style scoped>
.focus {
  top: -5;
  left: -5;
  background-color: #0000ff;
}
.item {
  text-align: center;
  font-size: 30;
  color: #000000;
  white-space: nowrap;
}
</style>