<template>
  <button type="button" class="vm-crud-toolbar__btn is-ghost" @click="crud.refresh()">
    <i class="ri-refresh-line" />
    {{ crudLabel('refresh', crud.dict.label) }}
  </button>
</template>

<script setup lang="ts">
import { useCrud } from './useCrud'
import { crudLabel } from './style'

defineOptions({ name: 'vm-refresh-btn' })
const crud = useCrud()
</script>

<style lang="scss" scoped>
.vm-crud-toolbar__btn {
  display: inline-flex;
  height: 36px;
  align-items: center;
  gap: 4px;
  padding: 0 14px;
  border: none;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: var(--muted);
  color: var(--foreground);

  &:hover {
    background: color-mix(in srgb, var(--muted) 70%, var(--foreground) 8%);
  }
}
</style>
