@softdin/shared 0.1.3

package/src/components/forms/FormSaveButton.vue

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    loading?: boolean
+    disabled?: boolean
+    label?: string
+    loadingLabel?: string
+  }>(),
+  {
+    loading: false,
+    disabled: false,
+    label: 'Guardar',
+    loadingLabel: 'Guardando…',
+  },
+)
+</script>
+
+<template>
+  <button
+    type="submit"
+    class="softdin-form-save"
+    :aria-label="loading ? loadingLabel : label"
+    :title="loading ? loadingLabel : label"
+    :disabled="disabled || loading"
+  >
+    <svg
+      v-if="loading"
+      class="softdin-form-save__icon softdin-form-save__icon--loading"
+      viewBox="0 0 20 20"
+      aria-hidden="true"
+    >
+      <circle cx="10" cy="10" r="7" />
+      <path d="M10 6v4l2.5 1.5" />
+    </svg>
+    <svg v-else class="softdin-form-save__icon" viewBox="0 0 20 20" aria-hidden="true">
+      <path d="M4 3h10l2 2v12H4z" />
+      <path d="M7 3v5h6V3M7 16v-5h6v5" />
+    </svg>
+    <span>{{ loading ? loadingLabel : label }}</span>
+  </button>
+</template>
+
+<style scoped>
+.softdin-form-save {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  min-height: 2.25rem;
+  border: 0;
+  border-radius: 9999px;
+  background: var(--color-brand-600);
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #fff;
+  cursor: pointer;
+  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
+}
+
+.softdin-form-save:hover:not(:disabled),
+.softdin-form-save:focus-visible {
+  background: var(--color-brand-700);
+  box-shadow: 0 6px 14px color-mix(in srgb, var(--color-brand-700) 28%, transparent);
+  transform: translateY(-2px);
+}
+
+.softdin-form-save:focus-visible {
+  outline: 2px solid var(--color-brand-600);
+  outline-offset: 2px;
+}
+
+.softdin-form-save:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.softdin-form-save__icon {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.8;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.softdin-form-save__icon--loading {
+  animation: softdin-form-save-spin 1s linear infinite;
+}
+
+@keyframes softdin-form-save-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .softdin-form-save {
+    transition: none;
+  }
+
+  .softdin-form-save:hover:not(:disabled),
+  .softdin-form-save:focus-visible {
+    transform: none;
+  }
+
+  .softdin-form-save__icon--loading {
+    animation: none;
+  }
+}
+</style>

package/src/components/forms/PasswordInput.vue

@@ -0,0 +1,154 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    id?: string
+    modelValue: string
+    required?: boolean
+    autocomplete?: string
+    minlength?: number | string
+    readonly?: boolean
+    disabled?: boolean
+  }>(),
+  {
+    required: false,
+    readonly: false,
+    disabled: false,
+  },
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+const visible = ref(false)
+
+const inputType = computed(() => (visible.value ? 'text' : 'password'))
+
+const toggleLabel = computed(() =>
+  visible.value ? 'Ocultar contraseña' : 'Mostrar contraseña',
+)
+
+function onInput(event: Event): void {
+  emit('update:modelValue', (event.target as HTMLInputElement).value)
+}
+</script>
+
+<template>
+  <div class="password-input">
+    <input
+      :id="id"
+      :type="inputType"
+      :value="modelValue"
+      :required="required"
+      :autocomplete="autocomplete"
+      :minlength="minlength"
+      :readonly="readonly"
+      :disabled="disabled"
+      class="password-input__field"
+      @input="onInput"
+    />
+
+    <button
+      type="button"
+      class="password-input__toggle"
+      :aria-label="toggleLabel"
+      :title="toggleLabel"
+      :aria-pressed="visible"
+      :disabled="disabled"
+      @click="visible = !visible"
+    >
+      <svg
+        v-if="visible"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.75"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+      >
+        <path d="M3 3l18 18" />
+        <path d="M10.58 10.58a2 2 0 0 0 2.84 2.84" />
+        <path d="M9.88 4.24A10.94 10.94 0 0 1 12 4c5 0 9.27 3.11 10.5 7.5a11.6 11.6 0 0 1-2.08 3.58" />
+        <path d="M6.09 6.09A10.94 10.94 0 0 0 2.5 12c1.23 4.39 5.5 7.5 10.5 7.5a10.9 10.9 0 0 0 4.24-.88" />
+      </svg>
+
+      <svg
+        v-else
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.75"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+      >
+        <path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z" />
+        <circle cx="12" cy="12" r="3" />
+      </svg>
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.password-input {
+  position: relative;
+  width: 100%;
+}
+
+.password-input__field {
+  width: 100%;
+  border-radius: 0.5rem;
+  border: 1px solid #cbd5e1;
+  padding: 0.5rem 2.5rem 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  outline: none;
+  background: #fff;
+}
+
+.password-input__field:focus {
+  border-color: var(--color-brand-500);
+  box-shadow: 0 0 0 3px var(--color-brand-100);
+}
+
+.password-input__field:disabled {
+  background: #f1f5f9;
+  color: #64748b;
+}
+
+.password-input__toggle {
+  position: absolute;
+  top: 50%;
+  right: 0.5rem;
+  display: flex;
+  height: 1.75rem;
+  width: 1.75rem;
+  align-items: center;
+  justify-content: center;
+  transform: translateY(-50%);
+  border: none;
+  border-radius: 0.375rem;
+  background: transparent;
+  color: #64748b;
+  cursor: pointer;
+}
+
+.password-input__toggle:hover:not(:disabled) {
+  color: #334155;
+  background: #f1f5f9;
+}
+
+.password-input__toggle:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.password-input__toggle svg {
+  height: 1.125rem;
+  width: 1.125rem;
+}
+</style>

package/src/components/navigation/CatalogListPagination.vue

@@ -0,0 +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>

package/src/config/apiBase.ts

@@ -0,0 +1,37 @@
+/**
+ * URL base de la API. Debe coincidir con APP_URL del servidor + /api/v1
+ * (variable VITE_API_URL en softdin/.env o .env.production).
+ */
+const API_VERSION_SUFFIX = '/api/v1'
+
+function hasApiVersionPath(url: string): boolean {
+  return /\/api\/v\d+\/?$/i.test(url)
+}
+
+export function resolveApiBaseUrl(): string {
+  const configured = import.meta.env.VITE_API_URL?.trim()
+
+  if (configured) {
+    const normalized = configured.replace(/\/+$/, '')
+    if (hasApiVersionPath(normalized)) {
+      return normalized
+    }
+
+    return `${normalized}${API_VERSION_SUFFIX}`
+  }
+
+  return `http://localhost:8000${API_VERSION_SUFFIX}`
+}
+
+/** true si VITE_API_URL no incluía /api/v1 y se normalizó automáticamente */
+export function wasApiBaseUrlNormalized(): boolean {
+  const configured = import.meta.env.VITE_API_URL?.trim()
+  if (!configured) {
+    return false
+  }
+
+  return !hasApiVersionPath(configured.replace(/\/+$/, ''))
+}
+
+export const API_BASE_URL = resolveApiBaseUrl()
+export const VITE_API_URL_RAW = import.meta.env.VITE_API_URL?.trim() ?? ''

package/src/lib/catalog-pagination.ts

@@ -0,0 +1,27 @@
+export const CATALOG_PAGE_SIZE = 50
+
+export type CatalogPageResult<T> = {
+  pageItems: T[]
+  currentPage: number
+  lastPage: number
+  total: number
+}
+
+/** Parte un arreglo en páginas (paginación en memoria). */
+export function paginateCatalogItems<T>(
+  items: readonly T[],
+  page: number,
+  pageSize: number = CATALOG_PAGE_SIZE,
+): CatalogPageResult<T> {
+  const total = items.length
+  const lastPage = Math.max(1, Math.ceil(total / pageSize) || 1)
+  const currentPage = Math.min(Math.max(1, page), lastPage)
+  const start = (currentPage - 1) * pageSize
+
+  return {
+    pageItems: items.slice(start, start + pageSize) as T[],
+    currentPage,
+    lastPage,
+    total,
+  }
+}

package/src/lib/pagination.ts

@@ -0,0 +1,86 @@
+export interface PaginationMeta {
+  current_page: number
+  last_page: number
+  per_page: number
+  total: number
+  from: number | null
+  to: number | null
+}
+
+export interface Paginated<T> {
+  data: T[]
+  meta: PaginationMeta
+  links?: Record<string, string | null>
+}
+
+const EMPTY_META: PaginationMeta = {
+  current_page: 1,
+  last_page: 1,
+  per_page: 50,
+  total: 0,
+  from: null,
+  to: null,
+}
+
+function normalizeMeta(source: unknown): PaginationMeta {
+  if (!source || typeof source !== 'object') {
+    return { ...EMPTY_META }
+  }
+
+  const meta = source as Record<string, unknown>
+  if (typeof meta.current_page !== 'number') {
+    return { ...EMPTY_META }
+  }
+
+  return {
+    current_page: meta.current_page,
+    last_page: typeof meta.last_page === 'number' ? meta.last_page : 1,
+    per_page: typeof meta.per_page === 'number' ? meta.per_page : 50,
+    total: typeof meta.total === 'number' ? meta.total : 0,
+    from: typeof meta.from === 'number' ? meta.from : null,
+    to: typeof meta.to === 'number' ? meta.to : null,
+  }
+}
+
+export function normalizePaginated<T>(payload: unknown): Paginated<T> {
+  if (!payload || typeof payload !== 'object') {
+    return { data: [], meta: { ...EMPTY_META } }
+  }
+
+  const body = payload as Record<string, unknown>
+
+  if (Array.isArray(body.data)) {
+    return {
+      data: body.data as T[],
+      meta: normalizeMeta(body.meta ?? body),
+      links: body.links as Paginated<T>['links'],
+    }
+  }
+
+  const nested = body.data
+  if (nested && typeof nested === 'object' && !Array.isArray(nested)) {
+    const inner = nested as Record<string, unknown>
+    if (Array.isArray(inner.data)) {
+      return {
+        data: inner.data as T[],
+        meta: normalizeMeta(inner.meta ?? inner),
+        links: inner.links as Paginated<T>['links'],
+      }
+    }
+  }
+
+  return { data: [], meta: { ...EMPTY_META } }
+}
+
+export function normalizeResource<T>(payload: unknown): T {
+  if (!payload || typeof payload !== 'object') {
+    throw new Error('Respuesta inválida del servidor.')
+  }
+
+  const body = payload as Record<string, unknown>
+  if ('data' in body && body.data && typeof body.data === 'object' && !Array.isArray(body.data)) {
+    return body.data as T
+  }
+
+  return body as T
+}

package/src/lib/softdin-libreria.ts

@@ -0,0 +1,50 @@
+/**
+ * Punto único de acceso a softdinlibreriajs (npm).
+ * El resto de la app no debe importar la librería directamente.
+ */
+import EnumContinente from 'softdinlibreriajs/src/EnumContinente.js'
+import EnumTipoContrato from 'softdinlibreriajs/src/EnumTipoContrato.js'
+
+export type ContinenteEnumItem = {
+  id: number
+  code: string
+  description: string
+}
+
+export type TipoContratoEnumItem = {
+  id: number
+  code: string
+  description: string
+}
+
+export function getContinentesEnum(): ContinenteEnumItem[] {
+  return EnumContinente.getAll()
+}
+
+export function getContinenteDescriptions(): string[] {
+  return EnumContinente.getAll().map((item) => item.description)
+}
+
+export function getContinenteByDescription(description: string): ContinenteEnumItem | null {
+  return EnumContinente.getByDescription(description)
+}
+
+export function getContinenteById(id: number): ContinenteEnumItem | null {
+  return EnumContinente.getById(id)
+}
+
+export function getTiposContratoEnum(): TipoContratoEnumItem[] {
+  return EnumTipoContrato.getAll()
+}
+
+export function getTipoContratoById(id: number): TipoContratoEnumItem | null {
+  return EnumTipoContrato.getById(id)
+}
+
+export { EnumContinente, EnumTipoContrato }
+
+/** ID por defecto: América del Sur (Colombia). */
+export const DEFAULT_CONTINENTE_ID = EnumContinente.AMERICA_SUR
+
+/** Tipo de contrato por defecto: Fijo. */
+export const DEFAULT_TIPO_CONTRATO_ID = EnumTipoContrato.FIJO