@opi-team/rca-ui

Componentes UI para AngularJS 1.8 construidos sobre DaisyUI v5 y Tailwind CSS v4.

La libreria envuelve clases y patrones visuales de DaisyUI en componentes/directivas AngularJS. Las APIs programaticas, especialmente RcaModal, estan basadas en el estilo de ng-bootstrap (open, RcaModalRef, RcaActiveModal, close, dismiss, beforeDismiss, etc.), pero adaptadas para AngularJS 1.x y DaisyUI.

Instalacion

npm install @opi-team/rca-ui angular rxjs daisyui tailwindcss

Con Bun:

bun add @opi-team/rca-ui angular rxjs daisyui tailwindcss

Peer dependencies

El proyecto consumidor debe proveer:

{
  "angular": "1.8.3",
  "daisyui": "^5.5.23",
  "rxjs": "^7.8.2",
  "tailwindcss": "^4.3.0",
  "typescript": "^6.0.3"
}

Setup

Importa el CSS y registra el modulo completo:

import { RcaModule } from "@opi-team/rca-ui";
import angular from "angular";

angular.module("app", [RcaModule.name]);

Tambien puedes importar modulos individuales:

import { RcaAlertModule, RcaModalModule } from "@opi-team/rca-ui";

angular.module("app", [RcaAlertModule.name, RcaModalModule.name]);

En tu CSS de Tailwind:

@import "tailwindcss";
@plugin "daisyui";

Componentes

| Componente | API | | ---------- | ------------------------------------ | | Alert | <rca-alert> | | Avatar | <rca-avatar>, <rca-avatar-group> | | Badge | rca-badge | | Carousel | <rca-carousel>, <rca-slide> | | Diff | <rca-diff> | | FAB | <rca-fab>, <rca-fab-action> | | Indicator | rca-indicator | | Loading | rca-loading | | Modal | RcaModal service | | Skeleton | rca-skeleton | | Status | rca-status |

Alert

rca-alert aplica la estructura de DaisyUI alert.

<rca-alert type="success">
  <span>Guardado correctamente.</span>
</rca-alert>

<rca-alert type="warning" outline="true">
  <span>Revisa los datos antes de continuar.</span>
</rca-alert>

<rca-alert type="error" soft="true">
  <span>No se pudo completar la accion.</span>
</rca-alert>

Opciones:

| Prop | Tipo | | --------- | ---------------------------------------------------------------------------------- | | type | primary, secondary, accent, info, success, warning, error, neutral | | outline | boolean | | dash | boolean | | soft | boolean |

Modal

La API esta inspirada en ng-bootstrap:

• RcaModal.open(componentName, options)
• RcaModalRef.result
• RcaModalRef.close(result)
• RcaModalRef.dismiss(reason)
• RcaActiveModal inyectado como binding al contenido
• beforeDismiss
• dismissAll
• hasOpenModals

Abrir un modal

import { RcaModal } from "@opi-team/rca-ui";

class PageController {
  static get $inject() {
    return [RcaModal.$name];
  }

  constructor(private readonly modal: RcaModal) {}

  openUserModal() {
    this.modal
      .open("userModalContent", {
        size: "lg",
        placement: "middle",
        backdrop: "static",
        keyboard: true,
        scrollable: true,
        bindings: {
          title: "Editar usuario",
          userName: "Ada Lovelace",
        },
      })
      .then((modalRef) => {
        modalRef.result?.then(
          (result) => console.log("closed", result),
          (reason) => console.log("dismissed", reason),
        );
      });
  }
}

Contenido del modal

import type { IComponentController, IComponentOptions } from "angular";
import type { RcaActiveModal } from "@opi-team/rca-ui";

class UserModalContent implements IComponentController {
  title?: string;
  userName?: string;
  rcaActiveModal?: RcaActiveModal;

  save() {
    this.rcaActiveModal?.close({ saved: true });
  }

  cancel() {
    this.rcaActiveModal?.dismiss("cancel");
  }

  static get $name() {
    return "userModalContent";
  }

  static get $factory(): IComponentOptions {
    return {
      bindings: {
        title: "<?",
        userName: "<?",
        rcaActiveModal: "<?",
      },
      controller: UserModalContent,
      controllerAs: "$",
      template: `
        <h3 class="text-lg font-bold">{{ $.title }}</h3>
        <p class="py-4">{{ $.userName }}</p>
        <div class="modal-action">
          <button class="btn btn-ghost" ng-click="$.cancel()">Cancelar</button>
          <button class="btn btn-primary" ng-click="$.save()">Guardar</button>
        </div>
      `,
    };
  }
}

Opciones principales:

| Opcion | Valores | | --------------- | --------------------------------------------------- | | backdrop | true, false, "static" | | beforeDismiss | () => boolean \| Promise<boolean> | | container | selector CSS o IAugmentedJQuery | | fullscreen | boolean | | keyboard | boolean | | role | "dialog", "alertdialog" | | scrollable | boolean | | size | "sm", "md", "lg", "xl", "full" | | placement | "top", "middle", "bottom", "start", "end" | | windowClass | clases para el host .modal | | modalBoxClass | clases para .modal-box | | backdropClass | clases para .modal-backdrop | | bindings | objeto de bindings para el componente de contenido |

Avatar

<rca-avatar
  src="https://i.pravatar.cc/150?img=1"
  size="md"
  shape="circle"
></rca-avatar>
<rca-avatar
  initials="AB"
  size="lg"
  shape="squircle"
  status="online"
></rca-avatar>

<rca-avatar-group>
  <rca-avatar src="https://i.pravatar.cc/150?img=10" size="sm"></rca-avatar>
  <rca-avatar src="https://i.pravatar.cc/150?img=11" size="sm"></rca-avatar>
  <rca-avatar initials="+5" size="sm"></rca-avatar>
</rca-avatar-group>

Badge

<span rca-badge="Default"></span>
<span rca-badge="Primary" type="primary"></span>
<span rca-badge="Success" type="success"></span>
<span rca-badge="Outline" type="primary" variant="outline"></span>
<span rca-badge="Soft" type="info" variant="soft" size="lg"></span>

Status

<span rca-status="success"></span>
<span rca-status="error" size="lg"></span>
<span rca-status="warning" pulse="true"></span>

Loading

<span rca-loading="true" type="spinner" size="md"></span>
<span rca-loading="isSaving" type="dots" size="lg"></span>

Skeleton

<div rca-skeleton="loading" shape="text">
  <p>Contenido cargado.</p>
</div>

<div rca-skeleton="loading" shape="circle">
  <div class="w-16 h-16 rounded-full bg-primary"></div>
</div>

Indicator

<div class="indicator">
  <span rca-indicator class="badge badge-error">99</span>
  <button type="button" class="btn">Notificaciones</button>
</div>

<div class="indicator">
  <span rca-indicator position="bottom-end" class="badge badge-warning">!</span>
  <div class="bg-base-100 rounded-lg p-4">Contenido</div>
</div>

Diff

<rca-diff aspect-ratio="16 / 7">
  <rca-diff-start>
    <div class="bg-base-200 w-full h-full">Antes</div>
  </rca-diff-start>
  <rca-diff-end>
    <div class="bg-primary text-primary-content w-full h-full">Despues</div>
  </rca-diff-end>
</rca-diff>

Carousel

<rca-carousel
  active-id="gallery-1"
  interval="2500"
  show-navigation-arrows="true"
  show-navigation-indicators="true"
>
  <rca-slide id="gallery-1">
    <img src="/slide-1.jpg" class="w-full h-80 object-cover" alt="Slide 1" />
  </rca-slide>
  <rca-slide id="gallery-2">
    <img src="/slide-2.jpg" class="w-full h-80 object-cover" alt="Slide 2" />
  </rca-slide>
</rca-carousel>

Eventos:

<rca-carousel slide="$ctrl.onSlide($event)" slid="$ctrl.onSlid($event)">
  ...
</rca-carousel>

FAB

<rca-fab class="fixed bottom-6 right-6">
  <rca-fab-action>
    <button type="button" class="btn btn-circle btn-primary">+</button>
  </rca-fab-action>
</rca-fab>