@softdin/shared 0.1.3 → 0.2.0

package/package.json

@@ -1,50 +1,50 @@
-{
-  "name": "@softdin/shared",
-  "version": "0.1.3",
-  "type": "module",
-  "files": [
-    "src",
-    "src/style.css"
-  ],
-  "exports": {
-    "./api": "./src/api.ts",
-    "./auth": "./src/auth.ts",
-    "./a11y": "./src/a11y/index.ts",
-    "./config/apiBase": "./src/config/apiBase.ts",
-    "./lib/pagination": "./src/lib/pagination.ts",
-    "./lib/catalog-pagination": "./src/lib/catalog-pagination.ts",
-    "./lib/softdin-libreria": "./src/lib/softdin-libreria.ts",
-    "./types/auth": "./src/types/auth.ts",
-    "./utils/apiError": "./src/utils/apiError.ts",
-    "./utils/tenantLogo": "./src/utils/tenantLogo.ts",
-    "./components/forms/PasswordInput.vue": "./src/components/forms/PasswordInput.vue",
-    "./components/forms/FormCloseButton.vue": "./src/components/forms/FormCloseButton.vue",
-    "./components/forms/FormHelpButton.vue": "./src/components/forms/FormHelpButton.vue",
-    "./components/forms/FormMaximizeButton.vue": "./src/components/forms/FormMaximizeButton.vue",
-    "./components/forms/FormRefreshButton.vue": "./src/components/forms/FormRefreshButton.vue",
-    "./components/forms/FormSaveButton.vue": "./src/components/forms/FormSaveButton.vue",
-    "./components/forms/FormCancelButton.vue": "./src/components/forms/FormCancelButton.vue",
-    "./components/forms/FormHelpModal.vue": "./src/components/forms/FormHelpModal.vue",
-    "./components/forms/ErrorAlert.vue": "./src/components/forms/ErrorAlert.vue",
-    "./components/navigation/CatalogListPagination.vue": "./src/components/navigation/CatalogListPagination.vue",
-    "./components/auth/AuthBrandHeader.vue": "./src/components/auth/AuthBrandHeader.vue",
-    "./components/auth/AuthShell.vue": "./src/components/auth/AuthShell.vue",
-    "./components/auth/DataProcessingConsentForm.vue": "./src/components/auth/DataProcessingConsentForm.vue",
-    "./components/auth/DataProcessingConsentCheckbox.vue": "./src/components/auth/DataProcessingConsentCheckbox.vue",
-    "./components/a11y/AccessibilityPreferencesPanel.vue": "./src/components/a11y/AccessibilityPreferencesPanel.vue",
-    "./components/a11y/SkipLink.vue": "./src/components/a11y/SkipLink.vue",
-    "./components/a11y/A11yLiveRegion.vue": "./src/components/a11y/A11yLiveRegion.vue",
-    "./components/a11y/ColorSchemeQuickToggle.vue": "./src/components/a11y/ColorSchemeQuickToggle.vue",
-    "./components/a11y/AccessibilityMenuControls.vue": "./src/components/a11y/AccessibilityMenuControls.vue",
-    "./style.css": "./src/style.css",
-    "./package.json": "./package.json"
-  },
-  "dependencies": {
-    "axios": "^1.18.1",
-    "softdinlibreriajs": "^12.0.43"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/DinSoftdin/softdin-shared.git"
-  }
-}
+{
+  "name": "@softdin/shared",
+  "version": "0.2.0",
+  "type": "module",
+  "files": [
+    "src",
+    "src/style.css"
+  ],
+  "exports": {
+    "./api": "./src/api.ts",
+    "./auth": "./src/auth.ts",
+    "./a11y": "./src/a11y/index.ts",
+    "./config/apiBase": "./src/config/apiBase.ts",
+    "./lib/pagination": "./src/lib/pagination.ts",
+    "./lib/catalog-pagination": "./src/lib/catalog-pagination.ts",
+    "./lib/softdin-libreria": "./src/lib/softdin-libreria.ts",
+    "./types/auth": "./src/types/auth.ts",
+    "./utils/apiError": "./src/utils/apiError.ts",
+    "./utils/tenantLogo": "./src/utils/tenantLogo.ts",
+    "./components/forms/PasswordInput.vue": "./src/components/forms/PasswordInput.vue",
+    "./components/forms/FormCloseButton.vue": "./src/components/forms/FormCloseButton.vue",
+    "./components/forms/FormHelpButton.vue": "./src/components/forms/FormHelpButton.vue",
+    "./components/forms/FormMaximizeButton.vue": "./src/components/forms/FormMaximizeButton.vue",
+    "./components/forms/FormRefreshButton.vue": "./src/components/forms/FormRefreshButton.vue",
+    "./components/forms/FormSaveButton.vue": "./src/components/forms/FormSaveButton.vue",
+    "./components/forms/FormCancelButton.vue": "./src/components/forms/FormCancelButton.vue",
+    "./components/forms/FormHelpModal.vue": "./src/components/forms/FormHelpModal.vue",
+    "./components/forms/ErrorAlert.vue": "./src/components/forms/ErrorAlert.vue",
+    "./components/navigation/CatalogListPagination.vue": "./src/components/navigation/CatalogListPagination.vue",
+    "./components/auth/AuthBrandHeader.vue": "./src/components/auth/AuthBrandHeader.vue",
+    "./components/auth/AuthShell.vue": "./src/components/auth/AuthShell.vue",
+    "./components/auth/DataProcessingConsentForm.vue": "./src/components/auth/DataProcessingConsentForm.vue",
+    "./components/auth/DataProcessingConsentCheckbox.vue": "./src/components/auth/DataProcessingConsentCheckbox.vue",
+    "./components/a11y/AccessibilityPreferencesPanel.vue": "./src/components/a11y/AccessibilityPreferencesPanel.vue",
+    "./components/a11y/SkipLink.vue": "./src/components/a11y/SkipLink.vue",
+    "./components/a11y/A11yLiveRegion.vue": "./src/components/a11y/A11yLiveRegion.vue",
+    "./components/a11y/ColorSchemeQuickToggle.vue": "./src/components/a11y/ColorSchemeQuickToggle.vue",
+    "./components/a11y/AccessibilityMenuControls.vue": "./src/components/a11y/AccessibilityMenuControls.vue",
+    "./style.css": "./src/style.css",
+    "./package.json": "./package.json"
+  },
+  "dependencies": {
+    "axios": "^1.18.1",
+    "softdinlibreriajs": "^12.0.43 || ^13.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/DinSoftdin/softdin-shared.git"
+  }
+}

package/src/components/forms/FormMaximizeButton.vue

@@ -1,143 +1,143 @@
-<script setup lang="ts">
-withDefaults(
-  defineProps<{
-    maximized?: boolean
-    disabled?: boolean
-    maximizeLabel?: string
-    restoreLabel?: string
-  }>(),
-  {
-    maximized: false,
-    disabled: false,
-    maximizeLabel: 'Maximizar',
-    restoreLabel: 'Restaurar',
-  },
-)
-
-defineEmits<{
-  click: [event: MouseEvent]
-}>()
-</script>
-
-<template>
-  <button
-    type="button"
-    class="softdin-form-maximize"
-    :aria-label="maximized ? restoreLabel : maximizeLabel"
-    :title="maximized ? restoreLabel : maximizeLabel"
-    :aria-pressed="maximized"
-    :disabled="disabled"
-    @click="$emit('click', $event)"
-  >
-    <!-- Restaurar: flechas hacia adentro (como en Perfil de Cargo) -->
-    <svg
-      v-if="maximized"
-      class="softdin-form-maximize__icon"
-      viewBox="0 0 20 20"
-      aria-hidden="true"
-    >
-      <path d="M7.5 3.5v4h-4" />
-      <path d="M12.5 3.5v4h4" />
-      <path d="M7.5 16.5v-4h-4" />
-      <path d="M12.5 16.5v-4h4" />
-      <path d="M7.5 7.5 3.5 3.5" />
-      <path d="M12.5 7.5l4-4" />
-      <path d="M7.5 12.5l-4 4" />
-      <path d="M12.5 12.5l4 4" />
-    </svg>
-    <!-- Maximizar: flechas hacia las esquinas -->
-    <svg v-else class="softdin-form-maximize__icon" viewBox="0 0 20 20" aria-hidden="true">
-      <path d="M3.5 7.5v-4h4" />
-      <path d="M16.5 7.5v-4h-4" />
-      <path d="M3.5 12.5v4h4" />
-      <path d="M16.5 12.5v4h-4" />
-      <path d="M3.5 3.5 7.5 7.5" />
-      <path d="M16.5 3.5 12.5 7.5" />
-      <path d="M3.5 16.5 7.5 12.5" />
-      <path d="M16.5 16.5 12.5 12.5" />
-    </svg>
-    <span>{{ maximized ? restoreLabel : maximizeLabel }}</span>
-  </button>
-</template>
-
-<style scoped>
-.softdin-form-maximize {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 2.25rem;
-  height: 2.25rem;
-  border: 1px solid #cbd5e1;
-  border-radius: 9999px;
-  background: #f8fafc;
-  padding: 0;
-  color: #475569;
-  cursor: pointer;
-  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, color 180ms ease;
-}
-
-.softdin-form-maximize:hover:not(:disabled),
-.softdin-form-maximize:focus-visible {
-  background: #f1f5f9;
-  color: #0f172a;
-  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12);
-  transform: translateY(-2px) rotate(4deg);
-}
-
-.softdin-form-maximize:focus-visible {
-  outline: 2px solid #64748b;
-  outline-offset: 2px;
-}
-
-.softdin-form-maximize:disabled {
-  opacity: 0.55;
-  cursor: not-allowed;
-}
-
-.softdin-form-maximize span {
-  position: absolute;
-  top: 50%;
-  right: calc(100% + 0.5rem);
-  z-index: 2;
-  transform: translateY(-50%) translateX(0.25rem);
-  border-radius: 0.375rem;
-  background: #0f172a;
-  padding: 0.25rem 0.5rem;
-  font-size: 0.75rem;
-  font-weight: 600;
-  white-space: nowrap;
-  color: #fff;
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 150ms ease, transform 150ms ease;
-}
-
-.softdin-form-maximize:hover:not(:disabled) span,
-.softdin-form-maximize:focus-visible span {
-  transform: translateY(-50%) translateX(0) rotate(-4deg);
-  opacity: 1;
-}
-
-.softdin-form-maximize__icon {
-  width: 1rem;
-  height: 1rem;
-  fill: none;
-  stroke: currentColor;
-  stroke-width: 1.8;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .softdin-form-maximize,
-  .softdin-form-maximize span {
-    transition: none;
-  }
-
-  .softdin-form-maximize:hover:not(:disabled),
-  .softdin-form-maximize:focus-visible {
-    transform: none;
-  }
-}
-</style>
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    maximized?: boolean
+    disabled?: boolean
+    maximizeLabel?: string
+    restoreLabel?: string
+  }>(),
+  {
+    maximized: false,
+    disabled: false,
+    maximizeLabel: 'Maximizar',
+    restoreLabel: 'Restaurar',
+  },
+)
+
+defineEmits<{
+  click: [event: MouseEvent]
+}>()
+</script>
+
+<template>
+  <button
+    type="button"
+    class="softdin-form-maximize"
+    :aria-label="maximized ? restoreLabel : maximizeLabel"
+    :title="maximized ? restoreLabel : maximizeLabel"
+    :aria-pressed="maximized"
+    :disabled="disabled"
+    @click="$emit('click', $event)"
+  >
+    <!-- Restaurar: flechas hacia adentro (como en Perfil de Cargo) -->
+    <svg
+      v-if="maximized"
+      class="softdin-form-maximize__icon"
+      viewBox="0 0 20 20"
+      aria-hidden="true"
+    >
+      <path d="M7.5 3.5v4h-4" />
+      <path d="M12.5 3.5v4h4" />
+      <path d="M7.5 16.5v-4h-4" />
+      <path d="M12.5 16.5v-4h4" />
+      <path d="M7.5 7.5 3.5 3.5" />
+      <path d="M12.5 7.5l4-4" />
+      <path d="M7.5 12.5l-4 4" />
+      <path d="M12.5 12.5l4 4" />
+    </svg>
+    <!-- Maximizar: flechas hacia las esquinas -->
+    <svg v-else class="softdin-form-maximize__icon" viewBox="0 0 20 20" aria-hidden="true">
+      <path d="M3.5 7.5v-4h4" />
+      <path d="M16.5 7.5v-4h-4" />
+      <path d="M3.5 12.5v4h4" />
+      <path d="M16.5 12.5v4h-4" />
+      <path d="M3.5 3.5 7.5 7.5" />
+      <path d="M16.5 3.5 12.5 7.5" />
+      <path d="M3.5 16.5 7.5 12.5" />
+      <path d="M16.5 16.5 12.5 12.5" />
+    </svg>
+    <span>{{ maximized ? restoreLabel : maximizeLabel }}</span>
+  </button>
+</template>
+
+<style scoped>
+.softdin-form-maximize {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  border: 1px solid #cbd5e1;
+  border-radius: 9999px;
+  background: #f8fafc;
+  padding: 0;
+  color: #475569;
+  cursor: pointer;
+  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, color 180ms ease;
+}
+
+.softdin-form-maximize:hover:not(:disabled),
+.softdin-form-maximize:focus-visible {
+  background: #f1f5f9;
+  color: #0f172a;
+  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12);
+  transform: translateY(-2px) rotate(4deg);
+}
+
+.softdin-form-maximize:focus-visible {
+  outline: 2px solid #64748b;
+  outline-offset: 2px;
+}
+
+.softdin-form-maximize:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.softdin-form-maximize span {
+  position: absolute;
+  top: 50%;
+  right: calc(100% + 0.5rem);
+  z-index: 2;
+  transform: translateY(-50%) translateX(0.25rem);
+  border-radius: 0.375rem;
+  background: #0f172a;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  white-space: nowrap;
+  color: #fff;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 150ms ease, transform 150ms ease;
+}
+
+.softdin-form-maximize:hover:not(:disabled) span,
+.softdin-form-maximize:focus-visible span {
+  transform: translateY(-50%) translateX(0) rotate(-4deg);
+  opacity: 1;
+}
+
+.softdin-form-maximize__icon {
+  width: 1rem;
+  height: 1rem;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.8;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .softdin-form-maximize,
+  .softdin-form-maximize span {
+    transition: none;
+  }
+
+  .softdin-form-maximize:hover:not(:disabled),
+  .softdin-form-maximize:focus-visible {
+    transform: none;
+  }
+}
+</style>

package/src/components/navigation/CatalogListPagination.vue

@@ -1,113 +1,113 @@
-<script setup lang="ts">
-withDefaults(defineProps<{
-  currentPage: number
-  lastPage: number
-  disabled?: boolean
-}>(), {
-  disabled: false,
-})
-
-const emit = defineEmits<{
-  go: [page: number]
-}>()
-</script>
-
-<template>
-  <footer v-if="lastPage > 1" class="pagination">
-    <button
-      type="button"
-      class="page-btn"
-      :disabled="disabled || currentPage <= 1"
-      title="Inicio"
-      aria-label="Inicio"
-      @click="emit('go', 1)"
-    >
-      <svg viewBox="0 0 24 24" aria-hidden="true" class="page-icon">
-        <path fill="currentColor" d="M18.41 16.59 13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z" />
-      </svg>
-    </button>
-    <button
-      type="button"
-      class="page-btn"
-      :disabled="disabled || currentPage <= 1"
-      title="Anterior"
-      aria-label="Anterior"
-      @click="emit('go', currentPage - 1)"
-    >
-      <svg viewBox="0 0 24 24" aria-hidden="true" class="page-icon">
-        <path fill="currentColor" d="M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
-      </svg>
-    </button>
-    <span class="pagination-label">Página {{ currentPage }} de {{ lastPage }}</span>
-    <button
-      type="button"
-      class="page-btn"
-      :disabled="disabled || currentPage >= lastPage"
-      title="Siguiente"
-      aria-label="Siguiente"
-      @click="emit('go', currentPage + 1)"
-    >
-      <svg viewBox="0 0 24 24" aria-hidden="true" class="page-icon">
-        <path fill="currentColor" d="M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
-      </svg>
-    </button>
-    <button
-      type="button"
-      class="page-btn"
-      :disabled="disabled || currentPage >= lastPage"
-      title="Final"
-      aria-label="Final"
-      @click="emit('go', lastPage)"
-    >
-      <svg viewBox="0 0 24 24" aria-hidden="true" class="page-icon">
-        <path fill="currentColor" d="m5.59 7.41 1.41-1.41 6 6-6 6-1.41-1.41L10.17 12zM16 6h2v12h-2z" />
-      </svg>
-    </button>
-  </footer>
-</template>
-
-<style scoped>
-.pagination {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.375rem;
-  border-top: 1px solid #e2e8f0;
-  padding: 0.875rem 1.25rem;
-}
-
-.pagination-label {
-  min-width: 7.5rem;
-  text-align: center;
-  font-size: 0.875rem;
-  color: #64748b;
-}
-
-.page-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 2rem;
-  height: 2rem;
-  border: 1px solid #cbd5e1;
-  border-radius: 0.375rem;
-  background: #fff;
-  color: #334155;
-  cursor: pointer;
-}
-
-.page-btn:hover:not(:disabled) {
-  background: #f8fafc;
-  border-color: #94a3b8;
-}
-
-.page-btn:disabled {
-  opacity: 0.45;
-  cursor: not-allowed;
-}
-
-.page-icon {
-  width: 1.125rem;
-  height: 1.125rem;
-}
-</style>
+<script setup lang="ts">
+withDefaults(defineProps<{
+  currentPage: number
+  lastPage: number
+  disabled?: boolean
+}>(), {
+  disabled: false,
+})
+
+const emit = defineEmits<{
+  go: [page: number]
+}>()
+</script>
+
+<template>
+  <footer v-if="lastPage > 1" class="pagination">
+    <button
+      type="button"
+      class="page-btn"
+      :disabled="disabled || currentPage <= 1"
+      title="Inicio"
+      aria-label="Inicio"
+      @click="emit('go', 1)"
+    >
+      <svg viewBox="0 0 24 24" aria-hidden="true" class="page-icon">
+        <path fill="currentColor" d="M18.41 16.59 13.82 12l4.59-4.59L17 6l-6 6 6 6zM6 6h2v12H6z" />
+      </svg>
+    </button>
+    <button
+      type="button"
+      class="page-btn"
+      :disabled="disabled || currentPage <= 1"
+      title="Anterior"
+      aria-label="Anterior"
+      @click="emit('go', currentPage - 1)"
+    >
+      <svg viewBox="0 0 24 24" aria-hidden="true" class="page-icon">
+        <path fill="currentColor" d="M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z" />
+      </svg>
+    </button>
+    <span class="pagination-label">Página {{ currentPage }} de {{ lastPage }}</span>
+    <button
+      type="button"
+      class="page-btn"
+      :disabled="disabled || currentPage >= lastPage"
+      title="Siguiente"
+      aria-label="Siguiente"
+      @click="emit('go', currentPage + 1)"
+    >
+      <svg viewBox="0 0 24 24" aria-hidden="true" class="page-icon">
+        <path fill="currentColor" d="M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
+      </svg>
+    </button>
+    <button
+      type="button"
+      class="page-btn"
+      :disabled="disabled || currentPage >= lastPage"
+      title="Final"
+      aria-label="Final"
+      @click="emit('go', lastPage)"
+    >
+      <svg viewBox="0 0 24 24" aria-hidden="true" class="page-icon">
+        <path fill="currentColor" d="m5.59 7.41 1.41-1.41 6 6-6 6-1.41-1.41L10.17 12zM16 6h2v12h-2z" />
+      </svg>
+    </button>
+  </footer>
+</template>
+
+<style scoped>
+.pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
+  border-top: 1px solid #e2e8f0;
+  padding: 0.875rem 1.25rem;
+}
+
+.pagination-label {
+  min-width: 7.5rem;
+  text-align: center;
+  font-size: 0.875rem;
+  color: #64748b;
+}
+
+.page-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 2rem;
+  height: 2rem;
+  border: 1px solid #cbd5e1;
+  border-radius: 0.375rem;
+  background: #fff;
+  color: #334155;
+  cursor: pointer;
+}
+
+.page-btn:hover:not(:disabled) {
+  background: #f8fafc;
+  border-color: #94a3b8;
+}
+
+.page-btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.page-icon {
+  width: 1.125rem;
+  height: 1.125rem;
+}
+</style>