Compare commits

...

78 Commits

Author SHA1 Message Date
c76d364071 1.0.191 2023-09-12 13:44:07 +02:00
760e0085f7 fix(core): update 2023-09-12 13:44:07 +02:00
6890ca1f1f 1.0.190 2023-09-12 13:42:56 +02:00
9ca000cf06 fix(core): update 2023-09-12 13:42:55 +02:00
1c0f5129a9 1.0.189 2023-09-09 13:34:46 +02:00
69e17949f4 fix(core): update 2023-09-09 13:34:46 +02:00
bcfd3495dd 1.0.188 2023-09-08 11:44:04 +02:00
03a46a72c5 fix(core): update 2023-09-08 11:44:03 +02:00
2465ce5f9b 1.0.187 2023-09-07 18:34:39 +02:00
00ac83f205 fix(core): update 2023-09-07 18:34:38 +02:00
67065b1ffb 1.0.186 2023-09-07 02:57:31 +02:00
783c10479f fix(core): update 2023-09-07 02:57:30 +02:00
d4eae1cd9e 1.0.185 2023-09-04 19:29:39 +02:00
4e674f67c5 fix(core): update 2023-09-04 19:29:39 +02:00
889a543780 1.0.184 2023-09-04 19:28:50 +02:00
fc5f3a9576 fix(core): update 2023-09-04 19:28:50 +02:00
66644364b5 1.0.183 2023-09-02 14:05:34 +02:00
51febdae06 fix(core): update 2023-09-02 14:05:33 +02:00
745ff299dc 1.0.182 2023-09-01 16:44:14 +02:00
3606d60ba6 fix(core): update 2023-09-01 16:44:13 +02:00
8970a79141 1.0.181 2023-09-01 14:21:16 +02:00
566a7ce148 fix(core): update 2023-09-01 14:21:15 +02:00
362bef15e3 1.0.180 2023-08-30 11:27:47 +02:00
446c494863 fix(core): update 2023-08-30 11:27:46 +02:00
dbe2f2f217 1.0.179 2023-08-28 09:59:13 +02:00
02ca92a431 fix(core): update 2023-08-28 09:59:12 +02:00
a9015e787c 1.0.178 2023-08-28 09:49:52 +02:00
9cd28fa819 fix(core): update 2023-08-28 09:49:51 +02:00
7b3793e943 1.0.177 2023-08-26 12:15:49 +02:00
a22c04d98d fix(core): update 2023-08-26 12:15:49 +02:00
5367512292 1.0.176 2023-08-20 17:11:41 +02:00
9c387f8ace fix(core): update 2023-08-20 17:11:41 +02:00
c3ec288d09 1.0.175 2023-08-19 18:56:33 +02:00
9d952afebb fix(core): update 2023-08-19 18:56:32 +02:00
621262fde7 1.0.174 2023-08-19 11:47:45 +02:00
e3e79d9a11 fix(core): update 2023-08-19 11:47:45 +02:00
d08a92814e 1.0.173 2023-08-08 01:10:03 +02:00
a6f277250e fix(core): update 2023-08-08 01:10:02 +02:00
09cb82d587 1.0.172 2023-08-07 20:02:19 +02:00
316e2a0b27 fix(core): update 2023-08-07 20:02:18 +02:00
e0d2679801 1.0.171 2023-08-07 19:13:30 +02:00
107800a057 fix(core): update 2023-08-07 19:13:29 +02:00
4ee8512ee4 1.0.170 2023-04-12 02:47:46 +02:00
f75a3714ae fix(core): update 2023-04-12 02:47:45 +02:00
d6047f2e78 1.0.169 2023-04-12 00:40:40 +02:00
03769c8412 fix(core): update 2023-04-12 00:40:40 +02:00
1a782eb4ee 1.0.168 2023-04-10 00:26:55 +02:00
a27adf25cb fix(core): update 2023-04-10 00:26:55 +02:00
96e237b9af 1.0.167 2023-04-10 00:18:17 +02:00
710e06b2f1 fix(core): update 2023-04-10 00:18:16 +02:00
a3bc25c4ac 1.0.166 2023-04-10 00:17:38 +02:00
ee5b712a37 fix(core): update 2023-04-10 00:17:38 +02:00
879ae5ad91 1.0.165 2023-04-07 23:55:56 +02:00
2bbda416b2 fix(core): update 2023-04-07 23:55:55 +02:00
de88957857 1.0.164 2023-04-07 23:46:09 +02:00
aa0c63d569 fix(core): update 2023-04-07 23:46:08 +02:00
d843f27fd3 1.0.163 2023-04-06 17:41:46 +02:00
a26755b7d3 fix(core): update 2023-04-06 17:41:46 +02:00
345a562a21 1.0.162 2023-04-06 17:32:50 +02:00
3fae99554d fix(core): update 2023-04-06 17:32:49 +02:00
ed30ed3f8f 1.0.161 2023-04-06 17:29:08 +02:00
beef47959b fix(core): update 2023-04-06 17:29:07 +02:00
aec2cf18fd 1.0.160 2023-04-05 18:57:13 +02:00
0f45633666 fix(core): update 2023-04-05 18:57:12 +02:00
8588888ce7 1.0.159 2023-04-05 17:17:02 +02:00
2a62a635cd fix(core): update 2023-04-05 17:17:02 +02:00
0eb2557956 1.0.158 2023-04-05 17:00:44 +02:00
9960bf7018 fix(core): update 2023-04-05 17:00:44 +02:00
f26f0d0450 1.0.157 2023-04-05 16:51:05 +02:00
53fadfcbd5 fix(core): update 2023-04-05 16:51:05 +02:00
497d3a3ac5 1.0.156 2023-04-05 14:46:21 +02:00
37524765ae fix(core): update 2023-04-05 14:46:20 +02:00
ab0219d3e4 1.0.155 2023-03-27 23:21:27 +02:00
7cefd9cba5 fix(core): update 2023-03-27 23:21:27 +02:00
4cf5ca2d7f 1.0.154 2023-03-27 01:22:16 +02:00
a9791220fb fix(core): update 2023-03-27 01:22:15 +02:00
4aed14c7a2 1.0.153 2023-03-25 20:56:13 +01:00
49d1cba3fd fix(core): update 2023-03-25 20:56:12 +01:00
47 changed files with 4704 additions and 1946 deletions

View File

@ -0,0 +1,66 @@
name: Default (not tags)
on:
push:
tags-ignore:
- '**'
env:
IMAGE: registry.gitlab.com/hosttoday/ht-docker-node:npmci
NPMCI_COMPUTED_REPOURL: https://${{gitea.repository_owner}}:${{secrets.GITEA_TOKEN}}@gitea.lossless.digital/${{gitea.repository}}.git
NPMCI_TOKEN_NPM: ${{secrets.NPMCI_TOKEN_NPM}}
NPMCI_TOKEN_NPM2: ${{secrets.NPMCI_TOKEN_NPM2}}
NPMCI_GIT_GITHUBTOKEN: ${{secrets.NPMCI_GIT_GITHUBTOKEN}}
NPMCI_URL_CLOUDLY: ${{secrets.NPMCI_URL_CLOUDLY}}
jobs:
security:
runs-on: ubuntu-latest
continue-on-error: true
container:
image: ${{ env.IMAGE }}
steps:
- uses: actions/checkout@v3
- name: Install pnpm and npmci
run: |
pnpm install -g pnpm
pnpm install -g @shipzone/npmci
- name: Run npm prepare
run: npmci npm prepare
- name: Audit production dependencies
run: |
npmci command npm config set registry https://registry.npmjs.org
npmci command pnpm audit --audit-level=high --prod
continue-on-error: true
- name: Audit development dependencies
run: |
npmci command npm config set registry https://registry.npmjs.org
npmci command pnpm audit --audit-level=high --dev
continue-on-error: true
test:
if: ${{ always() }}
needs: security
runs-on: ubuntu-latest
container:
image: ${{ env.IMAGE }}
steps:
- uses: actions/checkout@v3
- name: Test stable
run: |
npmci node install stable
npmci npm install
npmci npm test
- name: Test build
run: |
npmci node install stable
npmci npm install
npmci npm build

View File

@ -0,0 +1,124 @@
name: Default (tags)
on:
push:
tags:
- '*'
env:
IMAGE: registry.gitlab.com/hosttoday/ht-docker-node:npmci
NPMCI_COMPUTED_REPOURL: https://${{gitea.repository_owner}}:${{secrets.GITEA_TOKEN}}@gitea.lossless.digital/${{gitea.repository}}.git
NPMCI_TOKEN_NPM: ${{secrets.NPMCI_TOKEN_NPM}}
NPMCI_TOKEN_NPM2: ${{secrets.NPMCI_TOKEN_NPM2}}
NPMCI_GIT_GITHUBTOKEN: ${{secrets.NPMCI_GIT_GITHUBTOKEN}}
NPMCI_URL_CLOUDLY: ${{secrets.NPMCI_URL_CLOUDLY}}
jobs:
security:
runs-on: ubuntu-latest
continue-on-error: true
container:
image: ${{ env.IMAGE }}
steps:
- uses: actions/checkout@v3
- name: Prepare
run: |
pnpm install -g pnpm
pnpm install -g @shipzone/npmci
npmci npm prepare
- name: Audit production dependencies
run: |
npmci command npm config set registry https://registry.npmjs.org
npmci command pnpm audit --audit-level=high --prod
continue-on-error: true
- name: Audit development dependencies
run: |
npmci command npm config set registry https://registry.npmjs.org
npmci command pnpm audit --audit-level=high --dev
continue-on-error: true
test:
if: ${{ always() }}
needs: security
runs-on: ubuntu-latest
container:
image: ${{ env.IMAGE }}
steps:
- uses: actions/checkout@v3
- name: Prepare
run: |
pnpm install -g pnpm
pnpm install -g @shipzone/npmci
npmci npm prepare
- name: Test stable
run: |
npmci node install stable
npmci npm install
npmci npm test
- name: Test build
run: |
npmci node install stable
npmci npm install
npmci npm build
release:
needs: test
if: github.event_name == 'push' && startsWith(github.ref, 'refs/tags/')
runs-on: ubuntu-latest
container:
image: ${{ env.IMAGE }}
steps:
- uses: actions/checkout@v3
- name: Prepare
run: |
pnpm install -g pnpm
pnpm install -g @shipzone/npmci
npmci npm prepare
- name: Release
run: |
npmci node install stable
npmci npm publish
metadata:
needs: test
if: github.event_name == 'push' && startsWith(github.ref, 'refs/tags/')
runs-on: ubuntu-latest
container:
image: ${{ env.IMAGE }}
continue-on-error: true
steps:
- uses: actions/checkout@v3
- name: Prepare
run: |
pnpm install -g pnpm
pnpm install -g @shipzone/npmci
npmci npm prepare
- name: Code quality
run: |
npmci command npm install -g typescript
npmci npm install
- name: Trigger
run: npmci trigger
- name: Build docs and upload artifacts
run: |
npmci node install stable
npmci npm install
pnpm install -g @gitzone/tsdoc
npmci command tsdoc
continue-on-error: true

View File

@ -10,11 +10,9 @@
/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="preconnect" href="https://rsms.me/">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://rsms.me/inter/inter.css">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<!--Lets load standard fonts-->
<link rel="preconnect" href="https://assetbroker.lossless.one/" crossorigin>
<link rel="stylesheet" href="https://assetbroker.lossless.one/fonts/fonts.css">
<style>
body {

View File

@ -1,6 +1,6 @@
// dees tools
import * as deesWccTools from '@designestate/dees-wcctools';
import * as deesDomTools from '@designestate/dees-domtools';
import * as deesWccTools from '@design.estate/dees-wcctools';
import * as deesDomTools from '@design.estate/dees-domtools';
// elements and pages
import * as elements from '../ts_web/elements/index.js';

View File

@ -3,10 +3,10 @@
"projectType": "wcc",
"module": {
"githost": "gitlab.com",
"gitscope": "designestate",
"gitscope": "design.estate",
"gitrepo": "dees-catalog",
"description": "a webcomponents catalog for handling daily stuff on the web",
"npmPackagename": "@designestate/dees-catalog",
"npmPackagename": "@design.estate/dees-catalog",
"license": "MIT",
"projectDomain": "design.estate"
}

View File

@ -1,6 +1,6 @@
{
"name": "@designestate/dees-catalog",
"version": "1.0.152",
"name": "@design.estate/dees-catalog",
"version": "1.0.191",
"private": false,
"description": "website for lossless.com",
"main": "dist_ts_web/index.js",
@ -15,25 +15,27 @@
"author": "Lossless GmbH",
"license": "MIT",
"dependencies": {
"@designestate/dees-domtools": "^2.0.28",
"@designestate/dees-element": "^2.0.19",
"@designestate/dees-wcctools": "^1.0.76",
"@fortawesome/fontawesome-svg-core": "^6.3.0",
"@fortawesome/free-brands-svg-icons": "^6.3.0",
"@fortawesome/free-regular-svg-icons": "^6.3.0",
"@fortawesome/free-solid-svg-icons": "^6.3.0",
"@pushrocks/smartpromise": "^3.1.7",
"@tsclass/tsclass": "^4.0.34",
"pdfjs-dist": "^2.15.349"
"@design.estate/dees-domtools": "^2.0.40",
"@design.estate/dees-element": "^2.0.27",
"@design.estate/dees-wcctools": "^1.0.78",
"@fortawesome/fontawesome-svg-core": "^6.4.2",
"@fortawesome/free-brands-svg-icons": "^6.4.2",
"@fortawesome/free-regular-svg-icons": "^6.4.2",
"@fortawesome/free-solid-svg-icons": "^6.4.2",
"@push.rocks/smartpromise": "^4.0.3",
"@push.rocks/smartstring": "^4.0.9",
"@tsclass/tsclass": "^4.0.42",
"highlight.js": "11.8.0",
"pdfjs-dist": "^3.10.111"
},
"devDependencies": {
"@gitzone/tsbuild": "^2.1.65",
"@gitzone/tsbundle": "^2.0.7",
"@gitzone/tstest": "^1.0.74",
"@gitzone/tswatch": "^2.0.5",
"@pushrocks/projectinfo": "^5.0.1",
"@pushrocks/tapbundle": "^5.0.4",
"@types/node": "^18.15.9"
"@gitzone/tsbuild": "^2.1.66",
"@gitzone/tsbundle": "^2.0.8",
"@gitzone/tstest": "^1.0.77",
"@gitzone/tswatch": "^2.0.7",
"@push.rocks/projectinfo": "^5.0.2",
"@push.rocks/tapbundle": "^5.0.15",
"@types/node": "^20.6.0"
},
"files": [
"ts/**/*",

4729
pnpm-lock.yaml generated

File diff suppressed because it is too large Load Diff

View File

@ -1,26 +1,26 @@
# @designestate/dees-catalog
# @design.estate/dees-catalog
a webcomponents catalog for handling daily stuff on the web
## Availabililty and Links
* [npmjs.org (npm package)](https://www.npmjs.com/package/@designestate/dees-catalog)
* [gitlab.com (source)](https://gitlab.com/designestate/dees-catalog)
* [github.com (source mirror)](https://github.com/designestate/dees-catalog)
* [docs (typedoc)](https://designestate.gitlab.io/dees-catalog/)
* [npmjs.org (npm package)](https://www.npmjs.com/package/@design.estate/dees-catalog)
* [gitlab.com (source)](https://gitlab.com/design.estate/dees-catalog)
* [github.com (source mirror)](https://github.com/design.estate/dees-catalog)
* [docs (typedoc)](https://design.estate.gitlab.io/dees-catalog/)
## Status for master
Status Category | Status Badge
-- | --
GitLab Pipelines | [![pipeline status](https://gitlab.com/designestate/dees-catalog/badges/master/pipeline.svg)](https://lossless.cloud)
GitLab Pipline Test Coverage | [![coverage report](https://gitlab.com/designestate/dees-catalog/badges/master/coverage.svg)](https://lossless.cloud)
npm | [![npm downloads per month](https://badgen.net/npm/dy/@designestate/dees-catalog)](https://lossless.cloud)
Snyk | [![Known Vulnerabilities](https://badgen.net/snyk/designestate/dees-catalog)](https://lossless.cloud)
GitLab Pipelines | [![pipeline status](https://gitlab.com/design.estate/dees-catalog/badges/master/pipeline.svg)](https://lossless.cloud)
GitLab Pipline Test Coverage | [![coverage report](https://gitlab.com/design.estate/dees-catalog/badges/master/coverage.svg)](https://lossless.cloud)
npm | [![npm downloads per month](https://badgen.net/npm/dy/@design.estate/dees-catalog)](https://lossless.cloud)
Snyk | [![Known Vulnerabilities](https://badgen.net/snyk/design.estate/dees-catalog)](https://lossless.cloud)
TypeScript Support | [![TypeScript](https://badgen.net/badge/TypeScript/>=%203.x/blue?icon=typescript)](https://lossless.cloud)
node Support | [![node](https://img.shields.io/badge/node->=%2010.x.x-blue.svg)](https://nodejs.org/dist/latest-v10.x/docs/api/)
Code Style | [![Code Style](https://badgen.net/badge/style/prettier/purple)](https://lossless.cloud)
PackagePhobia (total standalone install weight) | [![PackagePhobia](https://badgen.net/packagephobia/install/@designestate/dees-catalog)](https://lossless.cloud)
PackagePhobia (package size on registry) | [![PackagePhobia](https://badgen.net/packagephobia/publish/@designestate/dees-catalog)](https://lossless.cloud)
BundlePhobia (total size when bundled) | [![BundlePhobia](https://badgen.net/bundlephobia/minzip/@designestate/dees-catalog)](https://lossless.cloud)
PackagePhobia (total standalone install weight) | [![PackagePhobia](https://badgen.net/packagephobia/install/@design.estate/dees-catalog)](https://lossless.cloud)
PackagePhobia (package size on registry) | [![PackagePhobia](https://badgen.net/packagephobia/publish/@design.estate/dees-catalog)](https://lossless.cloud)
BundlePhobia (total size when bundled) | [![BundlePhobia](https://badgen.net/bundlephobia/minzip/@design.estate/dees-catalog)](https://lossless.cloud)
## Usage

View File

@ -1,4 +1,4 @@
import { tap, expect, webhelpers } from '@pushrocks/tapbundle';
import { tap, expect, webhelpers } from '@push.rocks/tapbundle';
import * as deesCatalog from '../ts_web';

View File

@ -2,7 +2,7 @@
* autocreated commitinfo by @pushrocks/commitinfo
*/
export const commitinfo = {
name: '@designestate/dees-catalog',
version: '1.0.152',
name: '@design.estate/dees-catalog',
version: '1.0.191',
description: 'website for lossless.com'
}

View File

@ -3,11 +3,12 @@ import {
customElement,
DeesElement,
html,
TemplateResult,
type TemplateResult,
css,
type CSSResult,
state,
property
} from '@designestate/dees-element';
} from '@design.estate/dees-element';
@customElement('dees-button-exit')
export class DeesButtonExit extends DeesElement {

View File

@ -3,13 +3,14 @@ import {
html,
DeesElement,
property,
TemplateResult,
type TemplateResult,
cssManager,
css,
type CSSResult,
unsafeCSS,
} from '@designestate/dees-element';
} from '@design.estate/dees-element';
import * as domtools from '@designestate/dees-domtools';
import * as domtools from '@design.estate/dees-domtools';
declare global {
interface HTMLElementTagNameMap {
@ -87,7 +88,7 @@ export class DeesButton extends DeesElement {
justify-content: center;
align-items: center;
background: ${cssManager.bdTheme('#fff', '#333')};
box-shadow: ${cssManager.bdTheme('0px 1px 4px rgba(0,0,0,0.3)', 'none')};
box-shadow: ${cssManager.bdTheme('0px 1px 3px rgba(0,0,0,0.3)', 'none')};
border: 1px solid ${cssManager.bdTheme('#eee', '#333')};
border-top: ${cssManager.bdTheme('1px solid #eee', '1px solid #444')};
border-radius: 4px;

View File

@ -3,13 +3,14 @@ import {
html,
DeesElement,
property,
TemplateResult,
type TemplateResult,
cssManager,
css,
type CSSResult,
unsafeCSS,
} from '@designestate/dees-element';
} from '@design.estate/dees-element';
import * as domtools from '@designestate/dees-domtools';
import * as domtools from '@design.estate/dees-domtools';
declare global {
interface HTMLElementTagNameMap {

View File

@ -0,0 +1,57 @@
import { html } from '@design.estate/dees-element';
import * as plugins from './plugins.js';
import { DeesContextmenu } from './dees-contextmenu.js';
export const demoFunc = () => html`
<style>
.withMargin {
display: block;
margin: 20px;
}
</style>
<dees-button @contextmenu=${(eventArg) => {
DeesContextmenu.openContextMenuWithOptions(eventArg, [
{
name: 'copy',
iconName: 'copySolid',
action: async () => {
return null;
},
},
{
name: 'edit',
iconName: 'penToSquare',
action: async () => {
return null;
},
},{
name: 'paste',
iconName: 'pasteSolid',
action: async () => {
return null;
},
},
]);
}}>Hello</dees-button>
<dees-contextmenu class="withMargin"></dees-contextmenu>
<dees-contextmenu
class="withMargin"
.menuItems=${[
{
name: 'copy',
iconName: 'copySolid',
action: async () => {},
},
{
name: 'edit',
iconName: 'penToSquare',
action: async () => {},
},{
name: 'paste',
iconName: 'pasteSolid',
action: async () => {},
},
] as plugins.tsclass.website.IMenuItem[]}
></dees-contextmenu>
`;

View File

@ -1,16 +1,18 @@
import { demoFunc } from './dees-contextmenu.demo.js';
import * as plugins from './plugins.js';
import {
customElement,
html,
DeesElement,
property,
TemplateResult,
type TemplateResult,
cssManager,
css,
type CSSResult,
unsafeCSS,
} from '@designestate/dees-element';
} from '@design.estate/dees-element';
import * as domtools from '@designestate/dees-domtools';
import * as domtools from '@design.estate/dees-domtools';
import { DeesWindowLayer } from './dees-windowlayer.js';
declare global {
@ -22,70 +24,25 @@ declare global {
@customElement('dees-contextmenu')
export class DeesContextmenu extends DeesElement {
// DEMO
public static demo = () => html`
<style>
.withMargin {
display: block;
margin: 20px;
}
</style>
<dees-button @contextmenu=${(eventArg) => {
DeesContextmenu.openContextMenuWithOptions(eventArg, [
{
name: 'copy',
iconName: 'copySolid',
action: async () => {
return null;
},
},
{
name: 'edit',
iconName: 'penToSquare',
action: async () => {
return null;
},
},{
name: 'paste',
iconName: 'pasteSolid',
action: async () => {
return null;
},
},
]);
}}>Hello</dees-button>
<dees-contextmenu class="withMargin"></dees-contextmenu>
<dees-contextmenu
class="withMargin"
.menuItems=${[
{
name: 'copy',
iconName: 'copySolid',
action: async () => {},
},
{
name: 'edit',
iconName: 'penToSquare',
action: async () => {},
},{
name: 'paste',
iconName: 'pasteSolid',
action: async () => {},
},
] as plugins.tsclass.website.IMenuItem[]}
></dees-contextmenu>
`;
public static demo = demoFunc
// STATIC
public static async openContextMenuWithOptions(eventArg: MouseEvent, menuItemsArg: plugins.tsclass.website.IMenuItem[]) {
eventArg.preventDefault();
eventArg.stopPropagation();
const contextMenu = new DeesContextmenu();
contextMenu.style.position = 'absolute';
contextMenu.style.zIndex = '2000';
contextMenu.style.top = `${eventArg.clientY.toString()}px`;
contextMenu.style.left = `${eventArg.clientX.toString()}px`;
contextMenu.style.opacity = '0';
contextMenu.style.transform = 'scale(0.95,0.95)';
contextMenu.style.transformOrigin = 'top left';
contextMenu.menuItems = menuItemsArg;
contextMenu.windowLayer = await DeesWindowLayer.createAndShow();
contextMenu.windowLayer.addEventListener('click', async () => {
await contextMenu.destroy();
})
document.body.append(contextMenu);
await domtools.plugins.smartdelay.delayFor(0);
contextMenu.style.opacity = '1';
@ -96,6 +53,7 @@ export class DeesContextmenu extends DeesElement {
type: Array,
})
public menuItems: plugins.tsclass.website.IMenuItem[] = [];
windowLayer: DeesWindowLayer;
constructor() {
super();
@ -114,7 +72,7 @@ export class DeesContextmenu extends DeesElement {
font-size: 14px;
width: 200px;
border: 1px solid #444;
min-height: 40px;
min-height: 34px;
border-radius: 3px;
background: #222;
box-shadow: 0px 1px 4px #000;
@ -155,15 +113,20 @@ export class DeesContextmenu extends DeesElement {
</div>
`;
})}
${this.menuItems.length === 0 ? html`
<div class="menuitem" @click=${() => {
alert('No menu items...')
}}>
<dees-icon .iconFA=${'xmark'}></dees-icon
>No menu item present...
</div>
` : html``}
</div>
`;
}
public async firstUpdated() {
if (!this.menuItems || this.menuItems.length === 0) {
const mainbox = this.shadowRoot.querySelector('.mainbox');
mainbox.textContent = 'no menu items present';
}
}
public async handleClick(menuItem: plugins.tsclass.website.IMenuItem) {
@ -172,6 +135,9 @@ export class DeesContextmenu extends DeesElement {
}
public async destroy() {
if (this.windowLayer) {
this.windowLayer.destroy();
}
this.style.opacity = '0';
this.style.transform = 'scale(0.95,0,95)';
await domtools.plugins.smartdelay.delayFor(100);

View File

@ -0,0 +1,18 @@
import { html } from '@design.estate/dees-element';
export const demoFunc = () => html` <style>
.demoWrapper {
box-sizing: border-box;
position: absolute;
width: 100%;
height: 100%;
padding: 20px;
background: none;
}
</style>
<div class="demoWrapper">
<dees-dataview-codebox proglang="typescript">
import * as text from './hello'; const hiThere = 'nice'; const myFunction = async () => {
console.log('nice one'); }
</dees-dataview-codebox>
</div>`

View File

@ -0,0 +1,213 @@
import { demoFunc } from './dees-dataview-codebox.demo.js';
import {
DeesElement,
html,
customElement,
type TemplateResult,
property,
state,
} from '@design.estate/dees-element';
import hlight from 'highlight.js';
import * as smartstring from '@push.rocks/smartstring';
import * as domtools from '@design.estate/dees-domtools';
declare global {
interface HTMLElementTagNameMap {
'dees-dataview-codebox': DeesDataviewCodebox;
}
}
@customElement('dees-dataview-codebox')
export class DeesDataviewCodebox extends DeesElement {
public static demo = demoFunc;
@property()
public progLang: string = 'typescript';
@property({
type: String,
reflect: true,
})
public codeToDisplay: string = '';
constructor() {
super();
}
render(): TemplateResult {
return html`
${domtools.elementBasic.styles}
<style>
:host {
position: relative;
display: block;
text-align: left;
font-size: 16px;
}
.mainbox {
position: relative;
color: ${this.goBright ? '#333333' : '#ffffff'};
border-top: 1px solid ${this.goBright ? '#ffffff' : '#333333'};
box-shadow: 0px 0px 5px ${this.goBright ? 'rgba(0,0,0,0.1)' : 'rgba(0,0,0,0.5)'};
background: ${this.goBright ? '#ffffff' : '#191919'};
border-radius: 16px;
overflow: hidden;
}
.appbar {
height: 24px;
background: #161616;
border-bottom: 1px solid #222222;
font-size: 12px;
color: #CCC;
font-family: 'Hubot Sans', 'monospace';
line-height: 24px;
}
.appbar .fileName {
text-align: center;
}
.bottomBar {
height: 24px;
background: #161616;
border-top: 1px solid #222222;
font-size: 12px;
color: #CCC;
font-family: 'Hubot Sans', 'monospace';
line-height: 24px;
}
.languageLabel {
color: #fff;
font-size: 12px;
line-height: 24px;
z-index: 10;
background: #6596ff20;
display: inline-block;
position: absolute;
bottom: 0px;
right: 0px;
padding: 0px 16px 0px 8px;
}
.hljs-keyword {
color: #ff65ec;
}
.codegrid {
display: grid;
grid-template-columns: 50px auto;
overflow: hidden;
}
.lineNumbers {
color: ${this.goBright ? '#acacac' : '#666666'};
padding: 30px 16px 0px 0px;
text-align: right;
border-right: 1px solid ${this.goBright ? '#eaeaea' : '#222222'};
}
.lineCounter:last-child {
opacity: 50%;
}
pre {
overflow-x: auto;
margin: 0px;
padding: 30px 40px;
}
code {
font-weight: ${this.goBright ? '400' : '300'};
padding: 0px;
margin: 0px;
}
code,
code *,
.lineNumbers {
line-height: 1.4em;
font-weight: 200;
font-family: 'Intel One Mono', 'monospace';
}
.hljs-string {
color: #ffa465;
}
.hljs-built_in {
color: #65ff6a;
}
.hljs-function {
color: ${this.goBright ? '#2765DF' : '#6596ff'};
}
.hljs-params {
color: ${this.goBright ? '#3DB420' : '#65d5ff'};
}
.hljs-comment {
color: ${this.goBright ? '#EF9300' : '#ffd765'};
}
</style>
<div class="mainbox">
<div class="appbar">
<div class="fileName">index.ts</div>
</div>
<div class="codegrid">
<div class="lineNumbers">
${(() => {
let lineCounter = 0;
return this.codeToDisplay.split('\n').map((lineArg) => {
lineCounter++;
return html`<div class="lineCounter">${lineCounter}</div>`;
});
})()}
</div>
<pre><code></code></pre>
</div>
<div class="bottomBar">
Spaces: 2
<div class="languageLabel">${this.progLang}</div>
</div>
</div>
`;
}
@state()
private codeToDisplayStore = '';
public async updated(_changedProperties) {
super.updated(_changedProperties);
console.log('highlighting now');
console.log(this.childNodes);
const slottedCodeNodes: Text[] = [];
this.childNodes.forEach((childNode) => {
if (childNode.nodeName === '#text') {
slottedCodeNodes.push(childNode as Text);
}
});
if (this.codeToDisplay && this.codeToDisplay !== this.codeToDisplayStore) {
this.codeToDisplayStore = smartstring.indent.normalize(this.codeToDisplay).trimStart();
}
if (slottedCodeNodes[0] && slottedCodeNodes[0].wholeText && !this.codeToDisplay) {
this.codeToDisplayStore = smartstring.indent
.normalize(slottedCodeNodes[0].wholeText)
.trimStart();
this.codeToDisplay = this.codeToDisplayStore;
}
await domtools.plugins.smartdelay.delayFor(0);
const localCodeNode = this.shadowRoot.querySelector('code');
const html = hlight.highlight(this.codeToDisplayStore, {
language: this.progLang,
ignoreIllegals: true,
});
localCodeNode.innerHTML = html.value;
}
}

View File

@ -0,0 +1,39 @@
import { html } from '@design.estate/dees-element';
import * as tsclass from '@tsclass/tsclass';
export const demoFunc = () => html`<dees-dataview-statusobject
.statusObject=${{
id: '1',
name: 'Demo Item',
combinedStatus: 'partly_ok',
combinedStatusText: 'partly_ok',
details: [
{
name: 'Detail 1',
value: 'Value 1',
status: 'ok',
statusText: 'OK',
},
{
name: 'Detail 2',
value: 'Value 2',
status: 'partly_ok',
statusText: 'partly_ok',
},
{
name: 'Detail 3',
value: 'Value 3',
status: 'not_ok',
statusText: 'not_ok',
},
{
name: 'Detail 4',
value:
'Value 4 jhdkfjhalskdfjhfdjskalsdkfjhfdjskalskdjfhjdkslaksjdhfjdkslaskdfjhfjdkslaskdjfhjdskalskdjhfdjskalskdjfhdjskl',
status: 'ok',
statusText: 'OK',
},
],
} as tsclass.code.IStatusObject}
>
</dees-dataview-statusobject>`;

View File

@ -0,0 +1,139 @@
import { demoFunc } from './dees-dataview-statusobject.demo.js';
import {
DeesElement,
html,
customElement,
type TemplateResult,
property,
state,
cssManager,
css,
type CSSResult,
} from '@design.estate/dees-element';
import * as tsclass from '@tsclass/tsclass';
declare global {
interface HTMLElementTagNameMap {
'dees-dataview-statusobject': DeesDataviewStatusobject;
}
}
@customElement('dees-dataview-statusobject')
export class DeesDataviewStatusobject extends DeesElement {
public static demo = demoFunc;
@property({ type: Object }) statusObject: tsclass.code.IStatusObject;
public static styles = [
cssManager.defaultStyles,
css`
.mainbox {
border-radius: 3px;
background: ${cssManager.bdTheme('#fff', '#1b1b1b')};
box-shadow: 0px 1px 3px #00000030;
min-height: 48px;
color: ${cssManager.bdTheme('#000', '#fff')};
}
.heading {
display: grid;
align-items: center;
grid-template-columns: 40px auto 120px;
}
h1 {
display: block;
margin: 0px;
padding: 0px;
height: 48px;
text-transform: uppercase;
font-size: 12px;
line-height: 48px;
}
.statusdot {
height: 8px;
width: 8px;
border-radius: 6px;
background: grey;
margin: auto;
}
.copyMain {
cursor: pointer;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
border: 1px solid ${cssManager.bdTheme('#999', '#444')};
text-align: center;
padding: 4px;
border-radius: 3px;
margin-right: 16px;
color: #ffffff80
}
.statusdot.ok {
background: green;
}
.statusdot.not_ok{
background: red;
}
.statusdot.partly_ok {
background: orange;
}
.detail {
minheight: 60px;
align-items: center;
display: grid;
grid-template-columns: 40px auto;
border-top: 1px dotted ${cssManager.bdTheme('#999', '#282828')};
}
.detail .detailsText {
padding-top: 8px;
padding-bottom: 8px;
padding-right: 8px;
word-break: break-all;
}
.detail .detailsText .label {
font-size: 12px;
color: #ffffff80
}
.detail .detailsText .value {
font-size: 14px;
font-family: 'Intel One Mono';
}
`,
];
render(): TemplateResult {
return html`
<div class="mainbox">
<div class="heading">
<div class="statusdot ${this.statusObject?.combinedStatus}"></div>
<h1>${this.statusObject?.name || 'no status object assigned'}</h1>
<div class="copyMain">Copy as JSON</div>
</div>
${this.statusObject?.details?.map((detailArg) => {
return html`
<div class="detail">
<div class="statusdot ${detailArg.status}"></div>
<div class="detailsText">
<div class="label">${detailArg.name}</div>
<div class="value">${detailArg.value}</div>
</div>
</div>
`;
})}
</div>
`;
}
async firstUpdated() {}
}

View File

@ -5,7 +5,8 @@ import {
css,
cssManager,
property,
} from '@designestate/dees-element';
type CSSResult,
} from '@design.estate/dees-element';
import { DeesForm } from './dees-form.js';
declare global {
@ -20,6 +21,7 @@ export class DeesFormSubmit extends DeesElement {
@property({
type: Boolean,
reflect: true,
})
public disabled = false;
@ -29,7 +31,7 @@ export class DeesFormSubmit extends DeesElement {
public text: string;
@property({
type: String
type: String,
})
public status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
@ -41,7 +43,12 @@ export class DeesFormSubmit extends DeesElement {
public render() {
return html`
<dees-button status=${this.status} @click=${this.submit} .disabled=${this.disabled} .text=${this.text ? this.text : this.textContent}>
<dees-button
status=${this.status}
@click=${this.submit}
.disabled=${this.disabled}
.text=${this.text ? this.text : this.textContent}
>
</dees-button>
`;
}
@ -53,4 +60,12 @@ export class DeesFormSubmit extends DeesElement {
const parentElement: DeesForm = this.parentElement as DeesForm;
parentElement.gatherAndDispatch();
}
public async focus() {
const domtools = await this.domtoolsPromise;
if (!this.disabled) {
domtools.convenience.smartdelay.delayFor(0);
this.submit();
}
}
}

View File

@ -1,5 +1,5 @@
import { customElement, html, TemplateResult, DeesElement } from '@designestate/dees-element';
import * as domtools from '@designestate/dees-domtools';
import { customElement, html, type TemplateResult, DeesElement, type CSSResult, } from '@design.estate/dees-element';
import * as domtools from '@design.estate/dees-domtools';
import { DeesInputCheckbox } from './dees-input-checkbox.js';
import { DeesInputText } from './dees-input-text.js';
@ -7,9 +7,15 @@ import { DeesInputQuantitySelector } from './dees-input-quantityselector.js';
import { DeesInputRadio } from './dees-input-radio.js';
import { DeesFormSubmit } from './dees-form-submit.js';
export type TFormElement = Array<
DeesInputCheckbox | DeesInputText | DeesInputQuantitySelector | DeesInputRadio
>;
// Unified set for form input types
const FORM_INPUT_TYPES = [
DeesInputCheckbox,
DeesInputText,
DeesInputQuantitySelector,
DeesInputRadio
];
export type TFormInputElement = DeesInputCheckbox | DeesInputText | DeesInputQuantitySelector | DeesInputRadio;
declare global {
interface HTMLElementTagNameMap {
@ -19,6 +25,7 @@ declare global {
@customElement('dees-form')
export class DeesForm extends DeesElement {
public static demo = () => html`
<dees-form
style="display: block; margin:auto; max-width: 500px; padding: 20px"
@ -31,17 +38,14 @@ export class DeesForm extends DeesElement {
>
<dees-input-text .required="${true}" key="hello1" label="a text"></dees-input-text>
<dees-input-text .required="${true}" key="hello2" label="also a text"></dees-input-text>
<dees-input-checkbox
.required="${true}"
key="hello3"
label="another text"
></dees-input-checkbox>
<dees-input-checkbox .required="${true}" key="hello3" label="another text"></dees-input-checkbox>
<dees-form-submit>Submit</dees-form-submit>
</dees-form>
`;
public name: string = 'myform';
public changeSubject = new domtools.rxjs.Subject();
public readyDeferred = domtools.plugins.smartpromise.defer();
public render(): TemplateResult {
return html`
@ -54,51 +58,39 @@ export class DeesForm extends DeesElement {
`;
}
public firstUpdated() {
const formChildren = this.getFormChildren();
this.checkRequiredStatus();
public async firstUpdated() {
const formChildren = this.getFormElements();
this.updateRequiredStatus();
for (const child of formChildren) {
child.changeSubject.subscribe(async (elementArg: TFormElement) => {
const valueObject = await this.gatherData();
child.changeSubject.subscribe(async () => {
const valueObject = await this.collectFormData();
this.changeSubject.next(valueObject);
console.log(valueObject);
this.checkRequiredStatus();
this.updateRequiredStatus();
});
}
await this.addBehaviours();
this.readyDeferred.resolve();
}
public getFormChildren() {
const children: Array<DeesElement> = this.children as any;
const formChildren: TFormElement = [];
for (const child of children) {
if (
child instanceof DeesInputCheckbox ||
child instanceof DeesInputText ||
child instanceof DeesInputQuantitySelector
) {
formChildren.push(child);
}
}
return formChildren;
public getFormElements(): Array<TFormInputElement> {
return (Array.from(this.children)).filter(child =>
FORM_INPUT_TYPES.includes(child.constructor as any)
) as unknown as TFormInputElement[];
}
public getSubmitButton() {
const children: Array<DeesElement> = this.children as any;
let submitButton: DeesFormSubmit;
for (const childArg of children) {
if (childArg instanceof DeesFormSubmit) {
submitButton = childArg;
}
}
return submitButton;
public getSubmitButton(): DeesFormSubmit | undefined {
return Array.from(this.children).find(child =>
child instanceof DeesFormSubmit
) as DeesFormSubmit;
}
public async checkRequiredStatus() {
public async updateRequiredStatus() {
console.log('checking the required status.');
let requiredOK = true;
for (const childArg of this.getFormChildren()) {
for (const childArg of this.getFormElements()) {
if (childArg.required && !childArg.value) {
requiredOK = false;
}
@ -108,17 +100,20 @@ export class DeesForm extends DeesElement {
}
}
public async gatherData() {
const children = this.getFormChildren();
public async collectFormData() {
const children = this.getFormElements();
const valueObject: { [key: string]: string | number | boolean } = {};
for (const child of children) {
if (!child.key) {
console.log(`form element with label "${child.label}" has no key. skipping.`);
}
valueObject[child.key] = child.value;
}
return valueObject;
}
public async gatherAndDispatch() {
const valueObject = await this.gatherData();
const valueObject = await this.collectFormData();
const formDataEvent = new CustomEvent('formData', {
detail: {
data: valueObject,
@ -134,7 +129,7 @@ export class DeesForm extends DeesElement {
visualStateArg: 'normal' | 'pending' | 'error' | 'success',
textStateArg: string
) {
const inputChildren = this.getFormChildren();
const inputChildren = this.getFormElements();
const submitButton = this.getSubmitButton();
switch (visualStateArg) {
@ -170,4 +165,36 @@ export class DeesForm extends DeesElement {
submitButton.text = textStateArg;
}
/**
* resets the form
*/
reset() {
const inputChildren = this.getFormElements();
const submitButton = this.getSubmitButton();
for (const inputChild of inputChildren) {
inputChild.value = null;
}
this.setStatus('normal', 'Submit');
}
public async addBehaviours() {
// Use event delegation
this.addEventListener('keydown', (event: KeyboardEvent) => {
const target = event.target as DeesElement;
if (!FORM_INPUT_TYPES.includes(target.constructor as any)) return;
if (event.key === 'Enter') {
const children = this.getFormElements();
const currentIndex = children.indexOf(target as any);
if (currentIndex < children.length - 1) {
children[currentIndex + 1].focus();
} else {
target.blur();
this.getSubmitButton()?.focus();
}
}
});
}
}

View File

@ -5,11 +5,12 @@ import {
customElement,
cssManager,
css,
} from '@designestate/dees-element';
type CSSResult,
} from '@design.estate/dees-element';
import * as domtools from '@designestate/dees-domtools';
import * as domtools from '@design.estate/dees-domtools';
import { icon, IconDefinition } from '@fortawesome/fontawesome-svg-core';
import { icon, type IconDefinition } from '@fortawesome/fontawesome-svg-core';
import {
faFacebook,
faGoogle,
@ -121,6 +122,8 @@ export const faIcons = {
users: faUsersSolid,
};
export type TIconKey = keyof typeof faIcons;
declare global {
interface HTMLElementTagNameMap {
'dees-icon': DeesIcon;

View File

@ -1,13 +1,14 @@
import {
customElement,
DeesElement,
TemplateResult,
type TemplateResult,
property,
html,
css,
cssManager
} from '@designestate/dees-element';
import * as domtools from '@designestate/dees-domtools';
cssManager,
type CSSResult,
} from '@design.estate/dees-element';
import * as domtools from '@design.estate/dees-domtools';
declare global {
interface HTMLElementTagNameMap {
@ -25,6 +26,7 @@ export class DeesInputCheckbox extends DeesElement {
@property({
type: String,
reflect: true,
})
public key: string;
@ -143,7 +145,7 @@ export class DeesInputCheckbox extends DeesElement {
}
</style>
<div class="maincontainer" @click="${this.toggleSelected}">
<div class="checkbox ${this.value ? 'selected' : ''} ${this.disabled ? 'disabled' : ''}">
<div class="checkbox ${this.value ? 'selected' : ''} ${this.disabled ? 'disabled' : ''}" tabindex="0">
${this.value
? html`
<span class="checkmark">
@ -171,4 +173,11 @@ export class DeesInputCheckbox extends DeesElement {
);
this.changeSubject.next(this);
}
public focus(): void {
const checkboxDiv = this.shadowRoot.querySelector('.checkbox');
if (checkboxDiv) {
(checkboxDiv as any).focus();
}
}
}

View File

@ -1,5 +1,5 @@
import { customElement, DeesElement, TemplateResult, property, html, css, cssManager } from '@designestate/dees-element';
import * as domtools from '@designestate/dees-domtools';
import { customElement, DeesElement, type TemplateResult, property, html, css, cssManager, type CSSResult, } from '@design.estate/dees-element';
import * as domtools from '@design.estate/dees-domtools';
declare global {
interface HTMLElementTagNameMap {
@ -22,7 +22,10 @@ export class DeesInputDropdown extends DeesElement {
// INSTANCE
public changeSubject = new domtools.rxjs.Subject();
@property()
@property({
type: String,
reflect: true,
})
public label: string = 'Label';
@property()
@ -77,12 +80,22 @@ export class DeesInputDropdown extends DeesElement {
max-width: 420px;
height: 40px;
line-height: 40px;
border: 1px solid #CCC;
padding: 0px 8px;
z-index: 0px;
background: ${cssManager.bdTheme('#ffffff', '#333333')};
box-shadow: ${cssManager.bdTheme('0px 1px 4px rgba(0,0,0,0.3)', 'none')};
border-radius: 3px;
border-top: 1px solid #CCCCCC00;
border-bottom: 1px solid #66666600;
}
.selectedBox.show {
border-top: 1px solid ${cssManager.bdTheme('#ffffff', '#666666')};
border-bottom: 1px solid ${cssManager.bdTheme('#fafafa', '#222222')};
}
.selectionBox {
will-change:transform;
pointer-events: none;
cursor: pointer;
transition: all 0.2s ease;
@ -91,27 +104,31 @@ export class DeesInputDropdown extends DeesElement {
background: ${cssManager.bdTheme('#ffffff', '#222222')};
max-width: 420px;
box-shadow: 0px 0px 5px rgba(0,0,0,0.2);
height: 40px;
min-height: 40px;
margin-top: -40px;
z-index: 100;
border-radius: 3px;
padding: 4px;
transform: scale(0.99,0.99);
}
.selectionBox.show {
pointer-events: all;
opacity: 1;
min-height: 160px;
transform: scale(1,1);
}
.option {
transition: all 0.1s;
line-height: 40px;
padding: 0px 4px;
border-radius: 3px;
}
.option:hover {
background: ${cssManager.bdTheme('#fafafa', '#444')};;
color: #fff;
padding-left: 8px;
background: #0277bd;
}
`
]
@ -123,7 +140,7 @@ export class DeesInputDropdown extends DeesElement {
</style>
<div class="maincontainer">
<div class="selectedBox" @click="${event => {this.toggleSelectionBox();}}">
<div class="selectedBox show" @click="${event => {this.toggleSelectionBox();}}">
${this.selectedOption?.option}
</div>
<div class="selectionBox">
@ -153,6 +170,7 @@ export class DeesInputDropdown extends DeesElement {
}
public toggleSelectionBox() {
this.shadowRoot.querySelector('.selectedBox').classList.toggle('show');
this.shadowRoot.querySelector('.selectionBox').classList.toggle('show');
}
}

View File

@ -1,15 +1,16 @@
import {
customElement,
DeesElement,
TemplateResult,
type TemplateResult,
property,
html,
css,
unsafeCSS,
cssManager,
} from '@designestate/dees-element';
type CSSResult,
} from '@design.estate/dees-element';
import * as domtools from '@designestate/dees-domtools';
import * as domtools from '@design.estate/dees-domtools';
declare global {
interface HTMLElementTagNameMap {
@ -31,6 +32,7 @@ export class DeesInputFileupload extends DeesElement {
@property({
type: String,
reflect: true,
})
public key: string;
@ -122,7 +124,7 @@ export class DeesInputFileupload extends DeesElement {
border-bottom: 1px dashed #444;
color: ${cssManager.bdTheme('#666', '#ccc')};
padding: 8px;
font-family: 'Inter';
font-family: 'Mona Sans', 'Inter', sans-serif;
}
.uploadButton:hover .uploadCandidate {
@ -154,7 +156,10 @@ export class DeesInputFileupload extends DeesElement {
public async openFileSelector() {
const inputFile: HTMLInputElement = this.shadowRoot.querySelector('input[type="file"]');
inputFile.click();
this.state = 'idle';
this.buttonText = 'Upload more files...';
}
public async updateValue(eventArg: Event) {
const target: any = eventArg.target;
@ -163,6 +168,20 @@ export class DeesInputFileupload extends DeesElement {
}
public firstUpdated() {
const inputFile: HTMLInputElement = this.shadowRoot.querySelector('input[type="file"]');
inputFile.addEventListener('change', (event: Event) => {
const target = event.target as HTMLInputElement;
for (const file of Array.from(target.files)) {
this.value.push(file);
}
this.requestUpdate();
console.log(`Got ${this.value.length} files!`);
// Reset the input value to allow selecting the same file again if needed
target.value = '';
});
// lets handle drag and drop
const dropArea = this.shadowRoot.querySelector('.uploadButton');
const handlerFunction = (eventArg: DragEvent) => {
eventArg.preventDefault();

View File

@ -1,5 +1,5 @@
import { customElement, property, html, TemplateResult, DeesElement } from '@designestate/dees-element';
import * as domtools from '@designestate/dees-domtools';
import { customElement, property, html, type TemplateResult, DeesElement, type CSSResult, } from '@design.estate/dees-element';
import * as domtools from '@design.estate/dees-domtools';
declare global {
interface HTMLElementTagNameMap {
@ -15,6 +15,12 @@ export class DeesInputQuantitySelector extends DeesElement {
public changeSubject = new domtools.rxjs.Subject();
@property()
public label: string = 'Label';
@property({
type: String,
reflect: true,
})
public key: string;
@property({

View File

@ -1,5 +1,5 @@
import {customElement, DeesElement, TemplateResult, property, html} from '@designestate/dees-element';
import * as domtools from '@designestate/dees-domtools';
import {customElement, DeesElement, type TemplateResult, property, html, type CSSResult,} from '@design.estate/dees-element';
import * as domtools from '@design.estate/dees-domtools';
declare global {
interface HTMLElementTagNameMap {
@ -14,7 +14,10 @@ export class DeesInputRadio extends DeesElement {
// INSTANCE
public changeSubject = new domtools.rxjs.Subject();
@property()
@property({
type: String,
reflect: true,
})
public key: string;
@property()

View File

@ -1,5 +1,5 @@
import {customElement, DeesElement, TemplateResult, property, html, cssManager} from '@designestate/dees-element';
import * as domtools from '@designestate/dees-domtools';
import {customElement, DeesElement, type TemplateResult, property, html, cssManager, type CSSResult,} from '@design.estate/dees-element';
import * as domtools from '@design.estate/dees-domtools';
declare global {
interface HTMLElementTagNameMap {
@ -10,12 +10,13 @@ declare global {
@customElement('dees-input-text')
export class DeesInputText extends DeesElement {
public static demo = () => html`
<dees-input-text .label=${'this is a label'}></dees-input-text>
<dees-input-text .label=${'this is a label'} .value=${'test'}></dees-input-text>
<dees-input-text .isPasswordBool=${true}></dees-input-text>
`;
// INSTANCE
public changeSubject = new domtools.rxjs.Subject();
public changeSubject = new domtools.rxjs.Subject<DeesInputText>();
public valueChangeSubject = new domtools.rxjs.Subject<string>();
@property({
type: String
@ -23,12 +24,14 @@ export class DeesInputText extends DeesElement {
public label: string;
@property({
type: String
type: String,
reflect: true,
})
public key: string;
@property({
type: String
type: String,
reflect: true,
})
public value: string = '';
@ -126,7 +129,7 @@ export class DeesInputText extends DeesElement {
</style>
<div class="maincontainer">
${this.label ? html`<div class="label">${this.label}</div>` : html``}
<input type="${this.isPasswordBool && !this.showPasswordBool ? 'password' : 'text'}" value=${this.value} @input="${this.updateValue}" .disabled=${this.disabled} />
<input type="${this.isPasswordBool && !this.showPasswordBool ? 'password' : 'text'}" .value=${this.value} @input="${this.updateValue}" .disabled=${this.disabled} />
${this.isPasswordBool ? html`
<div class="showPassword" @click=${this.togglePasswordView}>
<dees-icon .iconFA=${this.showPasswordBool ? 'eye' : 'eyeSlash'}></dees-icon>
@ -140,6 +143,7 @@ export class DeesInputText extends DeesElement {
const target: any = eventArg.target;
this.value = target.value;
this.changeSubject.next(this);
this.valueChangeSubject.next(this.value);
}
public async freeze() {
@ -155,4 +159,14 @@ export class DeesInputText extends DeesElement {
this.showPasswordBool = !this.showPasswordBool;
console.log(`this.showPasswordBool is: ${this.showPasswordBool}`)
}
public async focus() {
const textInput = this.shadowRoot.querySelector('input');
textInput.focus();
}
public async blur() {
const textInput = this.shadowRoot.querySelector('input');
textInput.blur();
}
}

View File

@ -2,34 +2,29 @@ import * as plugins from './plugins.js';
import {
cssManager,
css,
type CSSResult,
customElement,
DeesElement,
domtools,
html,
property,
} from '@designestate/dees-element';
} from '@design.estate/dees-element';
import { DeesWindowLayer } from './dees-windowlayer.js';
@customElement('dees-mobilenavigation')
export class DeesMobilenavigation extends DeesElement {
// STATIC
public static demo = () => html`
<dees-mobilenavigation
.menuItems="${[
<dees-button @click=${() => {
DeesMobilenavigation.createAndInit([
{
name: 'hello1',
action: async () => {},
name: 'Test',
action: () => {
alert('test');
},
},
{
name: 'hello2',
action: async () => {},
},
{
name: 'hello3',
action: async () => {},
},
]}"
></dees-mobilenavigation>
]);
}}></dees-button>
`;
private static singletonRef: DeesMobilenavigation;
@ -56,7 +51,7 @@ export class DeesMobilenavigation extends DeesElement {
})
public menuItems: plugins.tsclass.website.IMenuItem[] = [];
readyDeferred = domtools.plugins.smartpromise.defer();
readyDeferred: plugins.smartpromise.Deferred<any> = domtools.plugins.smartpromise.defer();
constructor() {
super();
@ -120,7 +115,7 @@ export class DeesMobilenavigation extends DeesElement {
text-align: left;
font-size: 24px;
padding: 8px 0px;
font-family: Inter;
font-family: 'Mona Sans', 'Inter', sans-serif;
font-weight: 300;
border-bottom: 1px dashed #444;
margin-top: 16px;

View File

@ -1,8 +1,8 @@
import { DeesElement, property, html, customElement, domtools, TemplateResult } from '@designestate/dees-element';
import { DeesElement, property, html, customElement, domtools, type TemplateResult, type CSSResult, } from '@design.estate/dees-element';
import { Deferred } from '@pushrocks/smartpromise';
import { Deferred } from '@push.rocks/smartpromise';
import type pdfjsTypes from 'pdfjs-dist';
// import type pdfjsTypes from 'pdfjs-dist';
declare global {
interface HTMLElementTagNameMap {
@ -32,7 +32,7 @@ export class DeesPdf extends DeesElement {
return html`
<style>
:host {
font-family: 'Inter', sans-serif;
font-family: 'Mona Sans', 'Inter', sans-serif;
display: block;
box-sizing: border-box;
max-width: 800px;
@ -51,7 +51,7 @@ export class DeesPdf extends DeesElement {
}
public static pdfJsReady: Promise<any>;
public static pdfjsLib: typeof pdfjsTypes;
public static pdfjsLib: any // typeof pdfjsTypes;
public async connectedCallback() {
super.connectedCallback();
if (!DeesPdf.pdfJsReady) {

View File

@ -0,0 +1,5 @@
import { html } from '@design.estate/dees-element';
export const demoFunc = () => html`
<dees-simple-appdash>Hello there</dees-simple-appdash>
`;

View File

@ -0,0 +1,74 @@
import { demoFunc } from './dees-simple-appdash.demo.js';
import {
customElement,
html,
DeesElement,
property,
type TemplateResult,
cssManager,
css,
unsafeCSS,
type CSSResult,
state,
} from '@design.estate/dees-element';
declare global {
interface HTMLElementTagNameMap {
'dees-simple-appdash': DeesSimpleAppDash;
}
}
@customElement('dees-simple-appdash')
export class DeesSimpleAppDash extends DeesElement {
// STATIC
public static demo = demoFunc;
// INSTANCE
@property()
public title = 'Dees Simple Login';
public static styles = [
cssManager.defaultStyles,
css`
:host {
color: ${cssManager.bdTheme('#333', '#fff')};
user-select: none;
}
.appbar {
position: absolute;
top: 0;
height: 40px;
width: 100%;
background: ${cssManager.bdTheme('#eeeeeb', '#000')};
border-bottom: 1px solid ${cssManager.bdTheme('#ccc', '#333')};
font-size: 14px;
line-height: 40px;
font-family: 'Hubot Sans', 'Inter', sans-serif;
padding: 0px 16px;
}
.appcontent {
position: absolute;
top: 40px;
bottom: 0;
width: 100%;
background: ${cssManager.bdTheme('#eeeeeb', '#000')};
}
`,
];
public render(): TemplateResult {
return html`
<div class="appbar">
configvault v1.2.3
</div>
<div class="appcontent">
<slot></slot>
</div>
`;
}
public async firstUpdated(_changedProperties): Promise<void> {
const domtools = await this.domtoolsPromise;
super.firstUpdated(_changedProperties);
}
}

View File

@ -0,0 +1,3 @@
import { html } from '@design.estate/dees-element';
export const demoFunc = () => html` <dees-simple-login> Hello there </dees-simple-login> `;

View File

@ -0,0 +1,120 @@
import { demoFunc } from './dees-simple-login.demo.js';
import {
customElement,
html,
DeesElement,
property,
type TemplateResult,
cssManager,
css,
unsafeCSS,
type CSSResult,
state,
} from '@design.estate/dees-element';
declare global {
interface HTMLElementTagNameMap {
'dees-simple-login': DeesSimpleLogin;
}
}
@customElement('dees-simple-login')
export class DeesSimpleLogin extends DeesElement {
// STATIC
public static demo = demoFunc
// INSTANCE
@property()
public title = 'Dees Simple Login';
public static styles = [
cssManager.defaultStyles,
css`
:host {
color: ${cssManager.bdTheme('#333', '#fff')};
user-select: none;
}
.loginContainer {
position: absolute;
display: flex;
justify-content: center; /* aligns horizontally */
align-items: center; /* aligns vertically */
width: 100%;
height: 100%;
}
.login {
min-width: 320px;
min-height: 100px;
background: ${cssManager.bdTheme('#eeeeeb', '#111')};
box-shadow: ${cssManager.bdTheme('0px 1px 4px rgba(0,0,0,0.3)', 'none')};
border-radius: 3px;
padding: 24px;
transition: opacity 0.3s, transform 0.3s;
}
.header {
text-align: center;
}
.slotContainer {
opacity:0;
transition: opacity 0.3s, transform 0.3s;
pointer-events: none;
}
`,
];
public render(): TemplateResult {
return html`
<div class="loginContainer">
<div class="login">
<dees-form>
<div class="header">Login to ${this.title}</div>
<dees-input-text key="username" label="username" required></dees-input-text>
<dees-input-text key="password" label="password" isPasswordBool required></dees-input-text>
<dees-form-submit disabled>login</dees-form-submit>
</dees-form>
</div>
</div>
<div class="slotContainer">
<slot></slot>
</div>
`;
}
public async firstUpdated(_changedProperties): Promise<void> {
const domtools = await this.domtoolsPromise;
super.firstUpdated(_changedProperties);
const form = this.shadowRoot.querySelector('dees-form');
await form.readyDeferred.promise;
const username = this.shadowRoot.querySelector('dees-input-text[label="username"]');
const password = this.shadowRoot.querySelector('dees-input-text[label="password"]');
const submit = this.shadowRoot.querySelector('dees-form-submit');
form.addEventListener('formData', (event: CustomEvent) => {
this.dispatchEvent(new CustomEvent('login', { detail: event.detail }));
// this.switchToSlottedContent();
});
}
/**
* allows switching to slotted content
*/
public async switchToSlottedContent() {
const domtools = await this.domtoolsPromise;
const loginDiv: HTMLDivElement = this.shadowRoot.querySelector('.login');
const loginContainerDiv: HTMLDivElement = this.shadowRoot.querySelector('.loginContainer');
const slotContainerDiv: HTMLDivElement = this.shadowRoot.querySelector('.slotContainer');
loginDiv.style.opacity = '0';
loginDiv.style.transform = 'translateY(20px)';
loginContainerDiv.style.pointerEvents = 'none';
slotContainerDiv.style.transform = 'translateY(20px)';
await domtools.convenience.smartdelay.delayFor(300);
slotContainerDiv.style.opacity = '1';
slotContainerDiv.style.transform = 'translateY(0px)';
await domtools.convenience.smartdelay.delayFor(300);
slotContainerDiv.style.pointerEvents = 'all';
}
}

View File

@ -3,13 +3,14 @@ import {
html,
DeesElement,
property,
TemplateResult,
type TemplateResult,
cssManager,
css,
type CSSResult,
unsafeCSS,
} from '@designestate/dees-element';
} from '@design.estate/dees-element';
import * as domtools from '@designestate/dees-domtools';
import * as domtools from '@design.estate/dees-domtools';
declare global {
interface HTMLElementTagNameMap {

View File

@ -3,13 +3,14 @@ import {
html,
DeesElement,
property,
TemplateResult,
type TemplateResult,
cssManager,
css,
type CSSResult,
unsafeCSS,
} from '@designestate/dees-element';
} from '@design.estate/dees-element';
import * as domtools from '@designestate/dees-domtools';
import * as domtools from '@design.estate/dees-domtools';
declare global {
interface HTMLElementTagNameMap {

View File

@ -4,12 +4,13 @@ import {
html,
css,
unsafeCSS,
type CSSResult,
cssManager,
property,
TemplateResult,
} from '@designestate/dees-element';
type TemplateResult,
} from '@design.estate/dees-element';
import * as domtools from '@designestate/dees-domtools';
import * as domtools from '@design.estate/dees-domtools';
export interface IStep {
title: string;
@ -48,15 +49,15 @@ export class DeesStepper extends DeesElement {
`,
validationFunc: async (stepperArg, elementArg) => {
const deesForm = elementArg.querySelector('dees-form');
deesForm.addEventListener('formData', eventArg => {
deesForm.addEventListener('formData', (eventArg) => {
stepperArg.goNext();
})
}
});
},
},
{
title: 'Whats your mobile number?',
content: html``,
}
},
] as IStep[]}
></dees-stepper>
`;
@ -153,7 +154,7 @@ export class DeesStepper extends DeesElement {
.step .title {
text-align: center;
padding-top: 50px;
font-family: Inter;
font-family: 'Mona Sans', 'Inter', sans-serif;
font-size: 25px;
font-weight: 300;
}
@ -195,22 +196,26 @@ export class DeesStepper extends DeesElement {
return this.steps.findIndex((stepArg2) => stepArg === stepArg2);
};
public firstUpdated() {
public async firstUpdated() {
await this.domtoolsPromise;
await this.domtools.convenience.smartdelay.delayFor(0);
this.selectedStep = this.steps[0];
this.setScrollStatus();
}
public updated() {
public async updated() {
this.setScrollStatus();
}
public scroller: typeof domtools.plugins.SweetScroll.prototype;
public async setScrollStatus() {
await domtools.plugins.smartdelay.delayFor(50);
const stepperContainer: HTMLElement = this.shadowRoot.querySelector('.stepperContainer');
const firstStepElement: HTMLElement = this.shadowRoot.querySelector('.step');
const selectedStepElement: HTMLElement = this.shadowRoot.querySelector('.selected');
if (!selectedStepElement) {
return;
}
if (!stepperContainer.style.paddingTop) {
stepperContainer.style.paddingTop = `${
stepperContainer.offsetHeight / 2 - selectedStepElement.offsetHeight / 2

View File

@ -0,0 +1,113 @@
import { type ITableAction } from './dees-table.js';
import * as plugins from './plugins.js';
import { html } from '@design.estate/dees-element';
export const demoFunc = () => html`
<style>
.demoWrapper {
box-sizing: border-box;
position: absolute;
width: 100%;
height: 100%;
padding: 20px;
background: #000000;
}
</style>
<div class="demoWrapper">
<dees-table
heading1="Current Account Statement"
heading2="Bunq - Payment Account 2 - April 2021"
.data=${[
{
date: '2021-04-01',
amount: '2464.65 €',
description: 'Printing Paper (Office Supplies) - STAPLES BREMEN',
},
{
date: '2021-04-02',
amount: '165.65 €',
description: 'Logitech Mouse (Hardware) - logi.com OnlineShop',
},
{
date: '2021-04-03',
amount: '2999,00 €',
description: 'Macbook Pro 16inch (Hardware) - Apple.de OnlineShop',
},
{
date: '2021-04-01',
amount: '2464.65 €',
description: 'Office-Supplies - STAPLES BREMEN',
},
{
date: '2021-04-01',
amount: '2464.65 €',
description: 'Office-Supplies - STAPLES BREMEN',
},
]}
dataName="transactions"
.dataActions="${[
{
name: 'upload',
iconName: 'bell',
useTableBehaviour: 'upload',
type: ['inRow'],
actionFunc: async (itemArg: any) => {
alert(itemArg.amount);
},
},
{
name: 'visibility',
iconName: 'copy',
type: ['inRow'],
useTableBehaviour: 'preview',
actionFunc: async (itemArg: any) => {},
},
{
name: 'create new',
iconName: 'instagram',
type: ['header'],
useTableBehaviour: 'preview',
actionFunc: async (itemArg: any) => {},
},
{
name: 'to gallery',
iconName: 'message',
type: ['footer'],
useTableBehaviour: 'preview',
actionFunc: async (itemArg: any) => {},
},
{
name: 'copy',
iconName: 'copySolid',
type: ['contextmenu', 'inRow'],
action: async () => {
return null;
},
},
{
name: 'edit (from demo)',
iconName: 'penToSquare',
type: ['contextmenu'],
action: async () => {
return null;
},
},
{
name: 'paste',
iconName: 'pasteSolid',
type: ['contextmenu'],
action: async () => {
return null;
},
},
] as ITableAction[]}"
.displayFunction=${(itemArg) => {
return {
...itemArg,
onlyDisplayProp: 'onlyDisplay',
};
}}
>This is a slotted Text</dees-table
>
</div>
`;

View File

@ -1,16 +1,23 @@
import * as plugins from './plugins.js';
import { demoFunc } from './dees-table.demo.js';
import {
customElement,
html,
DeesElement,
property,
TemplateResult,
type TemplateResult,
cssManager,
css,
unsafeCSS,
type CSSResult,
state,
} from '@designestate/dees-element';
resolveExec,
} from '@design.estate/dees-element';
import * as domtools from '@designestate/dees-domtools';
import { DeesContextmenu } from './dees-contextmenu.js';
import * as domtools from '@design.estate/dees-domtools';
import { type TIconKey } from './dees-icon.js';
declare global {
interface HTMLElementTagNameMap {
@ -18,75 +25,39 @@ declare global {
}
}
export interface IDataAction<T = any> {
// interfaces
export interface ITableAction<T = any> {
name: string;
iconName: string;
iconName: TIconKey;
/**
* the table behaviour to use for this action
* e.g. upload: allows to upload files to the table
*/
useTableBehaviour?: 'upload' | 'cancelUpload' | 'none';
/**
* the type of the action
*/
type: ('inRow' | 'contextmenu' | 'footer' | 'header' | 'preview' | 'keyCombination')[];
/**
* allows to check if the action is relevant for the given item
* @param itemArg
* @returns
*/
actionRelevancyCheckFunc?: (itemArg: T) => boolean;
/**
* the actual action function implementation
* @param itemArg
* @returns
*/
actionFunc: (itemArg: T) => Promise<any>;
}
export type TDisplayFunction<T = any> = (itemArg: T) => object;
// the table implementation
@customElement('dees-table')
export class DeesTable<T> extends DeesElement {
public static demo = () => html`
<style>
.demoWrapper {
box-sizing: border-box;
position: absolute;
width: 100%;
height: 100%;
padding: 60px;
background: #000000;
}
</style>
<div class="demoWrapper">
<dees-table
heading1="Current Account Statement"
heading2="Bunq - Payment Account 2 - April 2021"
.data=${[
{
date: '2021-04-01',
amount: '2464.65 €',
description: 'Printing Paper (Office Supplies) - STAPLES BREMEN',
},
{
date: '2021-04-02',
amount: '165.65 €',
description: 'Logitech Mouse (Hardware) - logi.com OnlineShop',
},
{
date: '2021-04-03',
amount: '2999,00 €',
description: 'Macbook Pro 16inch (Hardware) - Apple.de OnlineShop',
},
{
date: '2021-04-01',
amount: '2464.65 €',
description: 'Office-Supplies - STAPLES BREMEN',
},
{
date: '2021-04-01',
amount: '2464.65 €',
description: 'Office-Supplies - STAPLES BREMEN',
},
]}
.dataActions="${[{
name: 'upload',
iconName: 'upload',
useTableBehaviour: 'upload',
actionFunc: async (itemArg: any) => {
},
},{
name: 'visibility',
iconName: 'visibility',
useTableBehaviour: 'preview',
actionFunc: async (itemArg: any) => {
},
}] as IDataAction[]}"
>This is a slotted Text</dees-table>
</div>
`;
public static demo = demoFunc;
// INSTANCE
@property({
@ -104,26 +75,27 @@ export class DeesTable<T> extends DeesElement {
})
public data: T[] = [];
@property({
type: String,
reflect: true,
})
public dataName: string;
@property({
type: Array,
})
public dataActions: IDataAction[] = [];
public dataActions: ITableAction[] = [];
@property({
attribute: false,
})
public displayFunction: TDisplayFunction = (itemArg: T) => itemArg as any;
@property({
type: Object,
})
public selectedDataRow: T;
@property({
type: String,
})
public type: 'normal' | 'highlighted' | 'discreet' | 'big' = 'normal';
@property({
type: String,
})
public status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
public files: File[] = [];
public fileWeakMap = new WeakMap();
@ -136,9 +108,9 @@ export class DeesTable<T> extends DeesElement {
css`
.mainbox {
color: ${cssManager.bdTheme('#333', '#fff')};
font-family: 'Inter';
font-family: 'Mona Sans', 'Inter', sans-serif;
font-weight: 400;
font-size: 16px;
font-size: 14px;
padding: 16px;
display: block;
width: 100%;
@ -149,11 +121,49 @@ export class DeesTable<T> extends DeesElement {
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3);
overflow-x: auto;
}
.header {
display: flex;
justify-content: flex-end;
align-items: center;
}
.headingContainer {
}
.heading {
font-family: 'Hubot Sans', 'Inter', sans-serif;
}
.heading1 {
font-weight: 600;
}
.heading2 {
opacity: 0.6;
}
.headingSeparation {
margin-top: 7px;
border-bottom: 1px solid ${cssManager.bdTheme('#bcbcbc', '#bcbcbc')};
}
.headerActions {
margin-left: auto;
cursor: pointer;
}
.headerAction {
display: flex;
color: ${cssManager.bdTheme('#333', '#ccc')};
}
.headerAction:hover {
color: ${cssManager.bdTheme('#555', '#fff')};
}
.headerAction dees-icon {
margin-right: 8px;
}
table,
.noDataSet {
margin-top: 16px;
@ -185,7 +195,7 @@ export class DeesTable<T> extends DeesElement {
background: none;
}
tr.selected .innerCellContainer {
background: ${cssManager.bdTheme('#22222220', '#ffffff20')};
background: ${cssManager.bdTheme('#22222220', '#ffffff40')};
}
th {
text-transform: uppercase;
@ -227,14 +237,37 @@ export class DeesTable<T> extends DeesElement {
background: ${cssManager.bdTheme('#CCC', '#111')};
}
.tableStatistics {
padding: 4px 16px;
font-size: 12px;
.footer {
font-size: 14px;
color: ${cssManager.bdTheme('#111', '#ffffff90')};
background: ${cssManager.bdTheme('#eeeeeb', '#00000050')};
margin: 16px -16px -16px -16px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
display: flex;
}
.tableStatistics {
padding: 8px 16px;
}
.footerActions {
margin-left: auto;
}
.footerActions .footerAction {
cursor: pointer;
padding: 8px 16px;
display: flex;
}
.footerActions .footerAction:hover {
background: ${cssManager.bdTheme('#CCC', '#111')};
}
.footerActions dees-icon {
display: flex;
margin-right: 8px;
}
`,
];
@ -243,15 +276,44 @@ export class DeesTable<T> extends DeesElement {
return html`
<div class="mainbox">
<!-- the heading part -->
<div>${this.heading1}</div>
<div>${this.heading2}</div>
<div class="header">
<div class="headingContainer">
<div class="heading heading1">${this.heading1}</div>
<div class="heading heading2">${this.heading2}</div>
</div>
<div class="headerActions">
${resolveExec(async () => {
const resultArray: TemplateResult[] = [];
for (const action of this.dataActions) {
if (!action.type.includes('header')) continue;
resultArray.push(
html`<div
class="headerAction"
@click=${() => {
action.actionFunc(this.selectedDataRow);
}}
>
${action.iconName
? html`<dees-icon .iconSize=${14} .iconFA=${action.iconName}></dees-icon>
${action.name}`
: action.name}
</div>`
);
}
return resultArray;
})}
</div>
</div>
<div class="headingSeparation"></div>
<!-- the actual table -->
<style></style>
${this.data.length > 0
? (() => {
const headings: string[] = Object.keys(this.data[0]);
// Only pick up the keys from the first transformed data object
// as all data objects are assumed to have the same structure
const firstTransformedItem = this.displayFunction(this.data[0]);
const headings: string[] = Object.keys(firstTransformedItem);
return html`
<table>
<tr>
@ -272,32 +334,42 @@ export class DeesTable<T> extends DeesElement {
}
})()}
</tr>
${this.data.map(
(itemArg) => html`
${this.data.map((itemArg) => {
const transformedItem = this.displayFunction(itemArg);
const getTr = (elementArg: HTMLElement): HTMLElement => {
if (elementArg.tagName === 'TR') {
return elementArg;
} else {
return getTr(elementArg.parentElement);
}
};
return html`
<tr
@click=${() => {
this.selectedDataRow = itemArg;
}}
@dragenter=${async (eventArg: DragEvent) => {
console.log((eventArg.target as HTMLElement).tagName)
console.log('dragenter');
eventArg.preventDefault();
eventArg.stopPropagation();
(eventArg.target as HTMLElement).parentElement.style.background = '#800000';
const realTarget = getTr(eventArg.target as HTMLElement);
console.log('dragenter');
console.log(realTarget);
setTimeout(() => {
realTarget.style.background = 'green';
}, 0);
}}
@dragleave=${async (eventArg: DragEvent) => {
console.log((eventArg.target as HTMLElement).tagName)
console.log('dragleave');
eventArg.preventDefault();
eventArg.stopPropagation();
(eventArg.target as HTMLElement).parentElement.style.background = 'none';
const realTarget = getTr(eventArg.target as HTMLElement);
realTarget.style.background = 'none';
}}
@dragover=${async (eventArg: DragEvent) => {
eventArg.preventDefault();
}}
@drop=${async (eventArg: DragEvent) => {
eventArg.preventDefault();
const newFiles = []
const newFiles = [];
for (const file of Array.from(eventArg.dataTransfer.files)) {
this.files.push(file);
newFiles.push(file);
@ -305,17 +377,30 @@ export class DeesTable<T> extends DeesElement {
}
const result: File[] = this.fileWeakMap.get(itemArg as object);
if (!result) {
this.fileWeakMap.set(itemArg as object, newFiles)
this.fileWeakMap.set(itemArg as object, newFiles);
} else {
result.push(...newFiles);
}
}}
@contextmenu=${async (eventArg: MouseEvent) => {
DeesContextmenu.openContextMenuWithOptions(eventArg, this.getActionsForType('contextmenu').map(action => {
const menuItem: plugins.tsclass.website.IMenuItem = {
name: action.name,
iconName: action.iconName as any,
action: async () => {
await action.actionFunc(itemArg);
return null;
}
}
return menuItem;
}));
}}
class="${itemArg === this.selectedDataRow ? 'selected' : ''}"
>
${headings.map(
(headingArg) => html`
<td>
<div class="innerCellContainer">${itemArg[headingArg]}</div>
<div class="innerCellContainer">${transformedItem[headingArg]}</div>
</td>
`
)}
@ -324,36 +409,71 @@ export class DeesTable<T> extends DeesElement {
return html`
<td>
<div class="innerCellContainer">
${(() => {
const actions: TemplateResult[] = [];
for (const action of this.dataActions) {
actions.push(html`<div class="action">${action.iconName ? html`
<dees-icon .iconName=${'upload_file'}></dees-icon>
` : action.name}</div>`)
}
return actions;
})()}
${this.getActionsForType('inRow').map(
(actionArg) => html`<div
class="action"
@click=${() => actionArg.actionFunc(itemArg)}
>
${actionArg.iconName
? html`
<dees-icon .iconFA=${actionArg.iconName}></dees-icon>
`
: actionArg.name}
</div>`
)}
</div>
</td>
`;
}
})()}
</tr>
`
)}
`;
})}
</table>
`;
})()
: html` <div class="noDataSet">No data set!</div> `}
<div class="tableStatistics">
${this.data.length} data rows (total) |
${this.selectedDataRow
? html`Row ${this.data.indexOf(this.selectedDataRow) + 1} selected`
: html`No row selected`}
<div class="footer">
<div class="tableStatistics">
${this.data.length} ${this.dataName || 'data rows'} (total) |
${this.selectedDataRow ? '# ' + `${this.data.indexOf(this.selectedDataRow) + 1}` : `No`}
selected
</div>
<div class="footerActions">
${resolveExec(async () => {
const resultArray: TemplateResult[] = [];
for (const action of this.dataActions) {
if (!action.type.includes('footer')) continue;
resultArray.push(
html`<div
class="footerAction"
@click=${() => {
action.actionFunc(this.selectedDataRow);
}}
>
${action.iconName
? html`<dees-icon .iconSize=${14} .iconFA=${action.iconName}></dees-icon>
${action.name}`
: action.name}
</div>`
);
}
return resultArray;
})}
</div>
</div>
</div>
`;
}
public async firstUpdated() {}
getActionsForType(typeArg: ITableAction['type'][0]) {
const actions: ITableAction[] = [];
for (const action of this.dataActions) {
if (!action.type.includes(typeArg)) continue;
actions.push(action);
}
return actions;
}
}

View File

@ -1,6 +1,6 @@
import { customElement, DeesElement, TemplateResult, html } from '@designestate/dees-element';
import { customElement, DeesElement, type TemplateResult, html, type CSSResult, } from '@design.estate/dees-element';
import * as domtools from '@designestate/dees-domtools';
import * as domtools from '@design.estate/dees-domtools';
declare global {
interface HTMLElementTagNameMap {

View File

@ -1 +1 @@
import {} from '@designestate/dees-element';
import {} from '@design.estate/dees-element';

View File

@ -1,10 +1,10 @@
import { customElement, DeesElement, TemplateResult, html, property } from '@designestate/dees-element';
import { customElement, DeesElement, type TemplateResult, html, property, type CSSResult, } from '@design.estate/dees-element';
import * as domtools from '@designestate/dees-domtools';
import * as domtools from '@design.estate/dees-domtools';
import './dees-windowlayer';
import { css, cssManager } from '@designestate/dees-element';
import { css, cssManager } from '@design.estate/dees-element';
declare global {
interface HTMLElementTagNameMap {

View File

@ -1,6 +1,6 @@
import { customElement, DeesElement, TemplateResult, html, property } from '@designestate/dees-element';
import { customElement, DeesElement, type TemplateResult, html, property, type CSSResult, } from '@design.estate/dees-element';
import * as domtools from '@designestate/dees-domtools';
import * as domtools from '@design.estate/dees-domtools';
declare global {
interface HTMLElementTagNameMap {
@ -13,6 +13,15 @@ export class DeesWindowLayer extends DeesElement {
// STATIC
public static demo = () => html`<dees-windowlayer></dees-windowlayer>`;
public static async createAndShow() {
const domtoolsInstance = domtools.DomTools.getGlobalDomToolsSync();
const windowLayer = new DeesWindowLayer();
document.body.append(windowLayer);
await domtoolsInstance.convenience.smartdelay.delayFor(0);
windowLayer.show();
return windowLayer;
}
// INSTANCE
@property({
type: Boolean
@ -29,7 +38,7 @@ export class DeesWindowLayer extends DeesElement {
${domtools.elementBasic.styles}
<style>
.windowOverlay {
transition: all 0.3s;
transition: all 0.2s;
will-change: transform;
position: fixed;
top: 0px;
@ -82,4 +91,11 @@ export class DeesWindowLayer extends DeesElement {
await domtools.convenience.smartdelay.delayFor(0);
this.visible = false;
}
public async destroy() {
const domtools = await this.domtoolsPromise;
await this.hide();
await domtools.convenience.smartdelay.delayFor(300);
this.remove();
}
}

View File

@ -0,0 +1,3 @@
export class FormController {
}

View File

@ -2,8 +2,10 @@ export * from './dees-button-exit.js';
export * from './dees-button.js';
export * from './dees-chips.js';
export * from './dees-contextmenu.js';
export * from './dees-form.js';
export * from './dees-dataview-codebox.js';
export * from './dees-dataview-statusobject.js';
export * from './dees-form-submit.js';
export * from './dees-form.js';
export * from './dees-icon.js';
export * from './dees-input-checkbox.js';
export * from './dees-input-dropdown.js';
@ -13,6 +15,8 @@ export * from './dees-input-radio.js';
export * from './dees-input-text.js';
export * from './dees-mobilenavigation.js';
export * from './dees-pdf.js';
export * from './dees-simple-appdash.js';
export * from './dees-simple-login.js';
export * from './dees-speechbubble.js';
export * from './dees-spinner.js';
export * from './dees-stepper.js';

View File

@ -1,3 +1,11 @@
// @push.rocks scope
import * as smartpromise from '@push.rocks/smartpromise';
export {
smartpromise,
}
// @tsclass scope
import * as tsclass from '@tsclass/tsclass';
export {

View File

@ -5,6 +5,10 @@
"target": "ES2022",
"module": "ES2022",
"moduleResolution": "nodenext",
"esModuleInterop": true
}
"esModuleInterop": true,
"verbatimModuleSyntax": true
},
"exclude": [
"dist_*/**/*.d.ts"
]
}