advent22/ui/src/components/bulma/Drawer.vue

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="card">
    <header class="card-header is-unselectable" style="cursor: pointer">
      <p class="card-header-title" @click="toggle">{{ header }}</p>

      <p v-if="refreshable" class="card-header-icon px-0">
        <BulmaButton class="is-small is-primary" @click="refresh">
          <FontAwesomeIcon
            :icon="['fas', 'arrows-rotate']"
            :spin="is_open && state === 'loading'"
          />
        </BulmaButton>
      </p>

      <button class="card-header-icon" @click="toggle">
        <span class="icon">
          <FontAwesomeIcon
            :icon="['fas', is_open ? 'angle-down' : 'angle-right']"
          />
        </span>
      </button>
    </header>

    <template v-if="is_open">
      <div v-if="state === 'loading'" class="card-content">
        <progress class="progress is-primary" />
      </div>
      <div
        v-else-if="state === 'failed'"
        class="card-content has-text-danger has-text-centered"
      >
        <span class="icon is-large">
          <FontAwesomeIcon :icon="['fas', 'ban']" size="3x" />
        </span>
      </div>
      <slot v-else name="default" />
    </template>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import BulmaButton from "./Button.vue";

withDefaults(
  defineProps<{
    header: string;
    refreshable?: boolean;
  }>(),
  { refreshable: false },
);

const emit = defineEmits<{
  open: [
    {
      ready(): void;
      fail(): void;
    },
  ];
}>();

const is_open = ref(false);
const state = ref<"loading" | "ready" | "failed">("loading");

function toggle() {
  is_open.value = !is_open.value;

  if (is_open.value) {
    state.value = "loading";

    emit("open", {
      ready: () => (state.value = "ready"),
      fail: () => (state.value = "failed"),
    });
  }
}

function refresh() {
  is_open.value = false;
  toggle();
}
</script>

<style scoped>
div.card:not(:last-child) {
  margin-bottom: 1.5rem;
}
</style>