@contributte/datagrid 7.0.0 → 7.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contributte/datagrid",
-  "version": "7.0.0",
+  "version": "7.1.0",
   "description": "Assets for contributte/datagrid",
   "repository": {
     "type": "git",
@@ -24,7 +24,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.7.2",
     "bootstrap": "^5.3.6",
-    "naja": "^2.6.1",
+    "naja": "^3.2.1",
     "nette-forms": "^3.5.3",
     "sortablejs": "^1.15.6",
     "tom-select": "^2.4.3",

package/assets/css/datagrid-all.css

@@ -1,6 +0,0 @@
-@import "@fortawesome/fontawesome-free/css/all.css";
-@import 'bootstrap/dist/css/bootstrap.css';
-@import 'vanillajs-datepicker/css/datepicker-bs5.css';
-@import "tom-select/dist/css/tom-select.css";
-@import './happy.css';
-@import './datagrid.css';

package/assets/css/happy.css

@@ -1,463 +0,0 @@
-/**
- * From happy-inputs by paveljanda:
- * https://github.com/paveljanda/happy/blob/94357b7146b5f3029cc565859a588c5832dd374a/src/happy.css
- */
-
-.happy-color,
-.happy-checkbox,
-.happy-radio {
-	color: #333333;
-}
-
-.happy-color>b,
-.happy-checkbox>b,
-.happy-radio>b {
-	background-color: #333333;
-}
-
-.happy-color.active,
-.active.happy-checkbox,
-.active.happy-radio {
-	color: #333333;
-}
-
-.happy-color.active>b,
-.active.happy-checkbox>b,
-.active.happy-radio>b {
-	background-color: #333333;
-}
-
-.happy-color.primary,
-.primary.happy-checkbox,
-.primary.happy-radio {
-	color: #333333;
-}
-
-.happy-color.primary>b,
-.primary.happy-checkbox>b,
-.primary.happy-radio>b {
-	background-color: #333333;
-}
-
-.happy-color.primary.active,
-.primary.active.happy-checkbox,
-.primary.active.happy-radio {
-	color: #4c86bb;
-}
-
-.happy-color.primary.active>b,
-.primary.active.happy-checkbox>b,
-.primary.active.happy-radio>b {
-	background-color: #4c86bb;
-}
-
-.happy-color.success,
-.success.happy-checkbox,
-.success.happy-radio {
-	color: #333333;
-}
-
-.happy-color.success>b,
-.success.happy-checkbox>b,
-.success.happy-radio>b {
-	background-color: #333333;
-}
-
-.happy-color.success.active,
-.success.active.happy-checkbox,
-.success.active.happy-radio {
-	color: #72b889;
-}
-
-.happy-color.success.active>b,
-.success.active.happy-checkbox>b,
-.success.active.happy-radio>b {
-	background-color: #72b889;
-}
-
-.happy-color.info,
-.info.happy-checkbox,
-.info.happy-radio {
-	color: #333333;
-}
-
-.happy-color.info>b,
-.info.happy-checkbox>b,
-.info.happy-radio>b {
-	background-color: #333333;
-}
-
-.happy-color.info.active,
-.info.active.happy-checkbox,
-.info.active.happy-radio {
-	color: #5bc0de;
-}
-
-.happy-color.info.active>b,
-.info.active.happy-checkbox>b,
-.info.active.happy-radio>b {
-	background-color: #5bc0de;
-}
-
-.happy-color.warning,
-.warning.happy-checkbox,
-.warning.happy-radio {
-	color: #333333;
-}
-
-.happy-color.warning>b,
-.warning.happy-checkbox>b,
-.warning.happy-radio>b {
-	background-color: #333333;
-}
-
-.happy-color.warning.active,
-.warning.active.happy-checkbox,
-.warning.active.happy-radio {
-	color: #f0bb65;
-}
-
-.happy-color.warning.active>b,
-.warning.active.happy-checkbox>b,
-.warning.active.happy-radio>b {
-	background-color: #f0bb65;
-}
-
-.happy-color.danger,
-.danger.happy-checkbox,
-.danger.happy-radio {
-	color: #333333;
-}
-
-.happy-color.danger>b,
-.danger.happy-checkbox>b,
-.danger.happy-radio>b {
-	background-color: #333333;
-}
-
-.happy-color.danger.active,
-.danger.active.happy-checkbox,
-.danger.active.happy-radio {
-	color: #ed6b6b;
-}
-
-.happy-color.danger.active>b,
-.danger.active.happy-checkbox>b,
-.danger.active.happy-radio>b {
-	background-color: #ed6b6b;
-}
-
-.happy-color.white,
-.white.happy-checkbox,
-.white.happy-radio {
-	color: #333333;
-}
-
-.happy-color.white>b,
-.white.happy-checkbox>b,
-.white.happy-radio>b {
-	background-color: #333333;
-}
-
-.happy-color.white.active,
-.white.active.happy-checkbox,
-.white.active.happy-radio {
-	color: #ffffff;
-}
-
-.happy-color.white.active>b,
-.white.active.happy-checkbox>b,
-.white.active.happy-radio>b {
-	background-color: #ffffff;
-}
-
-.happy-border-color,
-.happy-radio {
-	border-color: rgba(51, 51, 51, 0.8);
-}
-
-.happy-border-color.active,
-.active.happy-radio {
-	border-color: #333333;
-}
-
-.happy-border-color.primary,
-.primary.happy-radio {
-	border-color: rgba(51, 51, 51, 0.8);
-}
-
-.happy-border-color.primary.active,
-.primary.active.happy-radio {
-	border-color: #4c86bb;
-}
-
-.happy-border-color.success,
-.success.happy-radio {
-	border-color: rgba(51, 51, 51, 0.8);
-}
-
-.happy-border-color.success.active,
-.success.active.happy-radio {
-	border-color: #72b889;
-}
-
-.happy-border-color.info,
-.info.happy-radio {
-	border-color: rgba(51, 51, 51, 0.8);
-}
-
-.happy-border-color.info.active,
-.info.active.happy-radio {
-	border-color: #5bc0de;
-}
-
-.happy-border-color.warning,
-.warning.happy-radio {
-	border-color: rgba(51, 51, 51, 0.8);
-}
-
-.happy-border-color.warning.active,
-.warning.active.happy-radio {
-	border-color: #f0bb65;
-}
-
-.happy-border-color.danger,
-.danger.happy-radio {
-	border-color: rgba(51, 51, 51, 0.8);
-}
-
-.happy-border-color.danger.active,
-.danger.active.happy-radio {
-	border-color: #ed6b6b;
-}
-
-.happy-border-color.white,
-.white.happy-radio {
-	border-color: rgba(51, 51, 51, 0.8);
-}
-
-.happy-border-color.white.active,
-.white.active.happy-radio {
-	border-color: #ffffff;
-}
-
-/**
- * Common
- */
-
-input[type="radio"].happy,
-input[type="checkbox"].happy {
-	position: absolute;
-	top: -50%;
-	left: -50%;
-	opacity: 0;
-}
-
-label:not(.selectable),
-.noselect {
-	-webkit-touch-callout: none;
-	-webkit-user-select: none;
-	-khtml-user-select: none;
-	-moz-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-}
-
-label {
-	cursor: pointer;
-	position: relative;
-}
-
-/**
- * Checkbox
- */
-
-.happy-checkbox {
-	border-color: #333333;
-	margin-right: 0.2em;
-	position: relative;
-	display: inline-block;
-	line-height: 20px;
-	vertical-align: middle;
-	width: 16px;
-	height: 16px;
-	border-width: 2px;
-	border-style: solid;
-	cursor: pointer;
-	box-sizing: border-box;
-	top: -2px;
-	-webkit-border-radius: 2.66667px;
-	-moz-border-radius: 2.66667px;
-	border-radius: 2.66667px;
-}
-
-.happy-checkbox svg {
-	position: absolute;
-	display: block;
-	top: -2px;
-	left: -2px;
-	height: 16px;
-	width: 16px;
-	opacity: 0;
-	-webkit-border-radius: 2.66667px;
-	-moz-border-radius: 2.66667px;
-	border-radius: 2.66667px;
-	background-color: #333333;
-	-ms-transform: scale(0.4);
-	-webkit-transform: scale(0.4);
-	transform: scale(0.4);
-	-ms-transition: all 180ms;
-	-webkit-transition: all 180ms;
-	transition: all 180ms;
-}
-
-.happy-checkbox svg rect {
-	fill: white;
-}
-
-.happy-checkbox svg rect:first-child {
-	-ms-transform: rotate(45deg);
-	-webkit-transform: rotate(45deg);
-	transform: rotate(45deg);
-}
-
-.happy-checkbox svg rect:nth-child(2) {
-	-ms-transform: rotate(-45deg);
-	-webkit-transform: rotate(-45deg);
-	transform: rotate(-45deg);
-	/* fill: yellow; */
-}
-
-.happy-checkbox.thin {
-	border-width: 1px;
-}
-
-.happy-checkbox.thin svg {
-	top: -1px;
-	left: -1px;
-}
-
-.happy-checkbox.white {
-	border-color: #ffffff;
-}
-
-.happy-checkbox.gray-border {
-	border-color: #858585;
-}
-
-.happy-checkbox.primary-border {
-	border-color: #4c86bb;
-}
-
-.happy-checkbox.success-border {
-	border-color: #72b889;
-}
-
-.happy-checkbox.info-border {
-	border-color: #5bc0de;
-}
-
-.happy-checkbox.warning-border {
-	border-color: #f0bb65;
-}
-
-.happy-checkbox.danger-border {
-	border-color: #ed6b6b;
-}
-
-.happy-checkbox.primary svg {
-	background-color: #4c86bb;
-}
-
-.happy-checkbox.success svg {
-	background-color: #72b889;
-}
-
-.happy-checkbox.info svg {
-	background-color: #5bc0de;
-}
-
-.happy-checkbox.warning svg {
-	background-color: #f0bb65;
-}
-
-.happy-checkbox.danger svg {
-	background-color: #ed6b6b;
-}
-
-.happy-checkbox.white svg {
-	background-color: #ffffff;
-}
-
-.happy-checkbox.white svg rect {
-	fill: #333333;
-}
-
-.happy-checkbox.active {
-	border-color: transparent;
-}
-
-.happy-checkbox.active svg {
-	opacity: 1;
-	-ms-transform: scale(1);
-	-webkit-transform: scale(1);
-	transform: scale(1);
-}
-
-/**
- * Radio
- */
-
-.happy-radio {
-	position: relative;
-	display: inline-block;
-	line-height: 20px;
-	vertical-align: middle;
-	width: 16px;
-	height: 16px;
-	border-width: 2px;
-	border-style: solid;
-	cursor: pointer;
-	box-sizing: border-box;
-	top: -2px;
-	-webkit-border-radius: 16px;
-	-moz-border-radius: 16px;
-	border-radius: 16px;
-}
-
-.happy-radio.thin {
-	border-width: 1.66667px;
-}
-
-.happy-radio b {
-	position: absolute;
-	display: block;
-	top: 2px;
-	left: 2px;
-	bottom: 2px;
-	right: 2px;
-	opacity: 0;
-	-webkit-border-radius: 10.66667px;
-	-moz-border-radius: 10.66667px;
-	border-radius: 10.66667px;
-	-ms-transform: scale(0.4);
-	-webkit-transform: scale(0.4);
-	transform: scale(0.4);
-	-ms-transition: all 180ms;
-	-webkit-transition: all 180ms;
-	transition: all 180ms;
-}
-
-.happy-radio.active b {
-	opacity: 1;
-	-ms-transform: scale(1);
-	-webkit-transform: scale(1);
-	transform: scale(1);
-}
-
-.happy-radio.focus {
-	outline: none;
-	-webkit-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
-	-moz-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
-	box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
-}

package/assets/datagrid-all.ts

@@ -1 +0,0 @@
-export * from "./datagrid-full";

package/assets/integrations/happy.ts

@@ -1,217 +0,0 @@
-/**
- * Slightly cleaned up & typed version of happy-inputs by paveljanda.
- */
-export class Happy {
-	private colors: string[] = ["primary", "success", "info", "warning", "danger", "white", "gray"];
-
-	private templates = {
-		radio: '<div class="happy-radio"><b></b></div>',
-		checkbox:
-			'<div class="happy-checkbox"><svg viewBox="0 0 30 30"><rect class="mark-storke" x="15" y="3" rx="1" ry="1" width="10" height="4"/><rect class="mark-storke" x="-7" y="21" rx="1" ry="1" width="19" height="4"/></svg></div>',
-		text: "",
-		textarea: "",
-	};
-
-	init() {
-		this.removeBySelector(".happy-radio");
-		this.removeBySelector(".happy-checkbox");
-
-		this.initRadio();
-		this.initCheckbox();
-	}
-
-	/**
-	 * @deprecated
-	 */
-	reset() {
-		this.init();
-	}
-
-	addColorToInput(input: HTMLElement, happyInput: HTMLElement, classString: string) {
-		if (input.classList.contains(classString)) {
-			happyInput.classList.add(classString);
-		}
-
-		classString = `${classString}-border`;
-
-		if (input.classList.contains(classString)) {
-			happyInput.classList.add(classString);
-		}
-	}
-
-	// i... you know what, no, let "thinkess" be "thinkess"
-	addThinkessToInput(input: HTMLElement, happyInput: HTMLElement) {
-		if (input.classList.contains("thin")) {
-			happyInput.classList.add("thin");
-		}
-	}
-
-	setNames(input: HTMLElement, happyInput: HTMLElement) {
-		happyInput.setAttribute("data-name", input.getAttribute("name") ?? "");
-
-		var value = input.getAttribute("value");
-
-		if (value !== "undefined" && value !== null) {
-			happyInput.setAttribute("data-value", input.getAttribute("value") ?? "");
-		}
-	}
-
-	removeBySelector(selector: string) {
-		document.querySelectorAll(selector).forEach(el => el.parentNode?.removeChild(el));
-	}
-
-	initRadio() {
-		document.querySelectorAll<HTMLInputElement>("input[type=radio].happy").forEach(input => {
-			/**
-			 * Paste happy component into html
-			 */
-			input.insertAdjacentHTML("afterend", this.templates.radio);
-
-			const happyInput = input.nextElementSibling;
-
-			if (happyInput instanceof HTMLElement) {
-				/**
-				 * Add optional colors
-				 */
-				this.colors.forEach(color => {
-					this.addColorToInput(input, happyInput, color);
-					this.setNames(input, happyInput);
-				});
-
-				this.addThinkessToInput(input, happyInput);
-			}
-
-			/**
-			 * Init state
-			 */
-			this.checkRadioState(input);
-
-			/**
-			 * Set aciton functionality for native change
-			 */
-			document.addEventListener("change", this.radioOnChange.bind(this));
-		});
-	}
-
-	initCheckbox() {
-		document.querySelectorAll<HTMLInputElement>("input[type=checkbox].happy").forEach(input => {
-			/**
-			 * Paste happy component into html
-			 */
-			input.insertAdjacentHTML("afterend", this.templates.checkbox);
-
-			const happyInput = input.nextElementSibling;
-
-			/**
-			 * Add optional colors
-			 */
-			if (happyInput instanceof HTMLElement) {
-				this.colors.forEach(color => {
-					this.addColorToInput(input, happyInput, color);
-					this.setNames(input, happyInput);
-				});
-
-				this.addThinkessToInput(input, happyInput);
-			}
-
-			/**
-			 * Init state
-			 */
-			this.checkCheckboxState(input);
-
-			/**
-			 * Set action functionality for click || native change
-			 */
-			document.addEventListener("click", this.checkCheckboxStateOnClick.bind(this));
-			document.addEventListener("change", this.checkCheckboxStateOnChange.bind(this));
-		});
-	}
-
-	checkCheckboxStateOnClick(event: Event) {
-		const target = event.target;
-
-		// When target is SVGSVGElement (<svg>), return parentNode,
-		// When target is a SVGGraphicsElement (<rect>,...), find <svg> and return it's parent node
-		// otherwise return target itself.
-		const happyInput =
-			target instanceof SVGSVGElement
-				? target.parentNode
-				: target instanceof SVGGraphicsElement
-					? target.closest("svg")?.parentNode
-					: target;
-
-		if (!(happyInput instanceof HTMLElement) || !happyInput.classList.contains("happy-checkbox")) {
-			return;
-		}
-
-		event.preventDefault();
-
-		const name = happyInput.getAttribute("data-name");
-		const value = happyInput.getAttribute("data-value");
-
-		const input = document.querySelector(
-			`.happy-checkbox[data-name="${name}"]` + (!!value ? `[value="${value}"]` : "")
-		);
-		if (!(input instanceof HTMLInputElement)) return;
-
-		const checked = happyInput.classList.contains("active");
-
-		input.checked = !checked;
-		checked ? happyInput.classList.remove("active") : happyInput.classList.add("active");
-	}
-
-	checkCheckboxStateOnChange({target}: Event) {
-		if (!(target instanceof HTMLInputElement)) return;
-
-		if (target.classList.contains("happy")) {
-			this.checkCheckboxState(target);
-		}
-	}
-
-	checkRadioState(input: HTMLInputElement) {
-		if (!input.checked || !input.hasAttribute("name")) return;
-
-		const name = input.getAttribute("name");
-		const value = input.getAttribute("value");
-
-		const element = document.querySelector(
-			`.happy-checkbox[data-name="${name}"]` + (!!value ? `[data-value="${value}"]` : "")
-		);
-
-		if (element) {
-			element.classList.add("active");
-		}
-	}
-
-	checkCheckboxState(input: HTMLInputElement) {
-		const name = input.getAttribute("name");
-		if (!name) return;
-
-		const value = input.getAttribute("value");
-		const element = document.querySelector(
-			`.happy-checkbox[data-name="${name}"]` + (!!value ? `[data-value="${value}"]` : "")
-		);
-
-		if (!element) return;
-
-		input.checked ? element.classList.add("active") : element.classList.remove("active");
-	}
-
-	radioOnChange({target}: Event) {
-		// Check whether target is <input>, is a happy input (.happy) & has the name attribute
-		if (
-			!(target instanceof HTMLInputElement) ||
-			!target.classList.contains("happy") ||
-			!target.hasAttribute("name")
-		)
-			return;
-
-		const name = target.getAttribute("name")!;
-
-		document
-			.querySelectorAll(`.happy-radio[data-name="${name}"]`)
-			.forEach(happyRadio => happyRadio.classList.remove("active"));
-
-		this.checkRadioState(target);
-	}
-}

package/assets/plugins/integrations/happy.ts

@@ -1,19 +0,0 @@
-import { Datagrid } from "../..";
-import { DatagridPlugin } from "../../types";
-import { window } from "../../utils";
-import type { Happy } from "../../integrations";
-
-export class HappyPlugin implements DatagridPlugin {
-	constructor(private happy?: Happy) {
-	}
-
-	onDatagridInit(datagrid: Datagrid): boolean {
-		const happy = this.happy ?? window().happy ?? null;
-
-		if (happy) {
-			happy.init();
-		}
-
-		return true;
-	}
-}