Skip to content
Snippets Groups Projects
Verified Commit 3124925c authored by Volker Schukai's avatar Volker Schukai :alien:
Browse files

fix: update some issues and documentaion #260

parent b5471c12
No related branches found
No related tags found
No related merge requests found
Expand all Show whitespace changes
Inline Side-by-side
Showing
with 915 additions and 816 deletions
development/issues/open/260.html 0 → 100644
+ 73
− 0
View file @ 3124925c
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>colum layout for datatable command buttons #260</title>
<script src="./260.mjs" type="module"></script>
</head>
<body>
<h1>colum layout for datatable command buttons #260</h1>
<p></p>
<ul>
<li><a href="https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/260">Issue #260</a></li>
<li><a href="/">Back to overview</a></li>
</ul>
<main>
<monster-datasource-dom id="myDataSourceID">
<script type="application/json">
{
"dataset": [
{
"id": 1,
"name": "John Doe",
"street": "Main Street 1",
"city": "Berlin",
"zipcode": "10115",
"country": "Germany",
"phone": "+49 30 123456",
"email": "john.doe@example.com"
},
{
"id": 2,
"name": "Jane Doe",
"street": "Second Avenue 2",
"city": "Munich",
"zipcode": "80331",
"country": "Germany",
"phone": "+49 89 654321",
"email": "jane.doe@example.com"
},
{
"id": 3,
"name": "Max Mustermann",
"street": "Example Road 3",
"city": "Hamburg",
"zipcode": "20095",
"country": "Germany",
"phone": "+49 40 987654",
"email": "max.mustermann@example.com"
}
]
}
</script>
</monster-datasource-dom>
<monster-datatable data-monster-datasource-selector="#myDataSourceID">
<template id="row">
<div data-monster-grid-template="1.2rem" data-monster-head="id" data-monster-replace="path:row.id"></div>
<div data-monster-grid-template="auto" data-monster-head="name" data-monster-replace="path:row.name"></div>
<div data-monster-grid-template="3fr" data-monster-head="street" data-monster-replace="path:row.street"></div>
<div data-monster-head="city" data-monster-replace="path:row.city"></div>
<div data-monster-head="zipcode" data-monster-replace="path:row.zipcode"></div>
<div data-monster-head="country" data-monster-replace="path:row.country"></div>
<div data-monster-head="phone" data-monster-replace="path:row.phone"></div>
<div data-monster-head="email" data-monster-replace="path:row.email"></div>
</template>
</monster-datatable>
</main>
</body>
</html>
development/issues/open/260.mjs 0 → 100644
+ 60
− 0
View file @ 3124925c
/**
* @file development/issues/open/260.mjs
* @url https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/260
* @description colum layout for datatable command buttons
* @issue 260
*/
import "../../../source/components/style/property.pcss";
import "../../../source/components/style/link.pcss";
import "../../../source/components/style/color.pcss";
import "../../../source/components/style/theme.pcss";
import "../../../source/components/style/normalize.pcss";
import "../../../source/components/style/typography.pcss";
import "../../../source/components/datatable/datatable.mjs";
import { domReady } from "../../../source/dom/ready.mjs";
//
// domReady.then(() => {
// const datatable = document.querySelector("monster-datatable");
// datatable.setOption('data', [
// {
// "id": "1",
// "name": "John Doe"
// },
// {
// "id": "2",
// "name": "Jane Doe"
// },
// {
// "id": "3",
// "name": "John Smith"
// },
// {
// "id": "4",
// "name": "Jane Smith"
// }
// ]);
//
// setTimeout(() => {
// datatable.setOption('data', [
// {
// "id": "1",
// "name": "John Doe2 "
// },
// {
// "id": "2",
// "name": "Jane Doe 2"
// },
// {
// "id": "3",
// "name": "John Smith3"
// },
// {
// "id": "4",
// "name": "Jane Smit4h"
// }
// ]);
// },2000)
//
// });
\ No newline at end of file
source/components/datatable/columnbar.mjs
+ 15
− 36
View file @ 3124925c
...@@ -55,43 +55,17 @@ const dotsContainerElementSymbol = Symbol("dotsContainerElement"); ...@@ -55,43 +55,17 @@ const dotsContainerElementSymbol = Symbol("dotsContainerElement");
*/ */
const popperInstanceSymbol = Symbol("popperInstance"); const popperInstanceSymbol = Symbol("popperInstance");
/** /**
* The ColumnBar component is used to show and configure the columns of a datatable. * A column bar for a datatable
*
* <img src="./images/column-bar.png">
*
* You can create this control either by specifying the HTML tag <monster-column-bar />` directly in the HTML or using
* Javascript via the `document.createElement('monster-column-bar');` method.
*
* ```html
* <monster-column-bar></monster-column-bar>
* ```
*
* Or you can create this CustomControl directly in Javascript:
*
* ```js
* import '@schukai/monster/components/datatable/column-bar.mjs';
* document.createElement('monster-column-bar');
* ```
*
* The Body should have a class "hidden" to ensure that the styles are applied correctly.
* *
* ```css * @fragments /fragments/components/datatable/datatable/
* body.hidden {
* visibility: hidden;
* }
* ```
* *
* @startuml column-bar.png * @example /examples/components/datatable/empty
* skinparam monochrome true
* skinparam shadowing false
* HTMLElement <|-- CustomElement
* CustomElement <|-- ColumnBar
* @enduml
* *
* @copyright schukai GmbH * @copyright schukai GmbH
* @summary A data set * @summary The ColumnBar component is used to show and configure the columns of a datatable.
*/ **/
class ColumnBar extends CustomElement { class ColumnBar extends CustomElement {
/** /**
* This method is called by the `instanceof` operator. * This method is called by the `instanceof` operator.
...@@ -137,7 +111,7 @@ class ColumnBar extends CustomElement { ...@@ -137,7 +111,7 @@ class ColumnBar extends CustomElement {
/** /**
* *
* @return {Monster.Components.Form.Form} * @return {void}
*/ */
[assembleMethodSymbol]() { [assembleMethodSymbol]() {
super[assembleMethodSymbol](); super[assembleMethodSymbol]();
...@@ -147,7 +121,7 @@ class ColumnBar extends CustomElement { ...@@ -147,7 +121,7 @@ class ColumnBar extends CustomElement {
} }
/** /**
* @return {Array<ColumnBarStyleSheet>} * @return {CSSStyleSheet[]}
*/ */
static getCSSStyleSheet() { static getCSSStyleSheet() {
return [ColumnBarStyleSheet]; return [ColumnBarStyleSheet];
...@@ -156,7 +130,7 @@ class ColumnBar extends CustomElement { ...@@ -156,7 +130,7 @@ class ColumnBar extends CustomElement {
/** /**
* @private * @private
* @return {Monster.Components.Datatable.Form} * @return {ColumnBar}
*/ */
function initControlReferences() { function initControlReferences() {
if (!this.shadowRoot) { if (!this.shadowRoot) {
...@@ -166,12 +140,15 @@ function initControlReferences() { ...@@ -166,12 +140,15 @@ function initControlReferences() {
this[settingsButtonElementSymbol] = this.shadowRoot.querySelector( this[settingsButtonElementSymbol] = this.shadowRoot.querySelector(
"[data-monster-role=settings-button]", "[data-monster-role=settings-button]",
); );
this[settingsLayerElementSymbol] = this.shadowRoot.querySelector( this[settingsLayerElementSymbol] = this.shadowRoot.querySelector(
"[data-monster-role=settings-layer]", "[data-monster-role=settings-layer]",
); );
this[dotsContainerElementSymbol] = this.shadowRoot.querySelector( this[dotsContainerElementSymbol] = this.shadowRoot.querySelector(
"[data-monster-role=dots]", "[data-monster-role=dots]",
); );
return this; return this;
} }
...@@ -199,6 +176,7 @@ function initEventHandler() { ...@@ -199,6 +176,7 @@ function initEventHandler() {
); );
self[dotsContainerElementSymbol].addEventListener("click", function (event) { self[dotsContainerElementSymbol].addEventListener("click", function (event) {
const element = findTargetElementFromEvent( const element = findTargetElementFromEvent(
event, event,
"data-monster-role", "data-monster-role",
...@@ -220,6 +198,7 @@ function initEventHandler() { ...@@ -220,6 +198,7 @@ function initEventHandler() {
}); });
self[settingsButtonEventHandlerSymbol] = (event) => { self[settingsButtonEventHandlerSymbol] = (event) => {
const clickTarget = event.composedPath()?.[0]; const clickTarget = event.composedPath()?.[0];
if ( if (
self[settingsLayerElementSymbol] === clickTarget || self[settingsLayerElementSymbol] === clickTarget ||
...@@ -227,7 +206,7 @@ function initEventHandler() { ...@@ -227,7 +206,7 @@ function initEventHandler() {
) { ) {
return; return;
} }
self[settingsLayerElementSymbol].classList.remove("visible");
document.body.removeEventListener( document.body.removeEventListener(
"click", "click",
self[settingsButtonEventHandlerSymbol], self[settingsButtonEventHandlerSymbol],
......
source/components/datatable/datasource/dom.mjs
+ 1
− 0
View file @ 3124925c
...@@ -143,6 +143,7 @@ function initEventHandler() { ...@@ -143,6 +143,7 @@ function initEventHandler() {
function updateDataSource() { function updateDataSource() {
let data = null; let data = null;
getSlottedElements.call(this).forEach((element) => { getSlottedElements.call(this).forEach((element) => {
if (!(element instanceof HTMLScriptElement)) { if (!(element instanceof HTMLScriptElement)) {
return; return;
} }
......
source/components/datatable/datatable.mjs
+ 757
− 765
View file @ 3124925c
...@@ -103,45 +103,28 @@ const columnBarElementSymbol = Symbol("columnBarElement"); ...@@ -103,45 +103,28 @@ const columnBarElementSymbol = Symbol("columnBarElement");
/** /**
* The DataTable component is used to show the data from a data source. * The DataTable component is used to show the data from a data source.
* *
* <img src="./images/datatable.png"> * @copyright schukai GmbH
* * @summary A data table
* Dependencies: the system uses functions of the [monsterjs](https://monsterjs.org/) library
* */
* You can create this control either by specifying the HTML tag <monster-datatable />` directly in the HTML or using
* Javascript via the `document.createElement('monster-datatable');` method. /**
* * A DataTable
* ```html
* <monster-datatable></monster-datatable>
* ```
*
* Or you can create this CustomControl directly in Javascript:
*
* ```js
* import '@schukai/component-datatable/source/datatable.mjs';
* document.createElement('monster-datatable');
* ```
*
* The Body should have a class "hidden" to ensure that the styles are applied correctly.
* *
* ```css * @fragments /fragments/components/datatable/datatable/
* body.hidden {
* visibility: hidden;
* }
* ```
* *
* @startuml datatable.png * @example /examples/components/datatable/empty
* skinparam monochrome true * @example /examples/components/datatable/data-using-javascript
* skinparam shadowing false * @example /examples/components/datatable/alignment
* HTMLElement <|-- CustomElement * @example /examples/components/datatable/row-mode
* CustomElement <|-- DataTable * @example /examples/components/datatable/grid-template
* @enduml
* *
* @copyright schukai GmbH * @copyright schukai GmbH
* @summary A data table * @summary A beautiful and highly customizable data table. It can be used to display data from a data source.
* @fires monster-datatable-row-copied * @fires monster-datatable-row-copied
* @fires monster-datatable-row-removed * @fires monster-datatable-row-removed
* @fires monster-datatable-row-added * @fires monster-datatable-row-added
*/ **/
class DataTable extends CustomElement { class DataTable extends CustomElement {
/** /**
* This method is called by the `instanceof` operator. * This method is called by the `instanceof` operator.
...@@ -247,8 +230,7 @@ class DataTable extends CustomElement { ...@@ -247,8 +230,7 @@ class DataTable extends CustomElement {
} }
/** /**
* * @return void
* @return {Monster.Components.Form.Form}
*/ */
[assembleMethodSymbol]() { [assembleMethodSymbol]() {
const rawKey = this.getOption("templateMapping.row-key"); const rawKey = this.getOption("templateMapping.row-key");
...@@ -346,7 +328,6 @@ class DataTable extends CustomElement { ...@@ -346,7 +328,6 @@ class DataTable extends CustomElement {
} }
/** /**
*
* @return {CSSStyleSheet[]} * @return {CSSStyleSheet[]}
*/ */
static getCSSStyleSheet() { static getCSSStyleSheet() {
...@@ -355,9 +336,10 @@ class DataTable extends CustomElement { ...@@ -355,9 +336,10 @@ class DataTable extends CustomElement {
/** /**
* Copy a row from the datatable * Copy a row from the datatable
* @param {number} fromIndex *
* @param {number} toIndex * @param {number|string} fromIndex
* @return {Monster.Components.Datatable.DataTable} * @param {number|string} toIndex
* @return {DataTable}
* @fires monster-datatable-row-copied * @fires monster-datatable-row-copied
*/ */
copyRow(fromIndex, toIndex) { copyRow(fromIndex, toIndex) {
...@@ -383,8 +365,12 @@ class DataTable extends CustomElement { ...@@ -383,8 +365,12 @@ class DataTable extends CustomElement {
toIndex = rows.length; toIndex = rows.length;
} }
if (isString(fromIndex)) {
fromIndex = parseInt(fromIndex); fromIndex = parseInt(fromIndex);
}
if (isString(toIndex)) {
toIndex = parseInt(toIndex); toIndex = parseInt(toIndex);
}
if (toIndex < 0 || toIndex > rows.length) { if (toIndex < 0 || toIndex > rows.length) {
throw new RangeError("index out of bounds"); throw new RangeError("index out of bounds");
...@@ -410,8 +396,9 @@ class DataTable extends CustomElement { ...@@ -410,8 +396,9 @@ class DataTable extends CustomElement {
/** /**
* Remove a row from the datatable * Remove a row from the datatable
* @param index *
* @return {Monster.Components.Datatable.DataTable} * @param {number|string} index
* @return {DataTable}
* @fires monster-datatable-row-removed * @fires monster-datatable-row-removed
*/ */
removeRow(index) { removeRow(index) {
...@@ -433,10 +420,13 @@ class DataTable extends CustomElement { ...@@ -433,10 +420,13 @@ class DataTable extends CustomElement {
rows = []; rows = [];
} }
if (isString(index)) {
index = parseInt(index); index = parseInt(index);
}
validateArray(rows); validateArray(rows);
validateInteger(index); validateInteger(index);
if (index < 0 || index >= rows.length) { if (index < 0 || index >= rows.length) {
throw new RangeError("index out of bounds"); throw new RangeError("index out of bounds");
} }
...@@ -456,8 +446,10 @@ class DataTable extends CustomElement { ...@@ -456,8 +446,10 @@ class DataTable extends CustomElement {
/** /**
* Add a row to the datatable * Add a row to the datatable
*
* @param {Object} data * @param {Object} data
* @return {Monster.Components.Datatable.DataTable} * @return {DataTable}
*
* @fires monster-datatable-row-added * @fires monster-datatable-row-added
**/ **/
addRow(data) { addRow(data) {
......
source/components/datatable/stylesheet/datatable.mjs
+ 7
− 14
View file @ 3124925c
This diff is collapsed.
source/components/datatable/util.mjs
+ 1
− 0
View file @ 3124925c
...@@ -29,6 +29,7 @@ const datasourceLinkedElementSymbol = Symbol("datasourceLinkedElement"); ...@@ -29,6 +29,7 @@ const datasourceLinkedElementSymbol = Symbol("datasourceLinkedElement");
* @private * @private
*/ */
function handleDataSourceChanges() { function handleDataSourceChanges() {
if (!this[datasourceLinkedElementSymbol]) { if (!this[datasourceLinkedElementSymbol]) {
return; return;
} }
......
source/dom/ready.mjs
+ 1
− 1
View file @ 3124925c
...@@ -45,7 +45,7 @@ const domReady = new Promise((resolve) => { ...@@ -45,7 +45,7 @@ const domReady = new Promise((resolve) => {
}); });
/** /**
* This variable is a promise that is fulfilled as soon as the windows is available. * This variable is a promise is fulfilled as soon as the windows is available.
* *
* The load event fires when the entire page is loaded, including all dependent resources such as stylesheets, * The load event fires when the entire page is loaded, including all dependent resources such as stylesheets,
* assets, and images. Unlike DOMContentLoaded, which fires as soon as the DOM of the page is loaded, * assets, and images. Unlike DOMContentLoaded, which fires as soon as the DOM of the page is loaded,
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment