Download the PHP package phloxcz/capify without Composer
On this page you can find all versions of the php package phloxcz/capify. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
FAQ
Example:
In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
- Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
- To use Composer is sometimes complicated. Especially for beginners.
- Composer needs much resources. Sometimes they are not available on a simple webspace.
- If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
- Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Informations about the package capify
Capify
Modern, themeable replacement for native alert(), confirm() and prompt() dialogs.
Zero dependencies · ~5 KB · UMD · TypeScript ready
Features
- Three built-in themes: Default (custom), Bootstrap 5, Tailwind CSS
- Dark / Light mode: auto-detect via
prefers-color-scheme, or force light/dark - Modal & non-modal: modal variant includes backdrop blur effect
- Promise-based API:
await Capify.confirm('Sure?') - Popover variant: kompaktní dialog ukotvený k elementu s auto-flip
- Notifications: toast notifikace se štosováním, auto-dismiss, progress bar
- Class overrides: customize any CSS class slot globally or per-call
- Accessible:
role="dialog",aria-modal, keyboard support (Escape, Enter) - Extensible: register custom themes via
Capify.registerTheme()
Installation
npm (recommended for Vite / bundler projects)
Composer
Soubory se nainstalují do vendor/phloxcz/capify/. Jak je dostat do
veřejné složky závisí na tvém setupu — viz sekce Nette + Vite
a Composer bez bundleru níže.
CDN / manuálně
Nette + Vite
Doporučený moderní setup — Capify se nainstaluje přes npm, Vite ho
zabundlí spolu se zbytkem frontendu a nette/assets se postará o
vložení do šablon.
1. Předpoklady
2. Instalace Capify
3. Entry point
V hlavním JS souboru (typicky assets/app.js nebo assets/main.js)
importuj Capify:
4. Vite config
5. Nette config
6. Latte šablona
7. Použití v šablonách
Nebo v samostatném JS modulu:
Vývoj vs. produkce
V dev módu (npx vite) se Capify načítá přes Vite dev server s HMR —
změny v CSS se projeví okamžitě bez reloadu. Pro produkci spustíš
npx vite build, Vite vygeneruje optimalizované soubory do www/assets/
a nette/assets je automaticky servíruje se správným verzováním.
Composer bez bundleru
Pokud nepoužíváš Vite ani jiný bundler, můžeš soubory z vendor/
nakopírovat do veřejné složky ručně nebo symlinkem:
V Latte pak:
Quick Start
TypeScript
Typové definice jsou součástí balíčku (capify.d.ts):
API
| Metoda | Vrací | Popis |
|---|---|---|
Capify.alert(msg, opts?) |
Promise<true> |
Notifikace s tlačítkem OK |
Capify.confirm(msg, opts?) |
Promise<boolean> |
OK → true, Cancel → false |
Capify.prompt(msg, opts?) |
Promise<string\|null> |
OK → zadaný text, Cancel → null |
Capify.notify(msg, opts?) |
{ close() } |
Toast notifikace, vrací handle |
Capify.config(opts) |
void |
Nastaví globální výchozí hodnoty |
Capify.registerTheme(name, renderer) |
void |
Registrace vlastního tématu |
Capify.getThemeClasses(name) |
object\|null |
Vrátí výchozí třídy tématu |
Capify.reset() |
void |
Reset konfigurace na výchozí hodnoty |
Popover varianta
Kompaktní dialog ukotvený k libovolnému elementu — ideální pro kontextové vstupy, inline potvrzení nebo notifikace přímo u tlačítka.
Placement
Kombinace vertikální a horizontální osy:
| Hodnota | Dialog se objeví… |
|---|---|
bottom-left |
Pod elementem, zarovnaný k levému okraji |
bottom-right |
Pod elementem, zarovnaný k pravému okraji |
top-left |
Nad elementem, zarovnaný k levému okraji |
top-right |
Nad elementem, zarovnaný k pravému okraji |
Automatický flip — pokud se dialog nevejde na zadanou stranu, otočí se na opačnou. Na mobilech (< 480px) se popover zobrazí vycentrovaný.
Overlay
Vzhled modálního overlay (pozadí za dialogem) je plně konfigurovatelný.
| Volba | Typ | Default | Popis |
|---|---|---|---|
overlayBlur |
number |
6 |
Blur v px, 0 = bez bluru |
overlayBg |
string |
rgba(0,0,0,.45) |
Barva pozadí overlay |
overlayFilter |
string |
— | Vlastní backdrop-filter (přebije overlayBlur) |
Všechny tři lze nastavit globálně i per-call.
Notifikace
Toast notifikace, které se štosují na zvolené pozici. Auto-dismiss s progress barem, pause na hover, programatické zavření.
Notify options
| Volba | Typ | Default | Popis |
|---|---|---|---|
position |
string |
'top-right' |
Pozice na obrazovce (6 možností) |
duration |
number |
4000 |
Auto-dismiss v ms, 0 = manuální |
type |
string |
'info' |
Typ — ovlivňuje barvu akcentu |
title |
string |
'' |
Tučný titulek nad zprávou |
closable |
boolean |
true |
Zobrazit tlačítko × |
maxWidth |
number |
380 |
Maximální šířka v px |
showProgress |
boolean |
true |
Progress bar odpočtu |
theme |
string |
z config | 'default' / 'bootstrap' / 'tailwind' |
darkMode |
string |
z config | 'auto' / 'light' / 'dark' |
Chování
Notifikace se štosují automaticky — top pozice rostou dolů, bottom pozice rostou nahoru. Při najetí myší se odpočet pozastaví a progress bar se zastaví. Po odjetí myši odpočet pokračuje.
Notifikace respektují globální téma (default, bootstrap, tailwind)
a dark mode. Bootstrap používá alert komponenty, Tailwind utility třídy
s barevnými variantami per type. Přetížení tříd funguje přes classes
stejně jako u dialogů — notify sloty: notifyCard, notifyTitle,
notifyMsg, notifyClose, notifyProgress.
Per-call Options
Class Overrides
Každé téma definuje pojmenované sloty s výchozími CSS třídami. Jakýkoli
slot lze přetížit globálně přes config() nebo jednorázově přes options.classes.
Dostupné sloty podle tématu
Default (dialog): overlay, dialog, title, body, input, actions, btnOk, btnCancel
Default (notify): notifyCard, notifyTitle, notifyMsg, notifyClose, notifyProgress
Bootstrap (dialog): overlay, dialog, content, header, title, body, bodyText, input, footer, btnOk, btnCancel
Bootstrap (notify): notifyCard, notifyCardInfo, notifyCardSuccess, notifyCardWarning, notifyCardError, notifyTitle, notifyMsg, notifyClose, notifyProgress
Tailwind (dialog): overlay, dialog, card, cardLight, cardDark, title, body, input, inputLight, inputDark, actions, btnOk, btnCancel, btnCancelLight, btnCancelDark
Tailwind (notify): notifyCard, notifyCardLightInfo, notifyCardLightSuccess, notifyCardLightWarning, notifyCardLightError, notifyCardDarkInfo, notifyCardDarkSuccess, notifyCardDarkWarning, notifyCardDarkError, notifyTitle, notifyMsg, notifyClose, notifyProgress
Témata
- Default — plně samostatné, potřebuje jen
capify.css - Bootstrap — využívá třídy Bootstrap 5, vyžaduje Bootstrap CSS
- Tailwind — využívá Tailwind utility třídy, vyžaduje Tailwind CSS
Soubory
| Soubor | Účel |
|---|---|
capify.js |
Knihovna (UMD) |
capify.css |
Styly — bundluj se styly projektu |
capify.d.ts |
TypeScript definice |
package.json |
npm manifest |
composer.json |
Composer manifest |
demo.html |
Interaktivní demo |
Licence
MIT
