Spinner (Indikator Pemuatan)

<span class="mjl-spinner" role="status">
  <span class="sr-only">Memuat data...</span>
</span>

<button type="button" class="mjl-btn mjl-btn--primary mjl-btn--md" aria-busy="true" disabled>
  <span class="mjl-spinner mjl-spinner--sm mjl-spinner--white" aria-hidden="true"></span>
  Menyimpan...
</button>

<script setup lang="ts">
import { MjlSpinner, MjlButton } from '@majalengka/vue';
</script>

<template>
  <MjlSpinner label="Memuat data penduduk..." />
  <MjlSpinner size="lg" />
  <MjlButton loading>Menyimpan...</MjlButton>
</template>

export function MjlSpinner({ size = 'md', white = false, label = 'Memuat...' }: { size?: 'sm' | 'md' | 'lg'; white?: boolean; label?: string }) {
  const cls = ['mjl-spinner', size !== 'md' && `mjl-spinner--${size}`, white && 'mjl-spinner--white'].filter(Boolean).join(' ');
  return (
    <span className={cls} role="status">
      <span className="sr-only">{label}</span>
    </span>
  );
}

// Pemakaian: {loading && <MjlSpinner label="Memuat data penduduk..." />}

import { Component, input } from '@angular/core';

@Component({
  selector: 'mjl-spinner',
  standalone: true,
  template: `
    <span class="mjl-spinner" [class.mjl-spinner--sm]="size() === 'sm'" [class.mjl-spinner--lg]="size() === 'lg'" role="status">
      <span class="sr-only">{{ label() }}</span>
    </span>
  `,
})
export class MjlSpinner {
  size = input<'sm' | 'md' | 'lg'>('md');
  label = input('Memuat...');
}

// Pemakaian: @if (loading) { <mjl-spinner label="Memuat data..." /> }

{{-- resources/views/components/mjl/spinner.blade.php --}}
@props(['size' => 'md', 'label' => 'Memuat...'])
<span {{ $attributes->class(['mjl-spinner', "mjl-spinner--{$size}" => $size !== 'md']) }} role="status">
  <span class="sr-only">{{ $label }}</span>
</span>

{{-- Pemakaian --}}
<x-mjl.spinner size="lg" label="Memuat data penduduk..." />

<span class="mjl-spinner mjl-spinner--lg" role="status">
  <span class="sr-only"><?= htmlspecialchars($pesanMemuat ?? 'Memuat...', ENT_QUOTES, 'UTF-8') ?></span>
</span>