@softdin/shared 0.1.3

package/src/auth.ts

@@ -0,0 +1,134 @@
+import { api } from './api'
+import type {
+  AuthResponse,
+  CentralLoginResponse,
+  CentralAdminLoginCredentials,
+  DataProcessingConsentPolicy,
+  DataProcessingConsentResponse,
+  LoginCredentials,
+  MeResponse,
+  ProfilePhotoResponse,
+  ProfileUpdateResponse,
+  PublicTenantsResponse,
+  RegisterPayload,
+  RegisterResponse,
+  ForgotPasswordResponse,
+  ResetPasswordPayload,
+  MessageResponse,
+  UpdateProfilePayload,
+} from './types/auth'
+
+export const authService = {
+  async fetchPublicTenants(): Promise<PublicTenantsResponse> {
+    const { data } = await api.get<PublicTenantsResponse>('/auth/tenants')
+    return data
+  },
+
+  async register(payload: RegisterPayload, logo?: File | null): Promise<RegisterResponse> {
+    if (logo && payload.tenant_mode === 'new') {
+      const formData = new FormData()
+      for (const [key, value] of Object.entries(payload)) {
+        if (value !== undefined && value !== null) {
+          formData.append(key, typeof value === 'boolean' ? (value ? '1' : '0') : String(value))
+        }
+      }
+      formData.append('logo', logo)
+
+      const { data } = await api.post<RegisterResponse>('/auth/register', formData, {
+        timeout: 180_000,
+      })
+      return data
+    }
+
+    const { data } = await api.post<RegisterResponse>('/auth/register', payload, {
+      timeout: 180_000,
+    })
+    return data
+  },
+
+  async forgotPassword(email: string): Promise<ForgotPasswordResponse> {
+    const { data } = await api.post<ForgotPasswordResponse>('/auth/forgot-password', { email })
+    return data
+  },
+
+  async resetPassword(payload: ResetPasswordPayload): Promise<MessageResponse> {
+    const { data } = await api.post<MessageResponse>('/auth/reset-password', payload)
+    return data
+  },
+
+  async centralLogin(email: string, password: string): Promise<CentralLoginResponse> {
+    const { data } = await api.post<CentralLoginResponse>('/auth/central-login', {
+      email,
+      password,
+    })
+    return data
+  },
+
+  async centralAdminLogin(credentials: CentralAdminLoginCredentials): Promise<AuthResponse> {
+    const { data } = await api.post<AuthResponse>('/auth/central-admin-login', credentials)
+    return data
+  },
+
+  async login(credentials: LoginCredentials): Promise<AuthResponse> {
+    const { data } = await api.post<AuthResponse>('/auth/login', credentials)
+    return data
+  },
+
+  async switchTenant(tenant: string): Promise<AuthResponse> {
+    const { data } = await api.post<AuthResponse>('/auth/switch-tenant', { tenant })
+    return data
+  },
+
+  async updateProfile(payload: UpdateProfilePayload): Promise<ProfileUpdateResponse> {
+    const { data } = await api.patch<ProfileUpdateResponse>('/auth/profile', payload)
+    return data
+  },
+
+  async uploadProfilePhoto(file: File): Promise<ProfilePhotoResponse> {
+    const formData = new FormData()
+    formData.append('photo', file)
+    const { data } = await api.post<ProfilePhotoResponse>('/auth/profile/photo', formData, {
+      headers: { 'Content-Type': 'multipart/form-data' },
+    })
+    return data
+  },
+
+  async fetchProfilePhoto(): Promise<Blob> {
+    const { data } = await api.get<Blob>('/auth/profile/photo', {
+      responseType: 'blob',
+      headers: { Accept: 'image/*,*/*' },
+    })
+    return data
+  },
+
+  async deleteProfilePhoto(): Promise<ProfilePhotoResponse> {
+    const { data } = await api.delete<ProfilePhotoResponse>('/auth/profile/photo')
+    return data
+  },
+
+  async me(): Promise<MeResponse> {
+    const { data } = await api.get<MeResponse>('/auth/me')
+    return data
+  },
+
+  async fetchDataProcessingConsentPolicy(): Promise<DataProcessingConsentPolicy> {
+    const { data } = await api.get<DataProcessingConsentPolicy>('/auth/data-processing-consent/policy')
+    return data
+  },
+
+  async fetchDataProcessingConsent(): Promise<DataProcessingConsentPolicy> {
+    const { data } = await api.get<DataProcessingConsentPolicy>('/auth/data-processing-consent')
+    return data
+  },
+
+  async submitDataProcessingConsent(accepted: boolean): Promise<DataProcessingConsentResponse> {
+    const { data } = await api.post<DataProcessingConsentResponse>('/auth/data-processing-consent', {
+      accepted,
+    })
+    return data
+  },
+
+  async logout(): Promise<void> {
+    await api.post('/auth/logout')
+  },
+}

package/src/components/a11y/A11yLiveRegion.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { useA11yAnnouncer } from '../../a11y/announcer'
+
+const { message, politeness } = useA11yAnnouncer()
+</script>
+
+<template>
+  <div class="sr-only" :aria-live="politeness" aria-atomic="true" role="status">
+    {{ message }}
+  </div>
+</template>

package/src/components/a11y/AccessibilityMenuControls.vue

@@ -0,0 +1,426 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  accessibilityPreferencesState,
+  patchAccessibilityPreferences,
+  type A11yBrandAccent,
+  type A11yColorScheme,
+  type A11yFontFamily,
+  type A11yTextScale,
+} from '../../a11y'
+
+type SubmenuKey = 'theme' | 'accent' | 'font' | 'scale'
+
+const prefs = accessibilityPreferencesState
+const accessibilityOpen = ref(false)
+const openSubmenu = ref<SubmenuKey | null>(null)
+
+const themeOptions: Array<{ value: A11yColorScheme; label: string }> = [
+  { value: 'light', label: 'Claro' },
+  { value: 'dark', label: 'Oscuro' },
+  { value: 'system', label: 'Auto' },
+]
+
+const accentOptions: Array<{ value: A11yBrandAccent; label: string; swatch: string }> = [
+  { value: 'green', label: 'Verde', swatch: '#16a34a' },
+  { value: 'blue', label: 'Azul', swatch: '#2563eb' },
+  { value: 'red', label: 'Rojo', swatch: '#dc2626' },
+  { value: 'purple', label: 'Morado', swatch: '#9333ea' },
+  { value: 'orange', label: 'Naranja', swatch: '#ea580c' },
+  { value: 'teal', label: 'Turquesa', swatch: '#0d9488' },
+]
+
+const fontOptions: Array<{ value: A11yFontFamily; label: string }> = [
+  { value: 'system', label: 'Sistema' },
+  { value: 'serif', label: 'Serif' },
+  { value: 'dyslexia', label: 'Lectura' },
+]
+
+const scaleOptions: Array<{ value: A11yTextScale; label: string }> = [
+  { value: 'xs', label: 'Muy pequeño' },
+  { value: 'sm', label: 'Pequeño' },
+  { value: 'md', label: 'Medio' },
+  { value: 'lg', label: 'Grande' },
+  { value: 'xl', label: 'Extra' },
+]
+
+const themeLabel = () =>
+  themeOptions.find((option) => option.value === prefs.colorScheme)?.label ?? 'Claro'
+
+const accentLabel = () =>
+  accentOptions.find((option) => option.value === prefs.brandAccent)?.label ?? 'Verde'
+
+const fontLabel = () =>
+  fontOptions.find((option) => option.value === prefs.fontFamily)?.label ?? 'Sistema'
+
+const scaleLabel = () =>
+  scaleOptions.find((option) => option.value === prefs.textScale)?.label ?? 'Medio'
+
+const summaryLabel = () =>
+  `${themeLabel()} · ${accentLabel()} · ${fontLabel()} · ${scaleLabel()}`
+
+function toggleAccessibility(): void {
+  accessibilityOpen.value = !accessibilityOpen.value
+  if (!accessibilityOpen.value) {
+    openSubmenu.value = null
+  }
+}
+
+function toggleSubmenu(key: SubmenuKey): void {
+  openSubmenu.value = openSubmenu.value === key ? null : key
+}
+
+function setColorScheme(value: A11yColorScheme): void {
+  patchAccessibilityPreferences({ colorScheme: value })
+  openSubmenu.value = null
+}
+
+function setBrandAccent(value: A11yBrandAccent): void {
+  patchAccessibilityPreferences({ brandAccent: value })
+  openSubmenu.value = null
+}
+
+function setFontFamily(value: A11yFontFamily): void {
+  patchAccessibilityPreferences({ fontFamily: value })
+  openSubmenu.value = null
+}
+
+function setTextScale(value: A11yTextScale): void {
+  patchAccessibilityPreferences({ textScale: value })
+  openSubmenu.value = null
+}
+</script>
+
+<template>
+  <div class="a11y-menu" role="group" aria-label="Accesibilidad">
+    <button
+      type="button"
+      class="a11y-menu__root"
+      :aria-expanded="accessibilityOpen"
+      aria-controls="a11y-menu-panel"
+      @click.stop="toggleAccessibility"
+    >
+      <span class="a11y-menu__root-main">
+        <span class="a11y-menu__root-label">Accesibilidad</span>
+        <span class="a11y-menu__root-value">{{ summaryLabel() }}</span>
+      </span>
+      <span class="a11y-menu__chevron" aria-hidden="true">
+        {{ accessibilityOpen ? '▴' : '▾' }}
+      </span>
+    </button>
+
+    <div v-if="accessibilityOpen" id="a11y-menu-panel" class="a11y-menu__panel">
+      <div class="a11y-menu__item">
+        <button
+          type="button"
+          class="a11y-menu__trigger"
+          :aria-expanded="openSubmenu === 'theme'"
+          aria-controls="a11y-submenu-theme"
+          @click.stop="toggleSubmenu('theme')"
+        >
+          <span class="a11y-menu__trigger-main">
+            <span class="a11y-menu__trigger-label">Tema</span>
+            <span class="a11y-menu__trigger-value">{{ themeLabel() }}</span>
+          </span>
+          <span class="a11y-menu__chevron" aria-hidden="true">
+            {{ openSubmenu === 'theme' ? '▴' : '▾' }}
+          </span>
+        </button>
+        <div
+          v-if="openSubmenu === 'theme'"
+          id="a11y-submenu-theme"
+          class="a11y-menu__submenu"
+          role="radiogroup"
+          aria-label="Tema de la interfaz"
+        >
+          <button
+            v-for="option in themeOptions"
+            :key="option.value"
+            type="button"
+            class="a11y-menu__option"
+            :class="{ 'is-active': prefs.colorScheme === option.value }"
+            role="radio"
+            :aria-checked="prefs.colorScheme === option.value"
+            @click.stop="setColorScheme(option.value)"
+          >
+            <span>{{ option.label }}</span>
+            <span v-if="prefs.colorScheme === option.value" aria-hidden="true">✓</span>
+          </button>
+        </div>
+      </div>
+
+      <div class="a11y-menu__item">
+        <button
+          type="button"
+          class="a11y-menu__trigger"
+          :aria-expanded="openSubmenu === 'accent'"
+          aria-controls="a11y-submenu-accent"
+          @click.stop="toggleSubmenu('accent')"
+        >
+          <span class="a11y-menu__trigger-main">
+            <span class="a11y-menu__trigger-label">Acento</span>
+            <span class="a11y-menu__trigger-value">{{ accentLabel() }}</span>
+          </span>
+          <span class="a11y-menu__chevron" aria-hidden="true">
+            {{ openSubmenu === 'accent' ? '▴' : '▾' }}
+          </span>
+        </button>
+        <div
+          v-if="openSubmenu === 'accent'"
+          id="a11y-submenu-accent"
+          class="a11y-menu__submenu"
+          role="radiogroup"
+          aria-label="Color de acento"
+        >
+          <button
+            v-for="option in accentOptions"
+            :key="option.value"
+            type="button"
+            class="a11y-menu__option"
+            :class="{ 'is-active': prefs.brandAccent === option.value }"
+            role="radio"
+            :aria-checked="prefs.brandAccent === option.value"
+            @click.stop="setBrandAccent(option.value)"
+          >
+            <span class="a11y-menu__option-accent">
+              <span
+                class="a11y-menu__swatch"
+                :style="{ backgroundColor: option.swatch }"
+                aria-hidden="true"
+              />
+              {{ option.label }}
+            </span>
+            <span v-if="prefs.brandAccent === option.value" aria-hidden="true">✓</span>
+          </button>
+        </div>
+      </div>
+
+      <div class="a11y-menu__item">
+        <button
+          type="button"
+          class="a11y-menu__trigger"
+          :aria-expanded="openSubmenu === 'font'"
+          aria-controls="a11y-submenu-font"
+          @click.stop="toggleSubmenu('font')"
+        >
+          <span class="a11y-menu__trigger-main">
+            <span class="a11y-menu__trigger-label">Fuente</span>
+            <span class="a11y-menu__trigger-value">{{ fontLabel() }}</span>
+          </span>
+          <span class="a11y-menu__chevron" aria-hidden="true">
+            {{ openSubmenu === 'font' ? '▴' : '▾' }}
+          </span>
+        </button>
+        <div
+          v-if="openSubmenu === 'font'"
+          id="a11y-submenu-font"
+          class="a11y-menu__submenu"
+          role="radiogroup"
+          aria-label="Tipo de fuente"
+        >
+          <button
+            v-for="option in fontOptions"
+            :key="option.value"
+            type="button"
+            class="a11y-menu__option"
+            :class="{ 'is-active': prefs.fontFamily === option.value }"
+            role="radio"
+            :aria-checked="prefs.fontFamily === option.value"
+            @click.stop="setFontFamily(option.value)"
+          >
+            <span>{{ option.label }}</span>
+            <span v-if="prefs.fontFamily === option.value" aria-hidden="true">✓</span>
+          </button>
+        </div>
+      </div>
+
+      <div class="a11y-menu__item">
+        <button
+          type="button"
+          class="a11y-menu__trigger"
+          :aria-expanded="openSubmenu === 'scale'"
+          aria-controls="a11y-submenu-scale"
+          @click.stop="toggleSubmenu('scale')"
+        >
+          <span class="a11y-menu__trigger-main">
+            <span class="a11y-menu__trigger-label">Tamaño</span>
+            <span class="a11y-menu__trigger-value">{{ scaleLabel() }}</span>
+          </span>
+          <span class="a11y-menu__chevron" aria-hidden="true">
+            {{ openSubmenu === 'scale' ? '▴' : '▾' }}
+          </span>
+        </button>
+        <div
+          v-if="openSubmenu === 'scale'"
+          id="a11y-submenu-scale"
+          class="a11y-menu__submenu"
+          role="radiogroup"
+          aria-label="Tamaño del texto"
+        >
+          <button
+            v-for="option in scaleOptions"
+            :key="option.value"
+            type="button"
+            class="a11y-menu__option"
+            :class="{ 'is-active': prefs.textScale === option.value }"
+            role="radio"
+            :aria-checked="prefs.textScale === option.value"
+            @click.stop="setTextScale(option.value)"
+          >
+            <span>{{ option.label }}</span>
+            <span v-if="prefs.textScale === option.value" aria-hidden="true">✓</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.a11y-menu {
+  border-top: 1px solid var(--color-border, #e2e8f0);
+  border-bottom: 1px solid var(--color-border, #e2e8f0);
+  background: var(--color-panel, #fff);
+}
+
+.a11y-menu__root {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.625rem 1rem;
+  text-align: left;
+  color: var(--color-text, #334155);
+}
+
+.a11y-menu__root:hover {
+  background: var(--color-surface, #f8fafc);
+}
+
+.a11y-menu__root:focus-visible {
+  outline: 2px solid var(--color-brand-600);
+  outline-offset: -2px;
+}
+
+.a11y-menu__root-main {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+
+.a11y-menu__root-label {
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.a11y-menu__root-value {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.75rem;
+  color: var(--color-text-muted, #64748b);
+}
+
+.a11y-menu__panel {
+  border-top: 1px solid var(--color-border, #f1f5f9);
+  background: var(--color-surface, #f8fafc);
+}
+
+.a11y-menu__item + .a11y-menu__item {
+  border-top: 1px solid var(--color-border, #e2e8f0);
+}
+
+.a11y-menu__trigger {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.5625rem 1rem 0.5625rem 1.25rem;
+  text-align: left;
+  color: var(--color-text, #334155);
+}
+
+.a11y-menu__trigger:hover {
+  background: var(--color-panel, #fff);
+}
+
+.a11y-menu__trigger:focus-visible {
+  outline: 2px solid var(--color-brand-600);
+  outline-offset: -2px;
+}
+
+.a11y-menu__trigger-main {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+
+.a11y-menu__trigger-label {
+  font-size: 0.8125rem;
+  font-weight: 500;
+}
+
+.a11y-menu__trigger-value {
+  font-size: 0.6875rem;
+  color: var(--color-text-muted, #64748b);
+}
+
+.a11y-menu__chevron {
+  flex-shrink: 0;
+  font-size: 0.75rem;
+  color: var(--color-text-muted, #94a3b8);
+}
+
+.a11y-menu__submenu {
+  display: flex;
+  flex-direction: column;
+  padding: 0.25rem 0.5rem 0.625rem 0.75rem;
+  background: var(--color-panel, #fff);
+}
+
+.a11y-menu__option {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  border-radius: 0.375rem;
+  padding: 0.5rem 0.625rem;
+  text-align: left;
+  font-size: 0.8125rem;
+  color: var(--color-text, #334155);
+}
+
+.a11y-menu__option:hover {
+  background: var(--color-surface, #f8fafc);
+}
+
+.a11y-menu__option.is-active {
+  background: var(--color-brand-50);
+  color: var(--color-brand-800);
+  font-weight: 600;
+}
+
+.a11y-menu__option:focus-visible {
+  outline: 2px solid var(--color-brand-600);
+  outline-offset: 1px;
+}
+
+.a11y-menu__option-accent {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.a11y-menu__swatch {
+  display: inline-block;
+  height: 0.875rem;
+  width: 0.875rem;
+  border-radius: 9999px;
+  border: 1px solid rgb(0 0 0 / 0.15);
+}
+</style>