@brandup/ui-kit 1.0.1 → 1.0.3

package/README.md

@@ -10,7 +10,7 @@ npm i @brandup/ui-kit@latest
 
 Add `@brandup/ui-kit` middleware to your application.
 
-```
+```TypeScript
 import { ApplicationBuilder } from "@brandup/ui-app";
 import { uiKitMiddlewareFactory } from "@brandup/ui-kit";
 
@@ -101,8 +101,40 @@ See [common.less](source/common.less) file.
 ### Input styles
 
 Styles for:
-- reset for input, textarea, button
-- input[type=text]
-- textarea
 
-See [inputs.less](source/inputs.less) file.
+-   reset for input, textarea, button
+-   input[type=text]
+-   input[type=checkbox]
+-   textarea
+-   select
+
+See [inputs.less](source/inputs.less) file.
+
+### Popups
+
+Popups work with class `ui-popup`.
+
+```HTML
+<button data-command="ui-popup-toggle">Menu1</button>
+<div class="ui-popup"></div>
+
+<button id="menu2">Menu2</button>
+<div id="popup2" class="ui-popup"></div>
+
+<button>Menu3</button>
+<div id="popup2" class="ui-popup"></div>
+```
+
+Open popup by popup and initiator element:
+
+```TypeScript
+PopupManager.open(DOM.getById("popup2"), { initiator: DOM.getById("menu2") });
+```
+
+Open popup by only popup element:
+
+```TypeScript
+PopupManager.open(DOM.getById("popup3"));
+```
+
+If the initiator is specified, then when the popup is opened again, it will be closed.

package/package.json

@@ -22,7 +22,7 @@
   },
   "type": "module",
   "license": "Apache-2.0",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "main": "source/index.ts",
   "types": "source/index.ts",
   "dependencies": {

package/source/common.less

@@ -30,7 +30,16 @@
 	--svg-width: var(--svg-size);
 	--svg-height: var(--svg-size);
 	--svg-fill: var(--text-color);
-	--svg-stroke: var(--text-color);
+	--svg-stroke: none;
+
+	// popup
+
+	--popup-fill: var(--main-background);
+	--popup-border-style: solid;
+	--popup-border-width: 1px;
+	--popup-border-color: #aaa;
+	--popup-border-radius: 5px;
+	--popup-box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.12);
 }
 
 // Body styles
@@ -105,4 +114,29 @@ svg {
 	padding-left: var(--content-padding-lr);
 	padding-right: var(--content-padding-lr);
 	box-sizing: border-box;
+}
+
+// Popup styles
+
+.ui-popup {
+	position: absolute;
+	box-sizing: border-box;
+	z-index: 1000;
+	background: var(--popup-fill);
+	border-style: var(--popup-border-style);
+	border-color: var(--popup-border-color);
+	border-width: var(--popup-border-width);
+	border-radius: var(--popup-border-radius);
+	box-shadow: var(--popup-box-shadow);
+	visibility: collapse;
+
+	&.opened {
+		visibility: visible;
+	}
+}
+
+.ui-popup-expanded {
+	& ~ .ui-popup {
+		visibility: visible;
+	}
 }

package/source/index.ts

@@ -1,8 +1,5 @@
-import { Middleware } from "@brandup/ui-app";
+import { UiKitMiddleware } from "./middleware";
+export * from "./popup"
 import "./styles.less";
 
-export const uiKitMiddlewareFactory = (): Middleware => {
-	return {
-		name: "uikit"
-	};
-};
+export const uiKitMiddlewareFactory = () => new UiKitMiddleware();

package/source/inputs.less

@@ -40,22 +40,30 @@
 	--invalid--input-border-color: red;
 	--invalid--input-fill: var(--input-fill);
 	--invalid--input-color: var(--input-color);
+
+	// toggler
+	--toggler-height: 30px;
+	--toggler-padding: 3px;
+	--toggler-round-fill: var(--hover--input-border-color); // цвет круглешка
 }
 
 input,
 textarea,
-button {
-	appearance: none;
+button,
+select {
 	font-family: inherit;
-	font-size: unset;
+	font-size: var(--input-font-size);
+	font-weight: var(--input-font-weidth);
+	font-style: var(--input-font-style);
+	color: var(--input-color);
 	line-height: unset;
-	color: unset;
 	box-sizing: border-box;
 	padding: 0;
 	margin: 0;
 }
 
-input[type=text], textarea {
+input[type=text], textarea, select {
+	appearance: none;
 	outline: none;
 	border-style: var(--input-border-type);
 	border-width: var(--input-border-width);
@@ -67,11 +75,6 @@ input[type=text], textarea {
 	padding-left: var(--input-padding-lr);
 	padding-right: var(--input-padding-lr);
 
-	font-size: var(--input-font-size);
-	font-weight: var(--input-font-weidth);
-	font-style: var(--input-font-style);
-	color: var(--input-color);
-
 	&::placeholder {
 		font-weight: var(--placeholder-font-weidth);
 		font-style: var(--placeholder-font-style);
@@ -101,7 +104,80 @@ input[type=text], textarea {
 	}
 }
 
+select {
+	appearance: auto;
+}
+
 textarea {
 	padding-top: calc(1em / 2);
 	padding-bottom: calc(1em / 2);
+}
+
+input[type=checkbox] {
+	appearance: none;
+	position: relative;
+	cursor: pointer;
+
+	background-color: var(--input-fill);
+	border-style: var(--input-border-type);
+	border-width: var(--input-border-width);
+	border-color: var(--input-border-color);
+	border-radius: calc(var(--toggler-height) / 2);
+
+	height: var(--toggler-height);
+	width: calc(var(--toggler-height) * 2);
+
+	--round-size: calc(var(--toggler-height) - var(--toggler-padding) * 2 - var(--input-border-width) * 2);
+
+	&:after {
+		content: '';
+		position: absolute;
+		background-color: var(--toggler-round-fill);
+		width: var(--round-size);
+		height: var(--round-size);
+		border-radius: 50%;
+		left: var(--toggler-padding);
+		margin-top: auto;
+		margin-bottom: auto;
+		top: 0;
+		bottom: 0;
+	}
+
+	&:hover, &:focus {
+		border-color: var(--hover--input-border-color);
+		background: var(--hover--input-fill);
+		color: var(--hover--input-color);
+	}
+
+	&[readonly] {
+		pointer-events: none;
+	}
+
+	&:checked {
+		background-color: var(--toggler-round-fill);
+
+		&:after {
+			background-color: var(--input-fill);
+			right: var(--toggler-padding);
+			left: auto;
+		}
+	}
+
+	&:disabled {
+		border-color: var(--disabled--input-border-color);
+		background: var(--disabled--input-fill);
+		color: var(--disabled--input-color);
+		cursor: default;
+
+		&:after {
+			background-color: var(--toggler-round-fill);
+			opacity: 0.4;
+		}
+	}
+
+	&:user-invalid {
+		border-color: var(--invalid--input-border-color);
+		background: var(--invalid--input-fill);
+		color: var(--invalid--input-color);
+	}
 }

package/source/middleware.ts

@@ -0,0 +1,23 @@
+import { Middleware, MiddlewareNext, NavigateContext, StartContext } from "@brandup/ui-app";
+import { PopupManager, POPUP_COMMAND, POPUP_CLASS } from "./popup";
+
+export class UiKitMiddleware implements Middleware {
+	name = "uikit";
+
+	start(context: StartContext, next: MiddlewareNext) {
+		context.app.registerCommand(POPUP_COMMAND, context => {
+			if (!context.target.nextElementSibling?.classList.contains(POPUP_CLASS))
+				throw new Error('Not found popup elem.');
+
+			PopupManager.open(context.target.nextElementSibling as HTMLElement, { initiator: context.target });
+		});
+
+		return next();
+	}
+
+	navigate(_context: NavigateContext, next: MiddlewareNext) {
+		PopupManager.close(); // закрываем открытое контекстное меню при навигации
+
+		return next();
+	}
+}

package/source/popup.ts

@@ -0,0 +1,79 @@
+export const POPUP_CLASS = "ui-popup";
+export const POPUP_EXPANDED_CLASS = "ui-popup-expanded";
+export const POPUP_COMMAND = "ui-popup-toggle";
+
+type CurrentPopup = {
+	initiator?: HTMLElement,
+	popup: HTMLElement,
+	closeCallback?: () => void
+};
+
+var current: CurrentPopup | null = null;
+
+const closePopupEventHandler = (e: MouseEvent) => {
+	const target = e.target as HTMLElement;
+	if (target.closest(`.${POPUP_CLASS}`))
+		return; // если клик внутри popup, то делать ничего не нужно
+
+	close();
+
+	const clickedMenuItem = target.closest(`.${POPUP_EXPANDED_CLASS}`);
+	if (clickedMenuItem || target == current?.initiator) {
+		// если клик по тому же элементу, который открыл контекстное меню, то останавливаем обработку клика, чтобы оно не отрылось заново
+
+		e.preventDefault();
+		e.stopImmediatePropagation();
+	}
+};
+
+const close = () => {
+	if (current) {
+		if (current.closeCallback)
+			current.closeCallback();
+
+		current.initiator?.classList.remove(POPUP_EXPANDED_CLASS); // закрываем последнее открытое контекстное меню
+		current.popup.classList.remove("opened");
+	}
+
+	document.body.removeEventListener("click", closePopupEventHandler);
+}
+
+const open = (popupElem: HTMLElement, options?: PopupOptions) => {
+	let newPopup: CurrentPopup = {
+		popup: popupElem,
+		initiator: options?.initiator
+	};
+
+	newPopup.closeCallback = options?.onClose;
+
+	if (newPopup.popup.classList.toggle("opened")) {
+		// это новый popup, открываем его
+
+		newPopup.initiator?.classList.add(POPUP_EXPANDED_CLASS);
+
+		document.body.addEventListener("click", closePopupEventHandler);
+
+		current = newPopup;
+	}
+	else {
+		// данный popup уже открыт, закрываем его
+		close();
+	}
+}
+
+export const PopupManager: IPopupManager = {
+	open,
+	close,
+	isOpened: () => !!current
+};
+
+interface IPopupManager {
+	open: (popupElem: HTMLElement, options?: PopupOptions) => void;
+	close: () => void;
+	isOpened: () => boolean;
+}
+
+interface PopupOptions {
+	initiator?: HTMLElement;
+	onClose?: () => void
+}