Bei sehr großen Datenmengen ist auch eine manuelle Nutzung der Table-Komponente möglich. Das bedeutet, dass die Tabelle seitenweise "manuell" befüllt wird. Hierzu kann einfach anstatt der Table-Pagination eine "eigene" Pagination unter der Tabelle mittels der Pagination-Komponente verwendet werden.
@@ -14,7 +16,7 @@
*/
@Tag("kol-table")
-@NpmPackage(value = "@public-ui/components", version = "1.5.0-rc.8")
+@NpmPackage(value = "@public-ui/components", version = "1.5.0-rc.20")
@JsModule("@public-ui/components/dist/components/kol-table")
public class KolTable extends Component {
/**
diff --git a/packages/adapters/vaadin/KolTabs.java b/packages/adapters/vaadin/KolTabs.java
index 4d852ab1b6..9a1a77262b 100644
--- a/packages/adapters/vaadin/KolTabs.java
+++ b/packages/adapters/vaadin/KolTabs.java
@@ -10,7 +10,7 @@
*/
@Tag("kol-tabs")
-@NpmPackage(value = "@public-ui/components", version = "1.5.0-rc.8")
+@NpmPackage(value = "@public-ui/components", version = "1.5.0-rc.20")
@JsModule("@public-ui/components/dist/components/kol-tabs")
public class KolTabs extends Component {
/**
@@ -50,7 +50,7 @@ public String getSelected() {
}
/**
- * Gibt die geordnete Liste der Seitenhierarchie in Links an.
+ * Setzt die Daten für die Registrierkarten.
*
* @param value String
*/
@@ -59,7 +59,7 @@ public void setTabs(final String value) {
}
/**
- * Gibt die geordnete Liste der Seitenhierarchie in Links an.
+ * Setzt die Daten für die Registrierkarten.
*
* @return String
*/
@@ -68,7 +68,7 @@ public String getTabs() {
}
/**
- * Gibt an, ob die Tab-Schalter entweder oben, rechts, unten oder links angeordnet sind.
+ * Setzt die Position der Registrierkarten.
*
* @param value String
*/
@@ -77,7 +77,7 @@ public void setTabsAlign(final String value) {
}
/**
- * Gibt an, ob die Tab-Schalter entweder oben, rechts, unten oder links angeordnet sind.
+ * Setzt die Position der Registrierkarten.
*
* @return String
*/
diff --git a/packages/adapters/vaadin/KolTextarea.java b/packages/adapters/vaadin/KolTextarea.java
index 497c2fdb2e..9e9a952fdd 100644
--- a/packages/adapters/vaadin/KolTextarea.java
+++ b/packages/adapters/vaadin/KolTextarea.java
@@ -6,12 +6,11 @@
import com.vaadin.flow.component.dependency.NpmPackage;
/**
- * Die Komponente **Textarea** stellt ein größeres Eingabefeld für Inhalte zur Verfügung. Im Gegensatz zum
-InputText können hier auch umfangreiche Inhalte eingegeben werden, die auch mit Zeilenumbrüchen versehen sein können.
+ * Die Komponente **Textarea** stellt ein größeres Eingabefeld für Inhalte zur Verfügung. Im Gegensatz zum können hier auch umfangreiche Inhalte eingegeben werden, die auch mit Zeilenumbrüchen versehen sein können.
*/
@Tag("kol-textarea")
-@NpmPackage(value = "@public-ui/components", version = "1.5.0-rc.8")
+@NpmPackage(value = "@public-ui/components", version = "1.5.0-rc.20")
@JsModule("@public-ui/components/dist/components/kol-textarea")
public class KolTextarea extends Component {
/**
@@ -69,7 +68,7 @@ public String getAlert() {
}
/**
- * Gibt an, ob das Eingabefeld aktiviert oder deaktiviert ist.
+ * Setzt das Feld in einen inaktiven Zustand, in dem es keine Interaktion erlaubt.
*
* @param value String
*/
@@ -78,7 +77,7 @@ public void setDisabled(final String value) {
}
/**
- * Gibt an, ob das Eingabefeld aktiviert oder deaktiviert ist.
+ * Setzt das Feld in einen inaktiven Zustand, in dem es keine Interaktion erlaubt.
*
* @return String
*/
@@ -105,7 +104,7 @@ public String getError() {
}
/**
- * Gibt an, ob am unteren Rand des Eingabefeldes die Anzahl der Zeichen angezeigt werden soll.
+ * Aktiviert den Zeichenanzahlzähler am unteren Rand des Eingabefeldes.
*
* @param value String
*/
@@ -114,7 +113,7 @@ public void setHasCounter(final String value) {
}
/**
- * Gibt an, ob am unteren Rand des Eingabefeldes die Anzahl der Zeichen angezeigt werden soll.
+ * Aktiviert den Zeichenanzahlzähler am unteren Rand des Eingabefeldes.
*
* @return String
*/
@@ -123,7 +122,7 @@ public String getHasCounter() {
}
/**
- * Gibt an, ob das Eingabefeld kein sichtbares Label haben soll.
+ * Versteckt das sichtbare Label des Elements.
*
* @param value String
*/
@@ -132,7 +131,7 @@ public void setHideLabel(final String value) {
}
/**
- * Gibt an, ob das Eingabefeld kein sichtbares Label haben soll.
+ * Versteckt das sichtbare Label des Elements.
*
* @return String
*/
@@ -141,7 +140,7 @@ public String getHideLabel() {
}
/**
- * Gibt den Text für eine Hinweistext an.
+ * Gibt den Hinweistext an.
*
* @param value String
*/
@@ -150,7 +149,7 @@ public void setHint(final String value) {
}
/**
- * Gibt den Text für eine Hinweistext an.
+ * Gibt den Hinweistext an.
*
* @return String
*/
@@ -177,7 +176,7 @@ public String getId() {
}
/**
- * Gibt an, wie viele Zeichen man maximal eingeben kann.
+ * Setzt die maximale Zeichenanzahl.
*
* @param value String
*/
@@ -186,7 +185,7 @@ public void setMaxLength(final String value) {
}
/**
- * Gibt an, wie viele Zeichen man maximal eingeben kann.
+ * Setzt die maximale Zeichenanzahl.
*
* @return String
*/
@@ -231,7 +230,7 @@ public String getPlaceholder() {
}
/**
- * Gibt an, ob das Eingabefeld nur lesend ist.
+ * Setzt das Eingabefeld in den schreibgeschützten Modus.
*
* @param value String
*/
@@ -240,7 +239,7 @@ public void setReadOnly(final String value) {
}
/**
- * Gibt an, ob das Eingabefeld nur lesend ist.
+ * Setzt das Eingabefeld in den schreibgeschützten Modus.
*
* @return String
*/
@@ -249,7 +248,7 @@ public String getReadOnly() {
}
/**
- * Gibt an, ob das Eingabefeld ein Pflichtfeld ist.
+ * Macht das Eingabeelement zu einem Pflichtfeld.
*
* @param value String
*/
@@ -258,7 +257,7 @@ public void setRequired(final String value) {
}
/**
- * Gibt an, ob das Eingabefeld ein Pflichtfeld ist.
+ * Macht das Eingabeelement zu einem Pflichtfeld.
*
* @return String
*/
@@ -267,7 +266,7 @@ public String getRequired() {
}
/**
- * Gibt an, ob die Größe des Eingabefeldes geändert werden kann. (https://developer.mozilla.org/de/docs/Web/CSS/resize)
+ * Gibt an, ob die Größe des Eingabefeldes von Nutzer:innen geändert werden kann. (https://developer.mozilla.org/de/docs/Web/CSS/resize)
*
* @param value String
*/
@@ -276,7 +275,7 @@ public void setResize(final String value) {
}
/**
- * Gibt an, ob die Größe des Eingabefeldes geändert werden kann. (https://developer.mozilla.org/de/docs/Web/CSS/resize)
+ * Gibt an, ob die Größe des Eingabefeldes von Nutzer:innen geändert werden kann. (https://developer.mozilla.org/de/docs/Web/CSS/resize)
*
* @return String
*/
diff --git a/packages/adapters/vaadin/KolToast.java b/packages/adapters/vaadin/KolToast.java
index 626a9c9884..2bac1966d4 100644
--- a/packages/adapters/vaadin/KolToast.java
+++ b/packages/adapters/vaadin/KolToast.java
@@ -8,11 +8,11 @@
/**
* Mit der **Toast**-Komponente geben Sie ein optisches Feedback an die Nutzer:innen. Sie wird nur für einen kurzen Zeitraum am Kopf des Browserfenster angezeigt und verschwindet danach automatisch.
-Ein **Toast** wird nach dem Laden der Webseite am oberen Rand des Browserfenster für fünf Sekunden angezeigt. Mit Ausblenden des **Toasts** wird dieser automatisch aus dem DOM entfernt. Wird er erneut benötigt, muss er z.B. über eine JavaScript-Funktion nachgeladen werden.
+Ein **Toast** wird nach dem Laden der Webseite am oberen Rand des Browserfenster für zehn Sekunden angezeigt. Mit Ausblenden des **Toasts** wird dieser automatisch aus dem DOM entfernt. Wird er erneut benötigt, muss er z.B. über eine JavaScript-Funktion nachgeladen werden.
*/
@Tag("kol-toast")
-@NpmPackage(value = "@public-ui/components", version = "1.5.0-rc.8")
+@NpmPackage(value = "@public-ui/components", version = "1.5.0-rc.20")
@JsModule("@public-ui/components/dist/components/kol-toast")
public class KolToast extends Component {
/**
@@ -34,7 +34,7 @@ public String getAlert() {
}
/**
- * Gibt an, ob der Toast ein Schließen-Icon hat.
+ * Aktiviert das Schließen-Icon.
*
* @param value String
*/
@@ -43,7 +43,7 @@ public void setHasCloser(final String value) {
}
/**
- * Gibt an, ob der Toast ein Schließen-Icon hat.
+ * Aktiviert das Schließen-Icon.
*
* @return String
*/
diff --git a/packages/adapters/vaadin/KolTooltip.java b/packages/adapters/vaadin/KolTooltip.java
index 879ff37b2e..df2c596c12 100644
--- a/packages/adapters/vaadin/KolTooltip.java
+++ b/packages/adapters/vaadin/KolTooltip.java
@@ -12,15 +12,15 @@
Ein geöffneter Tooltip lässt sich mit der `Escape`-Taste schließen, um ggf. überlagerte Seiteninformationen wieder sichtbar zu machen.
-**Hinweis:** Damit der Tooltip korrekt ausgerichtet wird, muss für das vorrangehende Referenz-Element `inline-block` gesetzt werden.
+**Hinweis:** Damit der Tooltip korrekt ausgerichtet wird, darf das Referenz-Element nicht `display: inline` haben.
*/
@Tag("kol-tooltip")
-@NpmPackage(value = "@public-ui/components", version = "1.5.0-rc.8")
+@NpmPackage(value = "@public-ui/components", version = "1.5.0-rc.20")
@JsModule("@public-ui/components/dist/components/kol-tooltip")
public class KolTooltip extends Component {
/**
- * Gibt an, ob der Tooltip oben, rechts, unten oder links angezeigt werden soll.
+ * Setzt die Ausrichtung des Tooltips in Relation zum Elternelement.
*
* @param value String
*/
@@ -29,7 +29,7 @@ public void setAlign(final String value) {
}
/**
- * Gibt an, ob der Tooltip oben, rechts, unten oder links angezeigt werden soll.
+ * Setzt die Ausrichtung des Tooltips in Relation zum Elternelement.
*
* @return String
*/
@@ -56,7 +56,7 @@ public String getId() {
}
/**
- * Das Label gibt an, welcher Text in dem Tooltip beim Fokussieren oder Maus-drüberfahren angezeigt wird.
+ * Setzt den Text in dem Tooltip beim Fokussieren oder Maus-drüberfahren angezeigt wird.
*
* @param value String
*/
@@ -65,7 +65,7 @@ public void setLabel(final String value) {
}
/**
- * Das Label gibt an, welcher Text in dem Tooltip beim Fokussieren oder Maus-drüberfahren angezeigt wird.
+ * Setzt den Text in dem Tooltip beim Fokussieren oder Maus-drüberfahren angezeigt wird.
*
* @return String
*/
diff --git a/packages/adapters/vue/pnpm-lock.yaml b/packages/adapters/vue/pnpm-lock.yaml
index 6805050204..12ae53118c 100644
--- a/packages/adapters/vue/pnpm-lock.yaml
+++ b/packages/adapters/vue/pnpm-lock.yaml
@@ -5,8 +5,8 @@ devDependencies:
specifier: 7.21.5
version: 7.21.5
'@public-ui/components':
- specifier: 1.5.0-rc.18
- version: 1.5.0-rc.18
+ specifier: 1.5.0-rc.20
+ version: 1.5.0-rc.20
'@types/minimatch':
specifier: 5.1.2
version: 5.1.2
@@ -15,7 +15,7 @@ devDependencies:
version: 1.2.2
'@types/node':
specifier: ts4.9
- version: 18.16.2
+ version: 18.16.3
'@types/normalize-package-data':
specifier: 2.4.1
version: 2.4.1
@@ -454,8 +454,8 @@ packages:
resolution: {integrity: sha512-EvYTiXet5XqweYGClEmpu3BoxmsQ4hkj3QaYA6qEnigCWffTP3vNRwBReTdrwDwo7OoJ3wM8Uoe9Uk4n+d4hfg==}
dev: true
- /@floating-ui/dom@1.2.6:
- resolution: {integrity: sha512-02vxFDuvuVPs22iJICacezYJyf7zwwOCWkPNkWNBr1U0Qt1cKFYzWvxts0AmqcOQGwt/3KJWcWIgtbUU38keyw==}
+ /@floating-ui/dom@1.2.7:
+ resolution: {integrity: sha512-DyqylONj1ZaBnzj+uBnVfzdjjCkFCL2aA9ESHLyUOGSqb03RpbLMImP1ekIQXYs4KLk9jAjJfZAU8hXfWSahEg==}
dependencies:
'@floating-ui/core': 1.2.6
dev: true
@@ -515,11 +515,11 @@ packages:
fastq: 1.15.0
dev: true
- /@public-ui/components@1.5.0-rc.18:
- resolution: {integrity: sha512-z0tIPKr9PMTOG4GOnpYpqPS2FZy2p2PmuEuTC+LdR2Xd3lfSDgCvxEhqCkn0l12tNSvU35c7FxZo+EXudhsDnQ==}
+ /@public-ui/components@1.5.0-rc.20:
+ resolution: {integrity: sha512-7ZRDuyFrD8+8BnD16ZZatl7PA1On8eOCkkaGvs/VVLBDv9c63WFsG7vpWKY1/Au9UHZ5xzLDHK4aZ/Dv/pMYjg==}
dependencies:
'@a11y-ui/core': 1.0.2
- '@floating-ui/dom': 1.2.6
+ '@floating-ui/dom': 1.2.7
i18next: 22.4.15
dev: true
@@ -626,8 +626,8 @@ packages:
resolution: {integrity: sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==}
dev: true
- /@types/node@18.16.2:
- resolution: {integrity: sha512-GQW/JL/5Fz/0I8RpeBG9lKp0+aNcXEaVL71c0D2Q0QHDTFvlYKT7an0onCUXj85anv7b4/WesqdfchLc0jtsCg==}
+ /@types/node@18.16.3:
+ resolution: {integrity: sha512-OPs5WnnT1xkCBiuQrZA4+YAV4HEJejmHneyraIaxsbev5yCEr6KMwINNFP9wQeFIw8FWcoTqF3vQsa5CDaI+8Q==}
dev: true
/@types/normalize-package-data@2.4.1:
diff --git a/packages/components/cheat-sheet.html b/packages/components/cheat-sheet.html
index 32e76c9cb8..164b136e0b 100644
--- a/packages/components/cheat-sheet.html
+++ b/packages/components/cheat-sheet.html
@@ -60,12 +60,12 @@
- Cheat Sheet
+ Cheat Sheet
KoliBri ist eine barrierefreie Komponenten-Bibliothek die sich durch separate Themes an unterschiedliche Styleguides und Design Systeme anpassen lässt.
Link zur ausführliche Dokumentation
- Integration
+ Integration
Für eine hohe Flexibilität werden alle Teile (HTML, CSS, Fonts usw.) per Komposition-Prinzip beliebig mit einander kombiniert. Damit alles korrekt funktioniert, müssen alle Teile einer spezifischen Komposition eingebunden bzw. konfiguriert werden. In den folgenden Unterabschnitten wird die Integration am Beispiel des ITZBund-Themes gezeigt.
- Assets
+ Assets
Fonts und Icon-Fonts müssen im <head> der HTML-Seite eingebunden werden.
<head>
@@ -73,7 +73,7 @@
<link href="https://use.fontawesome.com/releases/v6.2.1/css/all.css" rel="stylesheet">
</head>
- Loader
+ Loader
Mit KoliBri ist es möglich unterschiedliche Themes mit den Komponenten zu kombinieren. Die Verknüpfung erfolgt über die Register-Methode. Ihr können eine oder mehrere Loader für die Custom-Elements und Themes übergeben werden.
<head>
@@ -87,21 +87,21 @@
</script>
</head>
- Config
+ Config
Wenn ein Theme registriert wird, werden alle darin enthaltenen CSS-Properties unter dem Theme-Namen als CSS-Klasse im <head> der HTML-Seite hinzugefügt. So wird es ermöglicht, dass diese CSS-Properties in eigenem CSS für das "umrahmende" HTML wiederverwendet werden können. Damit das funktioniert, muss die CSS-Klasse mit dem Theme-Namen z.B. am <body> gesetzt werden.
<body class="itzbund" data-theme="itzbund">
...
</body>
- VSCode
+ VSCode
Im VSCode können die Meta-Informationen der Komponenten und deren Eigenschaften für die Autovervollständigung von HTML aktiviert werden.
{
"html.customData": ["./node_modules/@public-ui/components/vscode-custom-data.json"]
}
- Dev-Tools
+ Dev-Tools
KoliBri hat zahlreiche Hinweise für die Barrierefreiheit und Verwendung der Komponenten für die Entwicklung eingebaut. Damit die Hinweise in der Konsole des Browsers angezeigt werden, muss folgende Definition im <head> der HTML-Seite hinzugefügt werden.
<head>
@@ -125,13 +125,13 @@
- Usage
+ Usage
KoliBri-Komponenten sind wie eigenen HTML-Tags und werden einfach als solche im "umrahmenden" HTML (Responsiveness, Grid usw.) wiederverwendet und deren Ausprägung mittels der Komponenten-Eigenschaften bestimmt.
<kol-input-text _id="surname" _required _value="Mustermann">Surname</kol-input-text>
<kol-spin _show></kol-spin>
- Components
+ Components
In der folgenden Tabelle werden alle Komponenten erläutert und deren jeweiligen Eigenschaften aufgelistet.
- Properties
+ Properties
In der folgenden Tabelle werden alle Eigenschaften der Häufigkeit nach erläutert und jeweils die Komponenten aufgelistet, wo sie verwendet werden..