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

feat: integrate components, test, example and code #127

parent d24fe162
No related branches found
No related tags found
No related merge requests found
Expand all Show whitespace changes
Inline Side-by-side
Showing
with 17327 additions and 0 deletions
playground/card/bg.jpg 0 → 100644
+ 0
− 0
View file @ 7aa2e062
Image diff could not be displayed: it is too large. Options to address this: view the blob.
playground/card/index.html 0 → 100644
+ 56
− 0
View file @ 7aa2e062
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">
<title>Typography</title>
<script src="./main.js" type="module"></script>
</head>
<body style="display:flex;justify-content: center">
<main style="width: 1200px">
<h1 class="deco">Cards</h1>
<p>Cards are a great way to display content composed of different elements. They’re also
well-suited for presenting similar objects whose size or supported actions can vary
considerably, like photos with captions of variable length.</p>
<div class="cards">
<div class="card">
<img src="./bg.jpg" alt="">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<button>button</button>
</div>
<div class="card">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<button>button</button>
</div>
<div class="card">
<button>button</button>
<img src="./bg.jpg" alt="">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<button>button</button>
</div>
<div class="card">
<h1>Lorem ipsum </h1>
<button>button</button>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua.</p>
<button>button</button>
</div>
</div>
</main>
</body>
</html>
\ No newline at end of file
playground/card/main.js 0 → 100644
+ 39
− 0
View file @ 7aa2e062
import "@schukai/component-style/source/style/property.pcss";
import "@schukai/component-style/source/style/normalize.pcss";
import "@schukai/component-style/source/style/color.pcss";
import "@schukai/component-style/source/style/typography.pcss";
import "@schukai/component-style/source/style/theme.pcss";
import "@schukai/component-style/source/style/button.pcss";
import "@schukai/component-style/source/style/ripple.pcss";
import "./main.pcss";
import "@schukai/component-style/source/style/space.pcss";
import "@schukai/component-style/source/style/card.pcss";
function createRipple(event) {
const button = event.currentTarget;
const circle = document.createElement("span");
const diameter = Math.max(button.clientWidth, button.clientHeight);
const radius = diameter / 2;
circle.style.width = circle.style.height = `${diameter}px`;
circle.style.left = `${event.clientX - button.offsetLeft - radius}px`;
circle.style.top = `${event.clientY - button.offsetTop - radius}px`;
circle.classList.add("monster-fx-ripple");
const ripples = button.getElementsByClassName("monster-fx-ripple");
for (const ripple of ripples) {
ripple.remove();
}
button.appendChild(circle);
}
const buttons = document.getElementsByTagName("button");
for (const button of buttons) {
button.addEventListener("click", createRipple);
}
playground/card/main.pcss 0 → 100644
+ 4
− 0
View file @ 7aa2e062
@import "@schukai/component-style/source/style/mixin/property.pcss";
playground/color/index.html 0 → 100644
+ 109
− 0
View file @ 7aa2e062
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">
<title>Color</title>
<script src="./main.js" type="module"></script>
</head>
<body style="display:flex;justify-content: center">
<main style="width: 600px">
<h1>Color</h1>
<div class="container">
<div class="item monster-theme-primary-1"> primary-1</div>
<div class="item monster-theme-primary-2"> primary-2</div>
<div class="item monster-theme-primary-3"> primary-3</div>
<div class="item monster-theme-primary-4"> primary-4</div>
<div class="item monster-theme-primary-disabled-1"> primary-disabled-1</div>
<div class="item monster-theme-primary-disabled-2"> primary-disabled-2</div>
<div class="item monster-theme-primary-disabled-3"> primary-disabled-3</div>
<div class="item monster-theme-primary-disabled-4"> primary-disabled-4</div>
<div class="item monster-theme-secondary-1"> secondary-1</div>
<div class="item monster-theme-secondary-2"> secondary-2</div>
<div class="item monster-theme-secondary-3"> secondary-3</div>
<div class="item monster-theme-secondary-4"> secondary-4</div>
<div class="item monster-theme-tertiary-1"> tertiary-1</div>
<div class="item monster-theme-tertiary-2"> tertiary-2</div>
<div class="item monster-theme-tertiary-3"> tertiary-3</div>
<div class="item monster-theme-tertiary-4"> tertiary-4</div>
<div class="item monster-theme-destructive-1"> destructive-1</div>
<div class="item monster-theme-destructive-2"> destructive-2</div>
<div class="item monster-theme-destructive-3"> destructive-3</div>
<div class="item monster-theme-destructive-4"> destructive-4</div>
<div class="item monster-theme-success-1"> success-1</div>
<div class="item monster-theme-success-2"> success-2</div>
<div class="item monster-theme-success-3"> success-3</div>
<div class="item monster-theme-success-4"> success-4</div>
<div class="item monster-theme-warning-1"> warning-1</div>
<div class="item monster-theme-warning-2"> warning-2</div>
<div class="item monster-theme-warning-3"> warning-3</div>
<div class="item monster-theme-warning-4"> warning-4</div>
<div class="item monster-theme-error-1"> error-1</div>
<div class="item monster-theme-error-2"> error-2</div>
<div class="item monster-theme-error-3"> error-3</div>
<div class="item monster-theme-error-4"> error-4</div>
<div class="item monster-theme-selection-1"> selection-1</div>
<div class="item monster-theme-selection-2"> selection-2</div>
<div class="item monster-theme-selection-3"> selection-3</div>
<div class="item monster-theme-selection-4"> selection-4</div>
<div class="item monster-color-neutral-1"> neutral-1</div>
<div class="item monster-color-neutral-2"> neutral-2</div>
<div class="item monster-color-neutral-3 monster-bg-color-primary-3"> neutral-3 + bg-color-primary-3</div>
<div class="item monster-color-neutral-4 monster-bg-color-primary-4"> neutral-4 + bg-color-primary-4</div>
<div class="item monster-color-neutral-1 monster-bg-color-secondary-1"> neutral-1 + bg-color-secondary-1</div>
<div class="item monster-color-neutral-1 monster-bg-color-secondary-2"> neutral-1 + bg-color-secondary-2</div>
<div class="item monster-color-neutral-1 monster-bg-color-secondary-3"> neutral-1 + bg-color-secondary-3</div>
<div class="item monster-color-neutral-4 monster-bg-color-secondary-4"> neutral-4 + bg-color-secondary-4</div>
<div class="item monster-border-primary-1"> border-primary-1
</div>
<div class="item monster-border-primary-2"> border-primary-2
</div>
<div class="item monster-border-primary-3"> border-primary-3
</div>
<div class="item monster-border-primary-4">border-primary-4
</div>
<div class="item monster-border-secondary-1"> border-secondary-1
</div>
<div class="item monster-border-secondary-2"> border-secondary-2
</div>
<div class="item monster-border-secondary-3"> border-secondary-3
</div>
<div class="item monster-border-secondary-4"> border-secondary-4
</div>
<div class="item monster-border-tertiary-1">
border-tertiary-1
</div>
<div class="item monster-border-tertiary-2">
border-tertiary-2
</div>
<div class="item monster-border-tertiary-3"> border-tertiary-3
</div>
<div class="item monster-border-tertiary-4">
border-tertiary-4
</div>
</div>
</main>
</body>
</html>
\ No newline at end of file
playground/color/main.js 0 → 100644
+ 9
− 0
View file @ 7aa2e062
import "@schukai/component-style/source/style/property.pcss";
import "@schukai/component-style/source/style/normalize.pcss";
import "@schukai/component-style/source/style/color.pcss";
import "@schukai/component-style/source/style/typography.pcss";
import "@schukai/component-style/source/style/theme.pcss";
import "@schukai/component-style/source/style/border.pcss";
import "./main.pcss";
playground/color/main.pcss 0 → 100644
+ 30
− 0
View file @ 7aa2e062
@import "@schukai/component-style/source/style/mixin/property.pcss";
.container{
font-size: 17px;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 150px;
gap: 30px;
}
.item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
@media (prefers-color-scheme: dark) {
html {
background-color: #000;
}
h1 {
color: #fff;
}
}
\ No newline at end of file
playground/component/data.json 0 → 100644
+ 8071
− 0
View file @ 7aa2e062
This diff is collapsed.
playground/component/index.html 0 → 100644
+ 293
− 0
View file @ 7aa2e062
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Component Playground</title>
<style>
monster-form:not(:defined) {
display: none;
}
</style>
<script src="./main.js" type="module"></script>
</head>
<body class="monster-color-primary-1">
<a href="../">Back</a>
<main>
<div id="color-properties">
</div>
<h1>Datatable</h1>
<script id="data" type="application/json">
{
"dataset": [
{
"erpID": "",
"erpName": "",
"erpNumber": "",
"erpLastUpdate": "2020-01-16T10:27:18",
"erpCreation": "2020-01-16T10:27:18",
"archived": false,
"oid": 1000,
"orderDate": "2019-01-16T10:27:18",
"orderState": 57,
"orderLastStatusChange": "2019-01-16T10:38:53",
"customerUID": 30,
"customerNotice": "",
"billingAddressAID": 16,
"deliveryAddressAID": 16,
"deliveryNotice": "",
"paymentPID": 101,
"assigndTickets": "",
"resubmissionDate": "1970-01-01T12:00:00",
"resubmissionInfo": "",
"acquisitionPartnerID": 0,
"acquisitionInfo": "",
"acquisitionRedirect": null,
"acquisitionDate": "1970-01-01T12:00:00",
"shippingNotice": "",
"shippingDCID": 2,
"retoureRID": 0,
"companySHID": 1,
"salesmanUID": 0,
"channelOrderID": "",
"channelOrderState": "0",
"channelOrderDate": null,
"channelOrderData": {}
},
{
"erpID": "",
"erpName": "",
"erpNumber": "",
"erpLastUpdate": "2020-01-16T10:27:18",
"erpCreation": "2020-01-16T10:27:18",
"archived": false,
"oid": 1000,
"orderDate": "2019-01-16T10:27:18",
"orderState": 57,
"orderLastStatusChange": "2019-01-16T10:38:53",
"customerUID": 30,
"customerNotice": "",
"billingAddressAID": 16,
"deliveryAddressAID": 16,
"deliveryNotice": "",
"paymentPID": 101,
"assigndTickets": "",
"resubmissionDate": "1970-01-01T12:00:00",
"resubmissionInfo": "",
"acquisitionPartnerID": 0,
"acquisitionInfo": "",
"acquisitionRedirect": null,
"acquisitionDate": "1970-01-01T12:00:00",
"shippingNotice": "",
"shippingDCID": 2,
"retoureRID": 0,
"companySHID": 1,
"salesmanUID": 0,
"channelOrderID": "",
"channelOrderState": "0",
"channelOrderDate": null,
"channelOrderData": {}
},
{
"erpID": "",
"erpName": "",
"erpNumber": "",
"erpLastUpdate": "2020-01-16T10:27:18",
"erpCreation": "2020-01-16T10:27:18",
"archived": false,
"oid": 1000,
"orderDate": "2019-01-16T10:27:18",
"orderState": 57,
"orderLastStatusChange": "2019-01-16T10:38:53",
"customerUID": 30,
"customerNotice": "",
"billingAddressAID": 16,
"deliveryAddressAID": 16,
"deliveryNotice": "",
"paymentPID": 101,
"assigndTickets": "",
"resubmissionDate": "1970-01-01T12:00:00",
"resubmissionInfo": "",
"acquisitionPartnerID": 0,
"acquisitionInfo": "",
"acquisitionRedirect": null,
"acquisitionDate": "1970-01-01T12:00:00",
"shippingNotice": "",
"shippingDCID": 2,
"retoureRID": 0,
"companySHID": 1,
"salesmanUID": 0,
"channelOrderID": "",
"channelOrderState": "0",
"channelOrderDate": null,
"channelOrderData": {}
}
],
"sys": {
"pagination": {
"currentPage": 1,
"nextOffset": 20,
"pages": 3,
"prevOffset": null,
"offset": 0,
"objectsPerPage": 20,
"total": 48
},
"message": "200 OK",
"code": 200
}
}
</script>
<div style="display:flex">
<monster-button>
<div style="display:flex">
<div>test1</div>
<div>test2</div>
</div>
</monster-button>
<monster-button>test</monster-button>
</div>
<monster-datatable data-monster-datasource="restapi"
data-monster-datasource-arguments='{
"read": {
"url": "data.json"
}
}'>
<template id="dt-row">
<div class="col-1"
data-monster-replace="path:dt-row.oid | tostring | prefix:<a href=/> | suffix:</a>"></div>
<div class="col-2" data-monster-replace="path:dt-row.erpCreation"></div>
<div class="col-3" data-monster-replace="path:dt-row.orderState"></div>
<div class="col-4"
data-monster-replace="path:dt-row.orderState | tostring | prefix:<span class=monster-badge-secondary-pill>|suffix:</span>"></div>
<div class="col-5" data-monster-replace="path:dt-row.orderState"></div>
<div class="col-6" data-monster-replace="path:dt-row.orderState | tostring | prefix:sdfsdf"></div>
<div class="col-7" data-monster-replace="static:sdfsdf"></div>
<div class="col-8" data-monster-replace="static:sdfsdf"></div>
<div class="col-start-end" data-monster-replace="static:sdfsdf"></div>
</template>
<div class="monster-data-grid-container">
<div data-monster-insert="dt-row path:dataset">
<div class="col-1 header">HEADLINE1</div>
<div class="col-2 header">HEADLINE3</div>
<div class="col-3 header">HEADLINE3</div>
<div class="col-4 header">HEADLINE4</div>
<div class="col-5 header">HEADLINE5</div>
<div class="col-6 header">HEADLINE6</div>
<div class="col-7 header">HEADLINE7</div>
<div class="col-8 header">HEADLINE8</div>
</div>
</div>
</monster-datatable>
<div id="color-properties-table"></div>
<script type="module">
import {
PropertyStyleSheet
} from 'https://cdn.skypack.dev/@schukai/component-style@latest/source/stylesheet/property.mjs';
document.addEventListener('DOMContentLoaded', function () {
const isSameDomain = (styleSheet) => {
return true;
// if (!styleSheet.href) {
// return true;
// }
//
// return styleSheet.href.indexOf(window.location.origin) === 0;
};
const isStyleRule = (rule) => rule.type === 1;
console.log(PropertyStyleSheet);
const getCSSCustomPropIndex = () =>
[...PropertyStyleSheet]
.filter(isSameDomain)
.reduce(
(finalArr, sheet) =>
finalArr.concat(
[...sheet.cssRules].filter(isStyleRule).reduce((propValArr, rule) => {
const props = [...rule.style]
.map((propName) => [
propName.trim(),
rule.style.getPropertyValue(propName).trim(),
])
.filter(([propName]) => propName.indexOf("--") === 0);
return [...propValArr, ...props];
}, [])
),
[]
)
let properties = document.querySelectorAll('monster-button');
function pickTextColorBasedOnBgColorAdvanced(bgColor, lightColor, darkColor) {
let color = (bgColor.charAt(0) === '#') ? bgColor.substring(1, 7) : bgColor;
let r = parseInt(color.substring(0, 2), 16);
let g = parseInt(color.substring(2, 4), 16);
let b = parseInt(color.substring(4, 6), 16);
let uicolors = [r / 255, g / 255, b / 255];
let c = uicolors.map((col) => {
if (col <= 0.03928) {
return col / 12.92;
}
return Math.pow((col + 0.055) / 1.055, 2.4);
});
var L = (0.2126 * c[0]) + (0.7152 * c[1]) + (0.0722 * c[2]);
return (L > 0.179) ? darkColor : lightColor;
}
let element = document.getElementById("color-properties-table");
for (let i = 0; i < properties.length; i++) {
let property = properties[i];
let name = property[0];
let color = property[1];
console.log(name, color);
if (name.indexOf("--monster-color-") !== 0) {
continue;
}
console.log(color.indexOf("#"));
if (color.indexOf("#") !== 0) {
continue;
}
let div = document.createElement("div")
div.innerHTML = name + "<br>" + color + "";
div.style.backgroundColor = color;
div.style.padding = "10px";
div.style.margin = "1px";
div.style.width = "200px";
div.style.height = "50px";
div.style.color = pickTextColorBasedOnBgColorAdvanced(color, 'var(--monster-color-gray-1)', 'var(--monster-color-gray-6)');
element.appendChild(div);
}
});
</script>
</main>
</body>
</html>
\ No newline at end of file
playground/component/main.js 0 → 100644
+ 17
− 0
View file @ 7aa2e062
import "@schukai/component-style/source/style/color.pcss";
import "@schukai/component-style/source/style/theme.pcss";
import "@schukai/component-style/source/style/table.pcss";
import "@schukai/component-style/source/style/property.pcss";
import "@schukai/component-style/source/style/badge.pcss";
import "@schukai/component-style/source/style/link.pcss";
import "@schukai/component-style/source/style/data-grid.pcss";
import "@schukai/component-style/source/style/property.pcss";
//import "@schukai/component-form/source/button.mjs";
import "./main.pcss";
import "../../../application/source/datatable.mjs";
playground/component/main.pcss 0 → 100644
+ 1
− 0
View file @ 7aa2e062
playground/dom/index.html 0 → 100644
+ 192
− 0
View file @ 7aa2e062
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pagination Playground</title>
<script src="./main.js" type="module"></script>
</head>
<body class="monster-color-primary-1">
<a href="../">Back</a>
<main>
<h1>Dom Data Source</h1>
<monster-datasource-dom id="data1">
<script id="data" type="application/json">
{
"dataset": [
{
"erpID": "",
"erpName": "",
"erpNumber": "",
"erpLastUpdate": "2020-01-16T10:27:18",
"erpCreation": "2020-01-16T10:27:18",
"archived": false,
"oid": 1000,
"orderDate": "2019-01-16T10:27:18",
"orderState": 57,
"orderLastStatusChange": "2019-01-16T10:38:53",
"customerUID": 30,
"customerNotice": "",
"billingAddressAID": 16,
"deliveryAddressAID": 16,
"deliveryNotice": "",
"paymentPID": 101,
"assigndTickets": "",
"resubmissionDate": "1970-01-01T12:00:00",
"resubmissionInfo": "",
"acquisitionPartnerID": 0,
"acquisitionInfo": "",
"acquisitionRedirect": null,
"acquisitionDate": "1970-01-01T12:00:00",
"shippingNotice": "",
"shippingDCID": 2,
"retoureRID": 0,
"companySHID": 1,
"salesmanUID": 0,
"channelOrderID": "",
"channelOrderState": "0",
"channelOrderDate": null,
"channelOrderData": {}
},
{
"erpID": "",
"erpName": "",
"erpNumber": "",
"erpLastUpdate": "2020-01-16T10:27:18",
"erpCreation": "2020-01-16T10:27:18",
"archived": false,
"oid": 1000,
"orderDate": "2019-01-16T10:27:18",
"orderState": 57,
"orderLastStatusChange": "2019-01-16T10:38:53",
"customerUID": 30,
"customerNotice": "",
"billingAddressAID": 16,
"deliveryAddressAID": 16,
"deliveryNotice": "",
"paymentPID": 101,
"assigndTickets": "",
"resubmissionDate": "1970-01-01T12:00:00",
"resubmissionInfo": "",
"acquisitionPartnerID": 0,
"acquisitionInfo": "",
"acquisitionRedirect": null,
"acquisitionDate": "1970-01-01T12:00:00",
"shippingNotice": "",
"shippingDCID": 2,
"retoureRID": 0,
"companySHID": 1,
"salesmanUID": 0,
"channelOrderID": "",
"channelOrderState": "0",
"channelOrderDate": null,
"channelOrderData": {}
},
{
"erpID": "",
"erpName": "",
"erpNumber": "",
"erpLastUpdate": "2020-01-16T10:27:18",
"erpCreation": "2020-01-16T10:27:18",
"archived": false,
"oid": 1000,
"orderDate": "2019-01-16T10:27:18",
"orderState": 57,
"orderLastStatusChange": "2019-01-16T10:38:53",
"customerUID": 30,
"customerNotice": "",
"billingAddressAID": 16,
"deliveryAddressAID": 16,
"deliveryNotice": "",
"paymentPID": 101,
"assigndTickets": "",
"resubmissionDate": "1970-01-01T12:00:00",
"resubmissionInfo": "",
"acquisitionPartnerID": 0,
"acquisitionInfo": "",
"acquisitionRedirect": null,
"acquisitionDate": "1970-01-01T12:00:00",
"shippingNotice": "",
"shippingDCID": 2,
"retoureRID": 0,
"companySHID": 1,
"salesmanUID": 0,
"channelOrderID": "",
"channelOrderState": "0",
"channelOrderDate": null,
"channelOrderData": {}
}
],
"sys": {
"pagination": {
"currentPage": 1,
"nextOffset": 3,
"pages": 1,
"prevOffset": null,
"offset": 0,
"objectsPerPage": 20,
"total": 3
},
"message": "200 OK",
"code": 200
}
}
</script>
</monster-datasource-dom>
<monster-pagination data-monster-datasource-selector="#data1"></monster-pagination>
<div class="monster-table-container">
<monster-datatable id="t12" data-monster-datasource-selector="#data1">
<template id="row">
<div data-monster-mode="fixed" data-monster-sortable="oid" data-monster-head="OID">
<a data-monster-attributes="href path:row.oid | tostring | prefix:#"
data-monster-replace="path:row.oid | tostring">Link</a>
</div>
<div data-monster-grid-template="1fr">
<ul>
<li><input type="date"></li>
<li data-monster-replace="path:row.oid">test 1</li>
<li>asdfjasdkfjk</li>
</ul>
</div>
<div data-monster-mode="fixed" data-monster-head="i18n:key2"
data-monster-replace="path:row.erpCreation"></div>
<div data-monster-mode="fixed" data-monster-head="i18n:key1" data-monster-grid-template="1fr"><input
type="checkbox"></div>
<div data-monster-head="orderState 2" class="center" data-monster-align="center"
data-monster-replace="path:row.orderState"></div>
<div class="end" data-monster-align="end"
data-monster-replace="path:row.orderState | tostring | prefix:<span class=monster-badge-secondary-pill>|suffix:</span>"></div>
<div data-monster-mode="hidden" data-monster-head="OS2" data-monster-replace="static:OXXXXX"></div>
<div data-monster-sortable="orderState" data-monster-head="State"
data-monster-replace="path:row.orderState | tostring | prefix:____"></div>
<div data-monster-head="xxx" data-monster-replace="static:wwwww"></div>
<div>
<button data-monster-replace="static:doit">Click</button>
</div>
</template>
<div slot="footer" class="monster-button-group">
<monster-button>Aktion 1</monster-button>
<monster-button>Aktion 2</monster-button>
<monster-button>Aktion 3</monster-button>
</div>
</monster-datatable> </div>
</main>
</body>
</html>
\ No newline at end of file
playground/dom/main.js 0 → 100644
+ 88
− 0
View file @ 7aa2e062
import "@schukai/component-style/source/style/color.pcss";
import "@schukai/component-style/source/style/theme.pcss";
import "@schukai/component-style/source/style/table.pcss";
import "@schukai/component-style/source/style/property.pcss";
import "@schukai/component-style/source/style/badge.pcss";
import "@schukai/component-style/source/style/button.pcss";
import "@schukai/component-style/source/style/link.pcss";
import "@schukai/component-style/source/style/data-grid.pcss";
import "@schukai/component-style/source/style/property.pcss";
import "@schukai/component-style/source/style/typography.pcss";
import {Observer} from "@schukai/monster/source/types/observer.mjs";
import {windowReady} from "@schukai/monster/source/dom/ready.mjs";
//import "../../../application/source/datasource/rest.mjs";
//import "../../../application/source/dataset.mjs";
//import "@schukai/component-host/source/host.mjs";
import "@schukai/component-form/source/button.mjs";
import "../../../application/source/pagination.mjs";
import "../../../application/source/datatable.mjs";
import "../../../application/source/datasource/dom.mjs";
import "./main.pcss";
//
// windowReady.then(() => {
// const dom = document.querySelector("monster-datasource-dom");
//
// dom.datasource.attachObserver(new Observer(function () {
// console.log("Update!", this);
// }));
//
// setTimeout(() => {
// document.getElementById("data").innerHTML = `{
// "dataset": [
// {
// "erpID": "",
// "erpName": "",
// "erpNumber": "",
// "erpLastUpdate": "2020-01-16T10:27:18",
// "erpCreation": "2020-01-16T10:27:18",
// "archived": false,
// "oid": 1000,
// "orderDate": "2019-01-16T10:27:18",
// "orderState": 57,
// "orderLastStatusChange": "2019-01-16T10:38:53",
// "customerUID": 30,
// "customerNotice": "",
// "billingAddressAID": 16,
// "deliveryAddressAID": 16,
// "deliveryNotice": "",
// "paymentPID": 101,
// "assigndTickets": "",
// "resubmissionDate": "1970-01-01T12:00:00",
// "resubmissionInfo": "",
// "acquisitionPartnerID": 0,
// "acquisitionInfo": "",
// "acquisitionRedirect": null,
// "acquisitionDate": "1970-01-01T12:00:00",
// "shippingNotice": "",
// "shippingDCID": 2,
// "retoureRID": 0,
// "companySHID": 1,
// "salesmanUID": 0,
// "channelOrderID": "",
// "channelOrderState": "0",
// "channelOrderDate": null,
// "channelOrderData": {}
// }
// ],
//
// "sys": {
// "pagination": {
// "currentPage": 1,
// "nextOffset": 3,
// "pages": 1,
// "prevOffset": null,
// "offset": 0,
// "objectsPerPage": 20,
// "total": 3
// },
// "message": "200 OK",
// "code": 200
// }
//
// }`;
//
// }, 3000);
//})
playground/dom/main.pcss 0 → 100644
+ 2
− 0
View file @ 7aa2e062
\ No newline at end of file
playground/filter/data.json 0 → 100644
+ 8073
− 0
View file @ 7aa2e062
This diff is collapsed.
playground/filter/index.html 0 → 100644
+ 87
− 0
View file @ 7aa2e062
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pagination Playground</title>
<script src="./main.js" type="module"></script>
</head>
<body class="monster-color-primary-1">
<a href="../">Back</a>
<main>
<monster-host id="mmmmm">
<script type="application/json" data-monster-role="translations">
{
"key1": "k2 - XXXYYYZZZ",
"key2": "k1 - ERP"
}
</script>
<monster-config-manager></monster-config-manager>
<h1>Filter</h1>
<script id="id-for-this-config" type="application/json">
{
"read": {
"url": "https://localhost.schukai.net:8443/api/commerce/orders/search?q=order.customerUID>0&page=${page}&orderby=${path:order | default:oid}",
"init": {
"method": "GET",
"headers": {
"Content-Type": "application/json",
"Authorization": "Basic ==YWRtaW46bGFuZHNiZXJpZWQK",
"Accept": "application/json"
}
},
"credentials": "include",
"body": null
}
}
</script>
<script id="id-for-filter-button" type="application/json">
{
"references": {
"toggleableSelector": [
"monster-collapse"
],
"filter": "monster-datatable-filter"
},
"labels": {
"filter": "Filte2222r"
}
}
</script>
<monster-datasource-rest id="data1"
data-monster-options-selector="#id-for-this-config"></monster-datasource-rest>
<monster-collapse2>
<monster-datatable-filter id="mm22mmm">
<label data-monster-label="key 1 option"><input type="checkbox" value="key1">key2<input type="checkbox"
value="key2">key2</label>
<label data-monster-label="key 1 option" style="display:none">date1 <input type="date" value="date1"></label>
<label data-monster-label="key 2 option" style="display:none">date2 <input type="date" value="date2"></label>
<label data-monster-label="key 2 option" style="display:none">date2 <input type="email" value="date2"></label>
<label data-monster-label="key 2 option" style="display:none">date2 <input type="color" value="date2"></label>
</monster-datatable-filter>
</monster-collapse2>
<monster-datatable-filter-button
data-monster-options-selector="#id-for-filter-button">
</monster-datatable-filter-button>
</monster-host>
</main>
</body>
</html>
\ No newline at end of file
playground/filter/main.js 0 → 100644
+ 50
− 0
View file @ 7aa2e062
import "@schukai/component-style/source/style/color.pcss";
import "@schukai/component-style/source/style/theme.pcss";
import "@schukai/component-style/source/style/table.pcss";
import "@schukai/component-style/source/style/property.pcss";
import "@schukai/component-style/source/style/badge.pcss";
import "@schukai/component-style/source/style/button.pcss";
import "@schukai/component-style/source/style/link.pcss";
import "@schukai/component-style/source/style/data-grid.pcss";
import "@schukai/component-style/source/style/property.pcss";
import "@schukai/component-style/source/style/typography.pcss";
import "./main.pcss";
import "../../../application/source/datasource/rest.mjs";
import "../../../application/source/pagination.mjs";
import "../../../application/source/datatable.mjs";
import "../../../application/source/dataset.mjs";
import "../../../application/source/filter-button.mjs";
import "../../../application/source/filter.mjs";
import "../../../application/source/filter/input.mjs";
import {windowReady} from "@schukai/monster/source/dom/ready.mjs";
import "@schukai/component-host/source/host.mjs";
import "@schukai/component-host/source/collapse.mjs";
import "@schukai/component-form/source/button.mjs";
// import { Embed } from "@schukai/monster/source/i18n/providers/embed.mjs";
// import { getDocumentTranslations } from "@schukai/monster/source/i18n/translations.mjs";
import {findTargetElementFromEvent} from "@schukai/monster/source/dom/events.mjs";
windowReady.then(() => {
// debugger
// const embed = Embed.assignTranslationsToElement();
// console.log(embed);
// embed.loadTranslations().then((translations) => {
//
//const list = document.querySelector("monster-datatable");
//console.log(list);
// [data-monster-insert-reference]
// list.addEventListener("click", (event) => {
// const e = findTargetElementFromEvent(event, "[data-monster-role=datatable-row]")
// console.log(event,e);
// })
})
playground/filter/main.pcss 0 → 100644
+ 1
− 0
View file @ 7aa2e062
playground/form/index.html 0 → 100644
+ 193
− 0
View file @ 7aa2e062
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Form</title>
<script src="./main.js" type="module"></script>
</head>
<body>
<main>
<h1>Form</h1>
<h2 id="form1">Form 1</h2>
<form class="monster-form">
<div class="input-group">
<label for="name2">Name</label>
<input type="text" id="name2" name="user_name"/>
<input type="text" id="name32" name="user_name"/>
</div>
<label for="msg">Your message:
<textarea id="msg2" name="user_message"></textarea>
</label>
<fieldset>
<legend>Personal Information</legend>
<label for="na3me">test
<input type="text" id="na3me" name="user_name"/></label>
<label for="ma3il">reply:
<input type="email" id="ma3il" name="user_email"/>
</label>
<label for="ms1g">Your message:
<textarea id="ms1g" name="user_message"></textarea>
</label>
</fieldset>
<fieldset>
<legend>Detasil Information</legend>
<div id="from">
<label for="name">from:</label>
<input type="text" id="name" name="user_name"/>
</div>
<label for="mail">reply:</label>
<input type="email" id="mail" name="user_email"/>
<label >reply:</label>
<select><option>test</option><option>test2</option></select>
<p>sdafasd fasdf klasdjfklöjasdklöfjasdfjasdfklö</p>
<div id="message">
<label for="msg">Your message:</label>
<textarea id="msg" name="user_message"></textarea>
</div>
<div class="button">
<button type="submit">Send your message</button>
</div>
</fieldset>
</form>
<h2 id="form2">Form 2</h2>
<p>Forms are useful for all kinds of things on webpages. Contact forms, newsletter sign ups etc. Forms also look
pretty good on Simple.css:</p>
<form class="monster-form">
<p><strong>This is just a test form. It doesn't do anything.</strong></p>
<label>
<svg class="icon prefix">
<use xlink:href="#icon-envelope"></use>
</svg>
<input placeholder="Your Email"
type="email" inputmode="email"
autocomplete="off"
aria-required="true"
required
title="Email address">
<span>Your email address</span>
</label>
<label>
<input placeholder="Your Email"
type="email" inputmode="email"
autocomplete="off"
aria-required="true"
required
title="Email address">
<span>Your email address</span>
</label>
<label for="customRange1" class="form-label">Example range
<input type="range" class="form-range" id="customRange1">
</label>
<select>
<option selected="selected" value="1">Title</option>
<option value="2">Mr</option>
<option value="3">Miss</option>
<option value="4">Mrs</option>
<option value="5">Other</option>
</select>
<label>First name</label>
<input type="text" name="first_name"/>
<label>Surname</label>
<input type="text" name="surname"/>
<label>Email</label>
<input type="email" name="email" required=""/>
<label>Enquiry type:</label>
<label><input checked="checked" name="type" type="radio" value="sales"/>Sales</label>
<label><input name="type" type="radio" value="support"/>Support
<input name="type" type="radio" value="billing"/>Billing</label>
<label>Enquiry type:</label>
<label>Sales<input checked="checked" name="type" type="radio" value="sales"/></label>
<label>Support<input name="type" type="radio" value="support"/>
Billing<input name="type" type="radio" value="billing"/></label>
<label>Message
<textarea rows="6"></textarea></label>
<label for="cars">Choose a car:
<select name="cars" id="cars" multiple="">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</label>
<label>
<input type="checkbox" id="chec3k233box" value="terms"/>
I agree to the <a href="#">terms and conditions</a>
</label>
<label>
<input type="checkbox" id="chec3k2box" value="terms"/>
I agree to the <a href="#">terms and conditions</a>
</label>
<label>
<input type="checkbox" id="che4ckbox" value="terms"/>
I agree to the <a href="#">terms and conditions</a>
</label>
<label>
I agree to the <a href="#">terms and conditions</a>
<input type="checkbox" id="chec3k233box" value="terms"/>
</label>
<label>
I agree to the <a href="#">terms and conditions</a>
<input type="checkbox" id="chec3k2box" value="terms"/>
</label>
<label>
I agree to the <a href="#">terms and conditions</a>
<input type="checkbox" id="che4ckbox" value="terms"/>
</label>
<button>Send</button>
<button type="reset">Reset</button>
<button disabled="disabled">Disabled</button>
asdfsdafasd
<div>dsfsdfsdf</div>
</form>
</main>
</body>
</html>
\ No newline at end of file
playground/form/main.js 0 → 100644
+ 12
− 0
View file @ 7aa2e062
import "@schukai/component-style/source/style/property.pcss";
import "@schukai/component-style/source/style/normalize.pcss";
import "@schukai/component-style/source/style/color.pcss";
import "@schukai/component-style/source/style/theme.pcss";
import "@schukai/component-style/source/style/typography.pcss";
import "@schukai/component-style/source/style/form.pcss";
import "@schukai/component-style/source/style/link.pcss";
import "@schukai/component-style/source/style/button.pcss";
import "@schukai/component-style/source/style/ripple.pcss";
import "./main.pcss";
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment