@lucsoft/webgen
Version:
Collection of lucsofts Components
522 lines (521 loc) • 18 kB
Plain Text
declare module "css/themes" {
export const blur: {
[key in string]: string;
};
export const dark: {
[key in string]: string;
};
export const light: {
[key in string]: string;
};
}
declare module "lib/SupportedThemes" {
export const enum SupportedThemes {
light = 0,
gray = 1,
dark = 2,
blur = 3,
auto = 4,
autoDark = 5,
autoLight = 6
}
}
declare module "types/actions" {
export type ButtonActions = {
title: string;
action: () => void;
};
export const enum ButtonStyle {
Inline = "inline",
Normal = "normal",
Secondary = "secondary",
Spinner = "spinner",
Progress = "progress"
}
}
declare module "types/RenderingX" {
/**
* @deprecated Please use Component
*/
export interface RenderElement {
draw: () => HTMLElement;
}
export type Component = HTMLElement | RenderElement;
}
declare module "types/card" {
export const enum CardTypes {
Default = 0,
Modern = 1,
Note = 2,
Rich = 3,
Headless = 4
}
export type CommonCard = {
draw: (preCard: HTMLElement) => HTMLElement;
getSize: () => {
width?: number;
height?: number;
};
};
}
declare module "types/html" {
export type HTMLStringy = HTMLElement | string;
}
declare module "types/ViewOptions" {
import { Component } from "types/RenderingX";
export type ViewOptions<State> = {
use: (comp: Component) => void;
state: Partial<State>;
update: (data: Partial<State>) => void;
};
export type ViewOptionsFunc<State> = (opt: ViewOptions<State>) => void;
}
declare module "types/index" {
export * from "types/actions";
export * from "types/RenderingX";
export * from "types/card";
export * from "types/html";
export * from "types/ViewOptions";
}
declare module "components/generic/Icon" {
import { Component } from "types/index";
export const Icon: (icon: string, ...classList: string[]) => Component;
export const enum CommonIconType {
ArrowDown = 0,
Done = 1,
Close = 2,
Download = 3,
Edit = 4,
Delete = 5
}
export const CommonIcon: (icon: CommonIconType) => string;
}
declare module "components/Helper" {
import { Component } from "types/index";
export const conditionalCSSClass: (element: HTMLElement, condition: boolean | undefined, className: string) => void;
export const nullish: (...components: (Component | null | undefined)[]) => Component[];
}
declare module "components/Components" {
import { Component } from "types/index";
export const createElement: (type: string) => HTMLElement;
export function draw(component: Component): HTMLElement;
export function action(element: HTMLElement, type: string, value: unknown): void;
export const span: (message: undefined | string | HTMLElement, ...classList: string[]) => HTMLElement;
export const img: (source: string | undefined, ...classList: string[]) => HTMLImageElement;
export function custom(type: string, message: undefined | string | HTMLElement, ...classList: string[]): HTMLElement;
/**
* #Actions
* @value (list)
* @deprecated Please use Vertical()
*/
export function list(options: {
margin?: boolean;
style?: "none" | "default";
noHeigthLimit?: boolean;
}, ...listRaw: {
left: Component | string;
right?: Component | string;
click?: () => void;
actions?: {
type: Component;
click: () => void;
}[];
}[]): HTMLElement;
}
declare module "lib/Color" {
export const enum Color {
Disabled = "disabled",
Grayscaled = "grayscaled",
Colored = "colored",
Critical = "critical"
}
}
declare module "types/Colors" {
import { Color } from "lib/Color";
export type ColorDef = {
[color in Color]: [hue: number, saturation: number, lightness: number, font: string];
};
}
declare module "lib/Style" {
import { SupportedThemes } from "lib/SupportedThemes";
import { WebGenOptions } from "webgen";
import { ColorDef } from "types/Colors";
export class Style {
private theme;
private current;
private mediaQuery;
private options;
constructor(options: WebGenOptions);
setImage(src: String): void;
clearImage(): void;
getTheme: () => SupportedThemes;
getColors: () => ColorDef;
overrideTheme(data: {
[key in string]: string;
}): void;
private mapColorDef;
private applyStyles;
updateTheme(theme: SupportedThemes): void;
private getMapping;
}
}
declare module "lib/icons/none" {
export class Icons {
}
}
declare module "components/cards/searchCard" {
import { CommonCard } from "types/card";
import '../../css/search.webgen.static.css';
export type SearchEntry = {
name: string;
icon?: string;
tags?: string[];
category?: string;
suffix?: string;
id: string;
};
export const enum SearchMode {
ShowBegin = 0,
HideBegin = 1,
HideWhenEmpty = 2
}
export const searchCard: (settings: {
type: "smart" | "default";
maxWidth?: string | "default";
mode?: SearchMode;
placeholder?: string;
notfound?: string;
icons?: {
edit: string;
close: string;
remove: string;
download: string;
};
actions?: {
close?: () => void;
click?: (arg: SearchEntry) => void;
download?: (arg: SearchEntry) => void;
edit?: (arg: SearchEntry) => void;
remove?: (arg: SearchEntry) => void;
};
index: SearchEntry[];
width?: number;
}) => CommonCard;
}
declare module "components/cards/defaultCard" {
import { CommonCard } from "types/card";
import { HTMLStringy } from "types/html";
import '../../css/cards.lline.webgen.static.css';
export const defaultCard: (options: {
title: HTMLStringy;
subtitle?: string;
small?: boolean;
width?: number;
height?: number;
}) => CommonCard;
}
declare module "components/cards/headlessCard" {
import { CommonCard } from "types/index";
export const headless: (element: HTMLElement) => CommonCard;
}
declare module "components/generic/Input" {
import { Color } from "lib/Color";
import { Component } from "types/index";
import '../../css/input.webgen.static.css';
export const Input: ({ color, value, changeOn, blurOn, placeholder, type, autoFocus }: {
type?: "text" | "email" | "password" | "url";
color?: Color;
placeholder: string;
value?: string;
autoFocus?: boolean;
blurOn?: (value: string) => void;
changeOn?: (value: string) => void;
}) => Component;
}
declare module "components/generic/Stacks" {
import { CommonCard, Component } from "types/index";
import '../../css/stack.webgen.static.css';
export type StackOpts = {
gap?: string;
classes?: string[];
align?: 'center' | 'flex-start' | 'flex-end' | 'space-between' | 'space-evenly' | 'space-around';
margin?: string;
};
export const Horizontal: (opts: StackOpts, ...components: Component[]) => Component;
export const Vertical: (opts: StackOpts, ...components: Component[]) => Component;
export const Grid: ({ minColumnWidth, maxWidth, gap }: {
minColumnWidth?: number;
maxWidth?: string;
gap?: number;
}, ...cardArray: CommonCard[]) => Component;
}
declare module "components/light-components/loadingWheel" {
export const loadingWheel: () => SVGSVGElement;
}
declare module "lib/Accessibility" {
import { Color } from "lib/Color";
export const accessibilityButton: (button: HTMLElement) => (ev: KeyboardEvent) => any;
export const accessibilityDisableTabOnDisabled: (color: Color | undefined) => number;
}
declare module "components/generic/Button" {
import { Color } from "lib/Color";
import { ButtonStyle, Component } from "types/index";
import '../../css/buttons.webgen.static.css';
export type ButtonAction = {
setProgress: (progress: number) => void;
setEnabled: (enable: boolean) => void;
changeState: (state: ButtonStyle) => void;
};
export const Button: ({ state, text, pressOn, progress, color, href, dropdown, selectedOn, arrowDownIcon }: {
state?: ButtonStyle;
color?: Color;
progress?: number;
href?: string;
dropdown?: ([displayName: string, action: () => void])[];
text: string;
pressOn?: (e: ButtonAction) => void;
selectedOn?: () => void;
arrowDownIcon?: string;
}) => Component;
}
declare module "components/cards/richCard" {
import { ButtonStyle } from "types/actions";
import { CommonCard } from "types/card";
import { HTMLStringy } from "types/html";
import '../../css/cards.rich.webgen.static.css';
import { Color } from "lib/Color";
export const richCard: (options: {
title: HTMLStringy;
content: (HTMLStringy)[] | (HTMLStringy);
buttonListLeftArea?: HTMLElement;
buttons?: {
title: string;
action: (() => void) | (() => Promise<void>);
variant?: ButtonStyle;
color?: Color;
}[];
width?: number;
height?: number;
}) => CommonCard;
}
declare module "components/cards/loginCard" {
export const loginCard: ({ titleText, email, url, button, password, makeLogin, errorMessage }: {
titleText?: string;
email?: {
text: string;
default?: string;
};
url?: {
text: string;
default?: string;
};
button?: string;
password?: {
text: string;
default?: string;
};
errorMessage?: string;
makeLogin: (loginData: {
password: string;
email?: string;
url?: string;
}) => Promise<boolean>;
}) => import("types").CommonCard;
}
declare module "components/cards/modernCard" {
import { CommonCard } from "types/index";
import { HTMLStringy } from "types/html";
import '../../css/cards.modern.webgen.static.css';
export const modernCard: (options: {
title: HTMLStringy;
subtitle?: string;
description?: HTMLStringy;
align?: "right" | "left" | "down";
icon?: string | {
svg: string;
};
width?: number;
height?: number;
}) => CommonCard;
}
declare module "components/cards/noteCard" {
import { CommonCard } from "types/card";
import { HTMLStringy } from "types/html";
import '../../css/cards.note.webgen.static.css';
export const noteCard: (options: {
title: HTMLStringy;
icon: string;
width?: number;
height?: number;
}) => CommonCard;
}
declare module "components/generic/Title" {
import { RenderElement } from "types/index";
export const Title: (settings: {
title: string;
subtitle?: string;
img?: string;
type: "small" | "big";
}) => RenderElement;
}
declare module "components/generic/Tab" {
import { Color } from "lib/Color";
import { Component } from "types/index";
import '../../css/tab.webgen.static.css';
export const Tab: ({ color, selectedIndex, selectedOn }: {
color?: Color;
selectedIndex?: number;
selectedOn?: (index: number) => void;
}, ...dropdown: ([displayName: string, action: () => void])[]) => Component;
}
declare module "components/generic/Checkbox" {
import { Color } from "lib/Color";
import { Component } from "types/index";
import '../../css/checkbox.webgen.static.css';
export const Checkbox: ({ color, selected, toggledOn, icon }: {
color?: Color;
selected?: boolean;
toggledOn?: (value: boolean) => void;
icon?: string;
}) => Component;
}
declare module "components/generic/IconButton" {
import { Color } from "lib/Color";
import { Component } from "types/index";
import '../../css/iconbutton.webgen.static.css';
import { CommonIconType } from "components/generic/Icon";
export const IconButton: ({ color, icon, clickOn }: {
color?: Color;
icon: CommonIconType | string;
clickOn?: () => void;
}) => Component;
}
declare module "components/generic/Custom" {
import { RenderElement } from "types/index";
export const Custom: (text: HTMLElement) => RenderElement;
}
declare module "components/generic/Card" {
import { Component } from "types/index";
export const Card: (compoent: Component) => Component;
}
declare module "components/generic/PageTitle" {
import { RenderElement } from "types/index";
export const PageTitle: (text: string) => RenderElement;
}
declare module "lib/icons/BootstrapIcons" {
import 'bootstrap-icons/font/bootstrap-icons.css';
import { Icons } from "lib/icons/none";
export class BootstrapIcons extends Icons {
constructor();
}
}
declare module "lib/icons/MaterialIcons" {
import 'material-icons/iconfont/round.css';
import { Icons } from "lib/icons/none";
export class MaterialIcons extends Icons {
constructor();
}
}
declare module "lib/RenderingX" {
import '../css/cards.webgen.static.css';
import '../css/dialog.webgen.static.css';
export class RenderingX {
private staticNotify;
constructor();
notify(test: string, keepOpenUntilDone?: () => Promise<undefined>): void;
}
}
declare module "lib/View" {
import '../css/cards.webgen.static.css';
import { ViewOptions, ViewOptionsFunc } from "types/ViewOptions";
export type ViewData = {
setMaxWidth: (maxWidth: string) => ViewData;
addClass: (...classes: string[]) => ViewData;
enableCenterFromMiddle: () => ViewData;
appendOn: (component: HTMLElement) => ViewData;
unsafeViewOptions: <StateType>() => ViewOptions<StateType>;
};
export function View<State>(render: ViewOptionsFunc<State>): ViewData;
}
declare module "lib/Dialog" {
import '../css/dialog.webgen.static.css';
import { ButtonStyle } from "types/index";
import { ViewOptions, ViewOptionsFunc } from "types/ViewOptions";
import { Color } from "lib/Color";
type DialogeFinal = void | undefined | 'close' | 'remove';
type DialogButtonAction = ((() => DialogeFinal) | (() => Promise<DialogeFinal>) | 'close' | 'remove');
export type DialogButton = {
label: string;
action: DialogButtonAction;
color: Color;
state?: ButtonStyle.Inline | ButtonStyle.Normal | ButtonStyle.Secondary;
};
export type DialogData = {
addButton: (label: string, action: DialogButtonAction, style?: DialogButton["color"], state?: DialogButton["state"]) => DialogData;
setTitle: (text: string) => DialogData;
allowUserClose: () => DialogData;
addClass: (...classes: string[]) => DialogData;
onClose: (action: () => void) => DialogData;
close: () => DialogData;
open: () => DialogData;
remove: () => void;
unsafeViewOptions: <TypeT>() => ViewOptions<TypeT>;
};
export function Dialog<State>(render: ViewOptionsFunc<State>): DialogData;
}
declare module "webgen" {
import { Style } from "lib/Style";
import { SupportedThemes } from "lib/SupportedThemes";
export { SupportedThemes } from "lib/SupportedThemes";
import './css/webgen.static.css';
import './css/elements.css';
import './css/grouping.css';
import './css/master.css';
import './css/modern.css';
import { ColorDef } from "types/Colors";
import { Icons } from "lib/icons/none";
export * from "components/Components";
export * from "components/Helper";
export * from "components/cards/searchCard";
export * from "components/cards/defaultCard";
export * from "components/cards/headlessCard";
export * from "components/cards/loginCard";
export * from "components/cards/modernCard";
export * from "components/cards/noteCard";
export * from "components/cards/richCard";
export * from "components/cards/searchCard";
export * from "components/generic/Title";
export * from "components/generic/Tab";
export * from "components/generic/Checkbox";
export * from "components/generic/Input";
export * from "components/generic/Icon";
export * from "components/generic/IconButton";
export * from "components/generic/Custom";
export * from "components/generic/Card";
export * from "components/generic/Stacks";
export * from "components/generic/PageTitle";
export * from "components/generic/Button";
export * from "components/light-components/loadingWheel";
export * from "types/index";
export * from "lib/icons/BootstrapIcons";
export * from "lib/icons/MaterialIcons";
export * from "lib/RenderingX";
export * from "lib/View";
export * from "lib/Dialog";
export * from "lib/Color";
export type WebGenOptions = {
autoLoadFonts?: boolean;
updateThemeOnInit?: false;
colors?: ColorDef;
icon?: Icons;
events?: {
"themeChanged"?: (data: SupportedThemes, options: Style) => void;
"themeRefreshed"?: (data: SupportedThemes, options: Style) => void;
};
theme?: SupportedThemes;
defaultElementToHookStylesIn?: HTMLElement;
};
export const WebGen: (options?: WebGenOptions) => {
theme: Style;
};
}