blue-react 6.9.2

package/dist/style.scss

@@ -0,0 +1,36 @@
+@import "node_modules/bootstrap/scss/functions";
+@import "node_modules/bootstrap/scss/variables";
+@import "./style/_variables.scss";
+
+@import "./style/_mixins.scss";
+@import "./style/_keyframes.scss";
+
+// @import "../node_modules/bootstrap/scss/bootstrap.scss";
+
+@import "./style/_bootstrap.scss";
+// @import "node_modules/bootstrap/scss/bootstrap.scss";
+
+@import "./style/_general";
+@import "./style/_router";
+@import "./style/_status";
+@import "./style/_grid";
+@import "./style/_search";
+@import "./style/_actions_deprecated";
+@import "./style/_actions";
+@import "./style/_fluent";
+@import "./style/_switch";
+@import "./style/_caret";
+
+@import "./style/document-view";
+@import "./style/_bootstrap-optimizations.scss";
+
+
+/* fix scroll problem */
+// body {
+//     overflow-y: auto;
+// }
+
+// .router-page {
+//     overflow-y: hidden;
+//     height: auto;
+// }

package/dist/types/ActionMenu.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+
+export interface IActionMenuProps {
+    /**
+     * Versteckt die drei Punkte in mobiler Ansicht.
+     * Das kann nützlich sein, wenn mehrere ActionMenus genutzt werden, aber nicht überall der Toggle angezeigt werden soll.
+     */
+    hideToggleAction?: boolean;
+}
+
+/**
+ * Das Action-Menü an der oberen rechten Ecke einer Seite. Hier können Aktionen platziert werden, die im Kontext der aktuellen Seite stehen.
+ */
+declare class ActionMenu extends React.Component<IActionMenuProps, any> { }
+export default ActionMenu;

package/dist/types/ActionMenuItem.d.ts

@@ -0,0 +1,33 @@
+import React from "react";
+
+export interface IActionMenuItemProps {
+    /**
+     * Extends className of the `.nav-item` element.
+     */
+    navItemClassName?: string;
+
+    /**
+     * Extends className of the `.nav-link` element.
+     */
+    className?: string;
+
+    href?: string;
+
+    onClick?: () => void;
+
+    /**
+     * className for the icon.
+     */
+    icon?: string;
+
+    /**
+     * Label for the link.
+     */
+    label?: any;
+}
+
+/**
+ * List-Item und Link für das Action-Menü.
+ */
+declare class ActionMenuItem extends React.Component<IActionMenuItemProps, any> { }
+export default ActionMenuItem;

package/dist/types/ActionMenuSwitch.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+
+export interface IActionMenuSwitchProps {
+    className?: string;
+    checked?: boolean;
+    onChange?: () => void;
+
+    /**
+     * Beschriftung des Controls
+     */
+    label?: any;
+}
+
+/**
+ * @deprecated(When using Actions, please use SwitchMenuItem instead.)
+ * Switch für das Action-Menü.
+ */
+declare class ActionMenuSwitch extends React.Component<IActionMenuSwitchProps, any> { }
+export default ActionMenuSwitch;

package/dist/types/Actions.d.ts

@@ -0,0 +1,35 @@
+import React from "react";
+import { breakOption } from "./shared";
+
+export interface IActionsProps {
+    /**
+     * Content that will appear on the menu when it's expanded.
+     */
+    children?: any,
+
+    /**
+     * Extends the `className` of `.blue-actions`.
+     */
+    className?: string;
+
+    /**
+     * Content that will appear when the menu is shrunken.
+     */
+    featured?: any;
+    open?: boolean;
+
+    /**
+     * Will fire when the state of `open` will change inside of the component.
+     * **Example:** `onToggle={open => this.setState({ open })}`
+     */
+    onToggle?: (open: boolean) => void;
+    break?: breakOption;
+}
+
+/**
+ * The new actions menu, better optimized for mobile devices.
+ * **Important:** If you use `<Actions />` on a page, make sure also to set **hasActions** prop from
+ * **Page** component to `true`.
+ */
+declare class Actions extends React.Component<IActionsProps, any> { }
+export default Actions;

package/dist/types/Body.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import { breakOption } from "./shared";
+
+export interface IBodyProps {
+    id?: string;
+    className?: string;
+
+    /**
+     * Setzt die Klasse für den Container. Mehr Infos unter https://getbootstrap.com/docs/4.0/layout/overview/#containers
+     */
+    containerClass?: string;
+
+    /**
+     * Set `true` if this page uses `<Actions />`, so this component will get enough padding to avoid overlapping of the content.
+     */
+    hasActions?: boolean;
+    break?: breakOption;
+}
+
+/**
+ * Enthält den Inhalt einer Seite.
+ */
+declare class Body extends React.Component<IBodyProps, any> { }
+export default Body;

package/dist/types/Caret.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+
+export interface ICaretProps {
+    /**
+     * Indicates if open or not.
+     */
+    open?: boolean;
+
+    /**
+     * By default the caret points to the right when closed. Set mirrored and it will point to the left.
+     */
+    mirrored?: boolean;
+
+    className?: string;
+}
+
+/**
+ * Caret icon component.
+ */
+declare class Caret extends React.Component<ICaretProps, any> { }
+export default Caret;

package/dist/types/DocumentView.d.ts

@@ -0,0 +1,30 @@
+import React from "react";
+
+export interface IDocumentViewProps {
+    /**
+     * Quelle des Inhalts (URL)
+     */
+    src?: string;
+
+    /**
+     * Statt Quelle, kann der Inhalt (HTML) auch direkt übergeben werden.
+     */
+    content?: string;
+
+    /**
+     * MIME-Typ des Inhalts (z.B. "application/pdf")
+     */
+    mimeType: string;
+
+    /**
+     * Beschriftung für den Button für das Anzeigen
+     */
+    showDocumentLabel: string;
+}
+
+/**
+ * Zeigt Inhalt anhand einer URL in einem iFrame an.
+ * Wenn der Inhalt nicht in einem iFrame angezeigt werden kann, wird stattdessen ein Download-Button angeboten.
+ */
+declare class DocumentView extends React.Component<IDocumentViewProps, any> { }
+export default DocumentView;

package/dist/types/FluentBtn.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+
+export interface IFluentBtnProps {
+    /**
+     * Inhalt des Buttons. Es werden auch alle anderen Properties unterstützt.
+     */
+    children?: any;
+
+    className?: string;
+
+    /**
+     * Wenn gesetzt, wird ein `<a>`-Element zurückgegeben. Ansonsten ist es ein `<button>`.
+     */
+    href?: string;
+
+    /**
+     * Kann bei Schaltflächen mit weißen Flächen gesetzt werden. Der Schein ist dann etwas dunkler.
+     */
+    light?: boolean;
+
+    type?: string;
+}
+
+/**
+ * Shortcut für `<button class="fluent-btn"><div className="fluent-btn-ball"></div></button>`.
+ * Erzeugt Button, mit einem Acrylic-Effekt.
+ */
+declare class FluentBtn extends React.Component<IFluentBtnProps, any> { }
+export default FluentBtn;

package/dist/types/Grid.d.ts

@@ -0,0 +1,49 @@
+import React from "react";
+
+export interface IGridProps {
+    /**
+     * Die Sidebar ist bei Vollbild automatisch eingeklappt.
+     */
+    expandSidebar?: boolean;
+
+    /**
+     * Deaktiviert die Sidebar.
+     */
+    hideSidebarMenu?: boolean;
+
+    /**
+     * Registriert Seiten. Beispiel: [{name: "home", component: <HomePage />}]
+     */
+    pages?: { name: string; component: JSX.Element }[];
+
+    /**
+     * Wenn <code>true</code> wird immer die "home"-Route geladen.
+     */
+    unrouteable?: boolean;
+
+    /**
+     * Erweitert die <code>className</code>-Eigenschaft.
+     */
+    className?: string;
+
+    /**
+     * Normalerweise wird der Dokumenten-Titel automatisch gesetzt. Setze diese Property auf <code>true</code> um das zu
+     * deaktivieren.
+     */
+    disableTitleSet?: boolean;
+}
+
+/**
+ * Das Grundgerüst. Sobald diese Komponente gemountet wurde, ist sie global über `window.blueGridRef` zugreifbar.  
+ * Außerdem kann über `window.blueGridRef.addEventListener(eventName, (prevProps, prevState) => { })` ein Event-Listener angefügt werden.  
+
+ * Erlaubte Event-Listener:
+
+ * |Event name|Description|Beispiel|
+ * |--- |--- |--- |
+ * |componentDidUpdate|Komponente wurde aktualisiert.|`window.blueGridRef.addEventListener("componentDidUpdate", (prevProps, prevState) => { })`|
+ * |pageDidShowAgain|Seite wurde erneut angezeigt, mit altem Stand. Im Callback kann Komponente neu initialisiert werden.|`window.blueGridRef.addEventListener("pageDidShowAgain", "home", (prevProps, prevState) => { })`|
+ * |pageDidHide|Seite wurde versteckt (andere Seite wurde angezeigt).|`window.blueGridRef.addEventListener("pageDidHide", "home", (prevProps, prevState) => { })`|
+ */
+declare class Grid extends React.Component<IGridProps, any> { }
+export default Grid;

package/dist/types/Header.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+
+export interface IHeaderProps { }
+
+declare class Header extends React.Component<IHeaderProps, any> { }
+export default Header;

package/dist/types/HeaderActions.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+
+export interface IHeaderActionsProps {
+    className?: string;
+
+    /**
+     * Legt fest, ab welcher Breite umgebrochen wird. Mögliche Werte: <code>"sm"</code> (768px), <code>"md"</code> (992px), <code>"lg"</code> (1200px)
+     */
+    breakpoint?: string;
+}
+
+/**
+ * Hier werden z.B. Buttons für die aktuelle Seite platziert.
+ */
+declare class HeaderActions extends React.Component<IHeaderActionsProps, any> { }
+export default HeaderActions;

package/dist/types/HeaderTitle.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+
+export interface IHeaderTitleProps {
+    /**
+     * Kann ein Bild sein. Wird im src-Attribute implementiert.
+     */
+    logo?: string;
+
+    /**
+     * Der Text, der neben dem Logo steht.
+     */
+    appTitle?: string;
+
+    /**
+     * Deaktiviert, dass der App-Titel bei bestimmer Bildschirmgröße ausgeblendet wird.
+     */
+    keepAppTitle?: boolean;
+}
+
+/**
+ * Der Titel-Bereich in der Kopf-Leiste.
+ * Anhand dessen wird auch der Dokumenten-Titel gesetzt (was in der Browser Titelzeile gezeigt wird).
+ */
+declare class HeaderTitle extends React.Component<IHeaderTitleProps, any> { }
+export default HeaderTitle;

package/dist/types/Intro.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+
+export interface IIntroProps {
+    /**
+     * Kann ein Bild sein. Wird im src-Attribute implementiert.
+     */
+    logo?: string;
+
+    /**
+     * Maximale Breite des Logos.
+     */
+    logoMaxWidth?: string;
+
+    /**
+     * Der Text, der unter dem Logo erscheint
+     */
+    title?: string;
+
+    /**
+     * Inhalt
+     */
+    children?: any;
+}
+
+/**
+ * Geeignet als Login-Bildschirm.
+ */
+declare class Intro extends React.Component<IIntroProps, any> { }
+export default Intro;

package/dist/types/MenuItem.d.ts

@@ -0,0 +1,54 @@
+import React from "react";
+
+export interface IMenuItemProps {
+    /**
+ * Setzt to-Property der NavLink-Komponente aus React Router.
+ */
+    to?: string;
+
+    /**
+     * Kann als Alternative zu to benutzt werden.
+     */
+    href?: string;
+
+    /**
+     * onClick Event
+     */
+    onClick?: (event: React.MouseEvent) => void;
+
+    /**
+     * Klasse eines Icons oder Element, z.B. von blueicon-colored.
+     */
+    icon?: any;
+
+    /**
+     * Beschriftung des Links
+     */
+    label?: any;
+
+    /**
+     * Soll Item als "aktiv" markiert werden? Ist die to-Property gesetzt, wird Item automatisch als "aktiv" markiert, wenn entsprechende Seite aktiv ist.
+     */
+    isActive?: boolean;
+
+    /**
+     * Als MenuItem für Startseite deklariert.
+     */
+    isHome?: boolean;
+
+    /**
+     * Ergänzung der Klasse vom Dropdown-Menü.
+     */
+    dropdownClassName?: string;
+
+    /**
+     * Werden in einem Dropdown-Menü angezeigt.
+     */
+    children?: any;
+}
+
+/**
+ * List-Item und Link für die Sidebar.
+ */
+declare class MenuItem extends React.Component<IMenuItemProps, any> { }
+export default MenuItem;

package/dist/types/Page.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+
+export interface IPageProps {
+
+}
+
+declare class Page extends React.Component<IPageProps, any> { }
+export default Page;

package/dist/types/Search.d.ts

@@ -0,0 +1,30 @@
+import React from "react";
+
+export interface ISearchProps {
+    /**
+     * Wird Komponente in der Sidebar genutzt?
+     */
+    sidebar?: boolean;
+
+    /**
+     * Wird Komponente im Body genutzt?
+     */
+    body?: boolean;
+
+    /**
+     * Erlaube Zurücksetzen?
+     */
+    reset?: boolean;
+
+    value?: string;
+    onChange?: (event: React.ChangeEvent) => void;
+    onSubmit?: (event: React.FormEvent) => void;
+    placeholder?: string;
+    autoFocus?: boolean;
+}
+
+/**
+ * Eine Suchleiste, die zur Seitenleiste hinzugefügt werden kann.
+ */
+declare class Search extends React.Component<ISearchProps, any> { }
+export default Search;

package/dist/types/SidebarMenu.d.ts

@@ -0,0 +1,39 @@
+import React from "react";
+
+export interface ISidebarMenuProps {
+    /**
+     * Erweiterung der className-Property der Seitenleiste.
+     */
+    sidebarClass?: string;
+
+    /**
+     * Setzt die style-Property der Seitenleiste.
+     */
+    sidebarStyle?: object;
+
+    /**
+     * Erweiterung der className-Property des Menüs.
+     */
+    menuClass?: string;
+
+    /**
+     * Setzt die style-Property des Menüs.
+     */
+    menuStyle?: object;
+
+    /**
+     * Inhalte oberhalb des Sidebar-Menüs
+     */
+    topContent?: any;
+
+    /**
+     * Inhalte für den Footer der Sidebar
+     */
+    bottomContent?: any;
+}
+
+/**
+ * Die Seitenleiste für das Grid.
+ */
+declare class SidebarMenu extends React.Component<ISidebarMenuProps, any> { }
+export default SidebarMenu;

package/dist/types/Switch.d.ts

@@ -0,0 +1,26 @@
+import React from "react";
+
+export interface ISwitchProps {
+
+    className?: string;
+    checked?: boolean;
+    onChange?: (event: React.ChangeEvent) => void;
+
+    /**
+     * Sets label inside of the switch. If you set this, you should also set the className "lg" to make the switch larger.
+     */
+    sliderLabel?: string;
+
+    /**
+     * You can change the type of the wrapper element. If you do, the `onChange` event might not be triggered.
+     */
+    elementType?: string;
+
+    disabled?: boolean;
+}
+
+/**
+ * Switch.
+ */
+declare class Switch extends React.Component<ISwitchProps, any> { }
+export default Switch;

package/dist/types/SwitchMenuItem.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import Switch from "./Switch";
+
+export interface ISwitchMenuItemProps {
+
+    onClick?: (event: React.ChangeEvent) => void;
+    Label?: any;
+    Icon?: ImageBitmap;
+    SwitchMenuItem?: Switch;
+}
+    /**
+    * Switch for **Actions**
+    */
+declare class SwitchMenuItem extends React.Component<ISwitchMenuItemProps, any> { }
+export default SwitchMenuItem;

package/dist/types/Utilities.d.ts

@@ -0,0 +1,55 @@
+declare module Utilities {
+    /** Checks if element has a specific class name. */
+    function hasClass(el: Element, className: string): boolean;
+
+    /** Adds a class name to an element. */
+    function addClass(el: Element, className: string): void;
+
+    /** Removes a class name from an element. */
+    function removeClass(el: Element, className: string): void;
+
+    /** Adds class name to element, if it doesn't it yet. Otherwise it removes it. */
+    function toggleClass(element: Element, className: string): void;
+
+    /** Shows loading animation. */
+    function startLoading(): void;
+
+    /** Hides loading animation. */
+    function finishLoading(): void;
+
+    /** Shows success symbol. */
+    function showSuccess(): void;
+
+    /** Hides success symbol. */
+    function hideSuccess(): void;
+
+    /** Shows action menu or hides it. */
+    function toggleActions(): void;
+
+    /** Resets alert message and removes it. */
+    function resetAlertMessage(alertClassName?: string = "info"): void;
+
+    /** Shows an alert message. */
+    function setAlertMessage(
+        message: string,
+        alertClassName?: ("loading" | "success" | "info" | "warning" | "danger") = "info",
+        close?: boolean,
+        detailText?: string
+    ): void;
+
+    /** Returns string of random characters. */
+    function guid(): string;
+
+    /** Scrolls to the top of the page. */
+    function scrollToTop(): void;
+
+    /** Disables the effect of Fluent buttons. */
+    function unregisterFluentBtns(): void;
+
+    /** Enables the effect of Fluent buttons. */
+    function registerFluentBtns(): void;
+
+    /** Uses native `fetch` function, but adds error handling and shows error messages if there are any. */
+    function fetchData(input: RequestInfo, init?: RequestInit | undefined): Promise<void | Response>;
+}
+export default Utilities;

package/dist/types/shared.d.ts

@@ -0,0 +1 @@
+export type breakOption = "sm" | "md" | "lg" | "xl";

package/index.d.ts

@@ -0,0 +1,62 @@
+import Grid from "./dist/types/Grid";
+
+export { default as Grid } from "./dist/types/Grid";
+export { IGridProps } from "./dist/types/Grid";
+
+declare global {
+    interface Window { blueGridRef: any; }
+}
+export default global;
+
+export { default as ActionMenu } from "./dist/types/ActionMenu";
+export { IActionMenuProps } from "./dist/types/ActionMenu";
+
+export { default as ActionMenuItem } from "./dist/types/ActionMenuItem";
+export { IActionMenuItemProps } from "./dist/types/ActionMenuItem";
+
+export { default as ActionMenuSwitch } from "./dist/types/ActionMenuSwitch";
+export { IActionMenuSwitchProps } from "./dist/types/ActionMenuSwitch";
+
+export { default as Actions } from "./dist/types/Actions";
+export { IActionsProps } from "./dist/types/Actions";
+
+export { default as Body } from "./dist/types/Body";
+export { IBodyProps } from "./dist/types/Body";
+
+export { default as Caret } from "./dist/types/Caret";
+export { ICaretProps } from "./dist/types/Caret";
+
+export { default as DocumentView } from "./dist/types/DocumentView";
+export { IDocumentViewProps } from "./dist/types/DocumentView";
+
+export { default as FluentBtn } from "./dist/types/FluentBtn";
+export { IFluentBtnProps } from "./dist/types/FluentBtn";
+
+export { default as Header } from "./dist/types/Header";
+export { IHeaderProps } from "./dist/types/Header";
+
+export { default as HeaderActions } from "./dist/types/HeaderActions";
+export { IHeaderActionsProps } from "./dist/types/HeaderActions";
+
+export { default as HeaderTitle } from "./dist/types/HeaderTitle";
+export { IHeaderTitleProps } from "./dist/types/HeaderTitle";
+
+export { default as Intro } from "./dist/types/Intro";
+export { IIntroProps } from "./dist/types/Intro";
+
+export { default as MenuItem } from "./dist/types/MenuItem";
+export { IMenuItemProps } from "./dist/types/MenuItem";
+
+export { default as Page } from "./dist/types/Page";
+export { IPageProps } from "./dist/types/Page";
+
+export { default as Search } from "./dist/types/Search";
+export { ISearchProps } from "./dist/types/Search";
+
+export { default as SidebarMenu } from "./dist/types/SidebarMenu";
+export { ISidebarMenuProps } from "./dist/types/SidebarMenu";
+
+export { default as Switch } from "./dist/types/Switch";
+export { ISwitchProps } from "./dist/types/Switch";
+
+export { default as Utilities } from "./dist/types/Utilities";