diff --git a/assets/css/basic.css b/assets/css/basic.css index 8332ca99..b35b29ef 100644 --- a/assets/css/basic.css +++ b/assets/css/basic.css @@ -137,145 +137,6 @@ input:disabled + label { color: var(--val-color--text--muted); } -/* - * Pager component - */ - -.pager { - display: flex; - flex-wrap: wrap; - align-items: center; - gap: 1rem; - margin: 1rem 0; - padding: 0 1rem; -} -.pager-align-start { - justify-content: flex-start; -} -.pager-align-center { - justify-content: center; -} -.pager-align-end { - justify-content: flex-end; -} -.pager-summary { - color: var(--val-color--text--muted); - font-size: 0.8125rem; - align-self: flex-start; - margin-inline-end: auto; -} -.pager-align-start .pager-summary { - order: 1; - margin-inline-end: 0; - margin-inline-start: auto; -} -.pager-align-center .pager-summary { - order: 1; - flex-basis: 100%; - text-align: center; - margin-inline-end: 0; -} - -.pagination { - display: flex; - align-items: center; - gap: 0.25rem; - list-style: none; - margin: 0; - padding: 0; -} -.pagination a { - display: flex; - align-items: center; - justify-content: center; - min-width: 1.5rem; - padding: 0.375rem 0.625rem; - border-radius: 0.375rem; - color: var(--val-color--text); - text-decoration: none; -} -.pagination a:hover { - background-color: color-mix(in srgb, var(--val-color--text) 8%, transparent); -} -.pagination .active a { - color: #fff; - background-color: var(--val-color--primary); -} -.pagination .disabled a { - color: var(--val-color--text--muted); - pointer-events: none; - cursor: default; -} - -.page-ellipsis { - padding: 0.375rem 0.25rem; - color: var(--val-color--text--muted); -} - -/* .page-link-icon muestra el texto de navegación de los botones anterior/siguiente. El texto - accesible completo va aparte, en el aria-label del enlace. Por eso sustituir el texto visible por - otro contenido no afecta a la accesibilidad, p.ej. para usar "‹"/"›" se puede aplicar: - -.page-link-icon { - display: inline-block; - font-size: 0; -} -.page-previous .page-link-icon::before { - content: "‹"; - font-size: 1rem; - display: inline-block; - transform: translateY(-0.15em) scale(1.5); -} -.page-next .page-link-icon::before { - content: "›"; - font-size: 1rem; - display: inline-block; - transform: translateY(-0.15em) scale(1.5); -} -*/ - -.pager-jump { - display: flex; - align-items: center; -} -.pager-jump:focus-within { - border-radius: 0.375rem; - box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--val-color--primary) 25%, transparent); -} -.pager-jump-input > input.form-control:focus, -.pager-jump-button:focus { - outline: none; - box-shadow: none; -} -.pager-jump-input > input.form-control { - width: calc(var(--pager-jump-width, 1ch) + 2.5rem); - padding: 0.375rem 0.625rem; - line-height: var(--val-lh--base); - border: 0; - border-start-end-radius: 0; - border-end-end-radius: 0; - background-color: var(--val-color--light); -} -.pager-jump-input > input.form-control { - text-align: center; - appearance: textfield; - -moz-appearance: textfield; -} -.pager-jump-input > input.form-control::-webkit-outer-spin-button, -.pager-jump-input > input.form-control::-webkit-inner-spin-button { - -webkit-appearance: none; - margin: 0; -} -.pager-jump-button { - padding: 0.375rem 0.625rem; - border: 0; - border-start-start-radius: 0; - border-end-start-radius: 0; -} -.pager-jump-button:hover { - background-color: color-mix(in srgb, var(--val-color--primary) 85%, black); -} - /* * Region Footer */ diff --git a/src/base/component/button.rs b/src/base/component/button.rs index 9bca4a12..f3aec897 100644 --- a/src/base/component/button.rs +++ b/src/base/component/button.rs @@ -75,8 +75,6 @@ pub struct Button { value: AttrValue, /// Devuelve la etiqueta del botón. label: Attr, - /// Devuelve el texto emergente del botón (atributo `title`). - title: Attr, /// Devuelve si el botón recibe el foco automáticamente al cargar la página. autofocus: bool, /// Devuelve si el botón está deshabilitado. @@ -104,7 +102,6 @@ impl Component for Button { (self.props()) name=[self.name().get()] value=[self.value().get()] - title=[self.title().lookup(cx)] autofocus[*self.autofocus()] disabled[*self.disabled()] { @@ -195,13 +192,6 @@ impl Button { self } - /// Establece o elimina el texto emergente del botón (basta pasar `None` para quitarlo). - #[builder_fn] - pub fn with_title(mut self, title: impl Into>) -> Self { - self.title.alter_opt(title.into()); - self - } - /// Establece si el botón recibe el foco automáticamente al cargar la página. #[builder_fn] pub fn with_autofocus(mut self, autofocus: bool) -> Self { diff --git a/src/base/component/pager.rs b/src/base/component/pager.rs index e3dafe5f..85ff4fa6 100644 --- a/src/base/component/pager.rs +++ b/src/base/component/pager.rs @@ -14,24 +14,13 @@ pub enum PagerVisibility { Auto, } -/// Define la alineación horizontal de [`Pager`] dentro de su contenedor. -#[derive(AutoDefault, Clone, Copy, Debug, PartialEq)] -pub enum PagerAlign { - /// Alineado al comienzo. - Start, - /// Centrado (comportamiento por defecto). - #[default] - Center, - /// Alineado al final. - End, -} - /// Componente para añadir un **paginador** a un listado. /// /// `Pager` permite navegar por las páginas de un listado de ítems cuando supera el número máximo de /// ítems admitidos por página. Resuelve el enlace para acceder a cada página del listado a partir /// de una ruta base, un conjunto de parámetros de consulta adicionales (orden, búsqueda, etc.) y el -/// estado actual ([`current_page`], [`items_per_page`], [`total_items`]). +/// estado actual ([`current_page`](Self::current_page), [`items_per_page`](Self::items_per_page), +/// [`total_items`](Self::total_items)). /// /// El componente se renderiza sólo si el listado requiere más de una página. /// @@ -40,31 +29,28 @@ pub enum PagerAlign { /// /// El listado de páginas se flanquea con dos botones de navegación: página anterior y página /// siguiente (las páginas primera y última ya están siempre disponibles como números, así que no -/// llevan un botón dedicado). Su visibilidad, junto a la del formulario de salto a página y la del -/// resumen de páginas, se controla con [`PagerVisibility`] a través de [`with_prev_next()`], -/// [`with_jump()`] y [`with_summary()`]: `Never` los oculta siempre, `Always` los muestra siempre, -/// y el valor por defecto `Auto` los muestra sólo cuando el paginador necesita truncar el listado -/// de páginas por superar el número máximo de páginas visible. +/// llevan un botón dedicado). Su visibilidad, junto a la del formulario de salto a página, se +/// controla con [`PagerVisibility`] a través de [`with_prev_next()`](Self::with_prev_next) y +/// [`with_jump()`](Self::with_jump): `Never` los oculta siempre, `Always` los muestra siempre (en +/// el caso de los botones, con el extremo correspondiente desactivado en vez de oculto), y `Auto` +/// -el valor por defecto de ambos- los muestra sólo cuando el número total de páginas supera al +/// número de páginas que se muestra en el paginador; en ese caso, si la página actual coincide con +/// un extremo, el botón correspondiente se muestra igualmente, pero desactivado. /// /// Un elemento `