design.estate/dees-appui-catalog
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(core): update

Browse Source
This commit is contained in:
Philipp Kunz 2023-09-06 18:43:33 +02:00
parent d0f45141e5
commit 5208f46725
14 changed files with 2343 additions and 1474 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

132
.gitlab-ci.yml
View File

@ -1,132 +0,0 @@
# gitzone ci_default_private
image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
cache:
paths:
- .npmci_cache/
key: '$CI_BUILD_STAGE'
stages:
- security
- test
- release
- metadata
before_script:
- pnpm install -g pnpm
- pnpm install -g @shipzone/npmci
- npmci npm prepare
# ====================
# security stage
# ====================
# ====================
# security stage
# ====================
auditProductionDependencies:
image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
stage: security
script:
- npmci command npm config set registry https://registry.npmjs.org
- npmci command pnpm audit --audit-level=high --prod
tags:
- lossless
- docker
auditDevDependencies:
image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
stage: security
script:
- npmci command npm config set registry https://registry.npmjs.org
- npmci command pnpm audit --audit-level=high --dev
tags:
- lossless
- docker
allow_failure: true
# ====================
# test stage
# ====================
testStable:
stage: test
script:
- npmci node install stable
- npmci npm install
- npmci npm test
coverage: /\d+.?\d+?\%\s*coverage/
tags:
- lossless
- docker
- notpriv
testBuild:
stage: test
script:
- npmci node install stable
- npmci npm install
- npmci command npm run build
coverage: /\d+.?\d+?\%\s*coverage/
tags:
- lossless
- docker
- notpriv
release:
stage: release
script:
- npmci node install stable
- npmci npm publish
only:
- tags
tags:
- lossless
- docker
- notpriv
# ====================
# metadata stage
# ====================
codequality:
stage: metadata
allow_failure: true
only:
- tags
script:
- npmci command npm install -g typescript
- npmci npm prepare
- npmci npm install
tags:
- lossless
- docker
- priv
trigger:
stage: metadata
script:
- npmci trigger
only:
- tags
tags:
- lossless
- docker
- notpriv
pages:
stage: metadata
script:
- npmci node install lts
- npmci command npm install -g @gitzone/tsdoc
- npmci npm install
- npmci command tsdoc
tags:
- lossless
- docker
- notpriv
only:
- tags
artifacts:
expire_in: 1 week
paths:
- public
allow_failure: true

4
html/index.ts
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';

2
npmextra.json
View File

@ -6,7 +6,7 @@
"gitscope": "designestate",
"gitrepo": "lele-appui-catalog",
"description": "a catalog with app webcomponents",
"npmPackagename": "@designestate/lele-appui-catalog",
"npmPackagename": "@design.estate/lele-appui-catalog",
"license": "MIT",
"projectDomain": "design.estate"
}

23
package.json
View File

@ -15,20 +15,19 @@
"author": "Lossless GmbH",
"license": "UNLICENSED",
"dependencies": {
"@designestate/dees-catalog": "^1.0.147",
"@designestate/dees-domtools": "^2.0.28",
"@designestate/dees-element": "^2.0.18",
"@designestate/dees-wcctools": "^1.0.76",
"@losslessone_private/loint-pubapi": "^1.0.13",
"@pushrocks/smartexpress": "^4.0.23"
"@design.estate/dees-catalog": "^1.0.170",
"@design.estate/dees-domtools": "^2.0.34",
"@design.estate/dees-element": "^2.0.23",
"@design.estate/dees-wcctools": "^1.0.76",
"@losslessone_private/loint-pubapi": "^1.0.13"
},
"devDependencies": {
"@gitzone/tsbuild": "^2.1.63",
"@gitzone/tsbundle": "^2.0.5",
"@gitzone/tsrun": "^1.2.39",
"@gitzone/tswatch": "^2.0.1",
"@pushrocks/projectinfo": "^5.0.1",
"@types/node": "^18.11.18"
"@git.zone/tsbuild": "^2.1.66",
"@git.zone/tsbundle": "^2.0.8",
"@git.zone/tsrun": "^1.2.44",
"@git.zone/tswatch": "^2.0.7",
"@push.rocks/projectinfo": "^5.0.1",
"@types/node": "^20.5.9"
},
"files": [
"ts/**/*",

3316
pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff

12
readme.md
View File

@ -1,8 +1,8 @@
# @designestate/lele-appui-catalog
# @design.estate/lele-appui-catalog
a catalog with app webcomponents
## Availabililty and Links
* [npmjs.org (npm package)](https://www.npmjs.com/package/@designestate/lele-appui-catalog)
* [npmjs.org (npm package)](https://www.npmjs.com/package/@design.estate/lele-appui-catalog)
* [gitlab.com (source)](https://gitlab.com/designestate/lele-appui-catalog)
* [github.com (source mirror)](https://github.com/designestate/lele-appui-catalog)
* [docs (typedoc)](https://designestate.gitlab.io/lele-appui-catalog/)
@ -13,14 +13,14 @@ Status Category | Status Badge
-- | --
GitLab Pipelines | [![pipeline status](https://gitlab.com/designestate/lele-appui-catalog/badges/master/pipeline.svg)](https://lossless.cloud)
GitLab Pipline Test Coverage | [![coverage report](https://gitlab.com/designestate/lele-appui-catalog/badges/master/coverage.svg)](https://lossless.cloud)
npm | [![npm downloads per month](https://badgen.net/npm/dy/@designestate/lele-appui-catalog)](https://lossless.cloud)
npm | [![npm downloads per month](https://badgen.net/npm/dy/@design.estate/lele-appui-catalog)](https://lossless.cloud)
Snyk | [![Known Vulnerabilities](https://badgen.net/snyk/designestate/lele-appui-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/lele-appui-catalog)](https://lossless.cloud)
PackagePhobia (package size on registry) | [![PackagePhobia](https://badgen.net/packagephobia/publish/@designestate/lele-appui-catalog)](https://lossless.cloud)
BundlePhobia (total size when bundled) | [![BundlePhobia](https://badgen.net/bundlephobia/minzip/@designestate/lele-appui-catalog)](https://lossless.cloud)
PackagePhobia (total standalone install weight) | [![PackagePhobia](https://badgen.net/packagephobia/install/@design.estate/lele-appui-catalog)](https://lossless.cloud)
PackagePhobia (package size on registry) | [![PackagePhobia](https://badgen.net/packagephobia/publish/@design.estate/lele-appui-catalog)](https://lossless.cloud)
BundlePhobia (total size when bundled) | [![BundlePhobia](https://badgen.net/bundlephobia/minzip/@design.estate/lele-appui-catalog)](https://lossless.cloud)
## Usage

2
ts_web/00_commitinfo_data.ts
View File

@ -3,6 +3,6 @@
*/
export const commitinfo = {
name: '@losslessone_private/lele-appui-catalog',
version: '1.0.75',
version: '1.0.76',
description: 'a catalog with app webcomponents'
}

1
ts_web/elements/index.ts
View File

@ -1,4 +1,5 @@
export * from './lele-appui-activitylog.js';
export * from './lele-appui-appbar.js';
export * from './lele-appui-base.js';
export * from './lele-appui-maincontent.js';
export * from './lele-appui-mainmenu.js';

169
ts_web/elements/lele-appui-activitylog.ts
View File

@ -6,9 +6,9 @@ import {
html,
css,
cssManager,
} from '@designestate/dees-element';
} from '@design.estate/dees-element';
import * as domtools from '@designestate/dees-domtools';
import * as domtools from '@design.estate/dees-domtools';
@customElement('lele-appui-activitylog')
export class DeapActivitylog extends DeesElement {
@ -26,7 +26,9 @@ export class DeapActivitylog extends DeesElement {
width: 100%;
max-width: 300px;
height: 100%;
background: #343b43;
background: #111c28;
font-family: 'Intel One Mono', sans-serif;
border-left: 1px solid #202020;
}
.maincontainer {
position: absolute;
@ -38,33 +40,102 @@ export class DeapActivitylog extends DeesElement {
.topbar {
position: absolute;
height: 80px;
width: calc(100% - 20px);
margin: 0px 10px 0px 10px;
border-bottom: 1px solid #707070;
top: 0px;
height: 32px;
width: 100%;
padding: 0px 12px 0px 12px;
background: #0e151f;
}
.topbar .heading {
text-align: center;
line-height: 80px;
font-family: Inter;
text-align: left;
line-height: 24px;
padding-top: 8px;
font-weight: 500;
font-size: 14px;
font-family: 'Hubot Sans', sans-serif;
}
.activityContainer {
position: absolute;
top: 80px;
bottom: 0px;
top: 32px;
bottom: 40px;
width: 100%;
padding: 10px;
padding: 8px 0px;
overflow-y: scroll;
}
.streamingIndicator {
font-size: 12px;
text-align: center;
padding-top: 16px;
color: #888
}
.streamingIndicator.bottom {
padding-top: 0px;
padding-bottom: 16px;
}
.activityentry {
background: rgba(0, 0, 0, 0.2);
min-height: 30px;
border-radius: 3px;
cursor: pointer;
font-size: 12px;
padding: 8px 16px;
border-bottom: 1px dotted #ffffff20;
}
.activityentry:last-of-type {
border-bottom: 1px solid #ffffff00;
}
.activityentry:hover {
cursor: pointer;
background: #00000080;
}
.timestamp {
color: #ff8787;
}
.searchbox {
position: absolute;
bottom: 0px;
width: 100%;
height: 40px;
background: #0e151f;
}
.searchbox input {
color: #fff;
background: none;
width: 100%;
height: 40px;
line-height: 32px;
border: none;
padding: 4px 12px;
font-family: 'Intel One Mono', sans-serif;
}
.searchbox input:focus {
outline: none;
}
.bottomShadow {
position: absolute;
width: 100%;
height: 32px;
bottom: 40px;
background: linear-gradient(180deg, #111c2800 0%, #0e151f 100%);
pointer-events: none;
}
.topShadow {
position: absolute;
width: 100%;
height: 32px;
top: 32px;
background: linear-gradient(0deg, #111c2800 0%, #0e151f 100%);
pointer-events: none;
}
`,
];
@ -78,8 +149,74 @@ export class DeapActivitylog extends DeesElement {
<div class="heading">Activity Log</div>
</div>
<div class="activityContainer">
<div class="activityentry"></div>
<div class="streamingIndicator">streaming...</div>
<div class="activityentry">
<span class="timestamp">22:01:</span> Max Mustermann logged in
</div>
<div class="activityentry">
<span class="timestamp">22:02:</span> Max Mustermann viewed an invoice
</div>
<div class="activityentry">
<span class="timestamp">22:03:</span> Max Mustermann added a new contact
</div>
<div class="activityentry">
<span class="timestamp">22:04:</span> Max Mustermann updated account settings
</div>
<div class="activityentry">
<span class="timestamp">22:05:</span> Max Mustermann logged out
</div>
<div class="activityentry">
<span class="timestamp">22:06:</span> Max Mustermann logged in
</div>
<div class="activityentry">
<span class="timestamp">22:07:</span> Max Mustermann created a new invoice
</div>
<div class="activityentry">
<span class="timestamp">22:08:</span> Max Mustermann sent an invoice
</div>
<div class="activityentry">
<span class="timestamp">22:09:</span> Max Mustermann viewed reports
</div>
<div class="activityentry">
<span class="timestamp">22:10:</span> Max Mustermann logged out
</div>
<div class="activityentry">
<span class="timestamp">22:11:</span> Max Mustermann logged in
</div>
<div class="activityentry">
<span class="timestamp">22:12:</span> Max Mustermann deleted an invoice
</div>
<div class="activityentry">
<span class="timestamp">22:13:</span> Max Mustermann contacted support
</div>
<div class="activityentry">
<span class="timestamp">22:14:</span> Max Mustermann added a new user
</div>
<div class="activityentry">
<span class="timestamp">22:15:</span> Max Mustermann changed password
</div>
<div class="activityentry">
<span class="timestamp">22:16:</span> Max Mustermann logged out
</div>
<div class="activityentry">
<span class="timestamp">22:17:</span> Max Mustermann logged in
</div>
<div class="activityentry">
<span class="timestamp">22:18:</span> Max Mustermann archived an invoice
</div>
<div class="activityentry">
<span class="timestamp">22:19:</span> Max Mustermann approved a payment
</div>
<div class="activityentry">
<span class="timestamp">22:20:</span> Max Mustermann logged out
</div>
<div class="streamingIndicator bottom">loading more...</div>
</div>
<div class="searchbox">
<input type="text" placeholder="Search" />
</div>
<div class="topShadow"></div>
<div class="bottomShadow"></div>
</div>
`;
}

36
ts_web/elements/lele-appui-appbar.ts Normal file
View File

@ -0,0 +1,36 @@
import {
DeesElement,
TemplateResult,
property,
customElement,
html,
css,
cssManager,
} from '@design.estate/dees-element';
@customElement('lele-appui-appbar')
export class DeapAppBar extends DeesElement {
public static demo = () => html`<lele-appui-appbar></lele-appui-appbar>`;
public static styles = [
cssManager.defaultStyles,
css`
:host {
display: block;
position: relative;
height: 100%;
width: 100%;
height: 32px;
border-bottom: 1px solid #202020;
background: #000000;
}
`,
];
// INSTANCE
public render(): TemplateResult {
return html`
`;
}
}

8
ts_web/elements/lele-appui-base.ts
View File

@ -6,7 +6,7 @@ import {
html,
css,
cssManager,
} from '@designestate/dees-element';
} from '@design.estate/dees-element';
@customElement('lele-appui-base')
export class DeapBase extends DeesElement {
@ -22,10 +22,11 @@ export class DeapBase extends DeesElement {
}
.maingrid {
position: absolute;
height: 100%;
top: 32px;
height: calc(100% - 40px);
width: 100%;
display: grid;
grid-template-columns: 80px 240px auto 200px;
grid-template-columns: 60px 240px auto 240px;
}
`,
];
@ -34,6 +35,7 @@ export class DeapBase extends DeesElement {
public render(): TemplateResult {
return html`
<style></style>
<lele-appui-appbar></lele-appui-appbar>
<div class="maingrid">
<lele-appui-mainmenu></lele-appui-mainmenu>
<lele-appui-mainselector></lele-appui-mainselector>

28
ts_web/elements/lele-appui-maincontent.ts
View File

@ -8,9 +8,9 @@ import {
html,
css,
cssManager,
} from '@designestate/dees-element';
} from '@design.estate/dees-element';
import * as domtools from '@designestate/dees-domtools';
import * as domtools from '@design.estate/dees-domtools';
@customElement('lele-appui-maincontent')
export class DeapMaincontent extends DeesElement {
@ -37,7 +37,7 @@ export class DeapMaincontent extends DeesElement {
width: 100%;
height: 100%;
position: relative;
background: #222222;
background: #161616;
}
.maincontainer {
position: absolute;
@ -50,27 +50,30 @@ export class DeapMaincontent extends DeesElement {
.topbar {
position: absolute;
width: 100%;
height: 112px;
background: #101010;
height: 80px;
background: #000000;
user-select: none;
}
.topbar .heading {
padding: 24px 40px 24px 40px;
font-family: 'Roboto Mono';
font-weight: 400;
font-size: 24px;
padding: 8px 24px 8px 24px;
font-family: 'Hubot Sans', sans-serif;
font-weight: 600;
line-height: 24px;
font-size: 16px;
height: 40px;
}
.topbar .tabsContainer {
display: grid;
margin-left: 40px;
margin-left: 24px;
}
.topbar .tabsContainer .tab {
color: #a0a0a0;
white-space: nowrap;
margin-right: 16px;
margin-top: 8px;
cursor: pointer;
transition: color 0.1s;
}
@ -89,8 +92,11 @@ export class DeapMaincontent extends DeesElement {
bottom: 0px;
height: 4px;
width: 40px;
background: #484848;
background: #161616;
transition: all 0.1s;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-top: 1px solid #e4002b;
}
.mainicon {

43
ts_web/elements/lele-appui-mainmenu.ts
View File

@ -8,10 +8,10 @@ import {
html,
css,
cssManager,
} from '@designestate/dees-element';
} from '@design.estate/dees-element';
import * as domtools from '@designestate/dees-domtools';
import '@designestate/dees-catalog';
import * as domtools from '@design.estate/dees-domtools';
import '@design.estate/dees-catalog';
/**
* the most left menu
@ -39,20 +39,22 @@ export class DeapMainmenu extends DeesElement {
cssManager.defaultStyles,
css`
:host {
--menuSize: 60px;
color: #ccc;
z-index: 10;
display: block;
position: relative;
width: 80px;
width: var(--menuSize);
height: 100%;
background: #3c3c3c;
background: #000000;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
user-select: none;
border-right: 1px solid #202020;
}
.mainlogo {
width: 80px;
height: 80px;
width: var(--menuSize);
height: var(--menuSize);
background: rgba(0, 0, 0, 0.4);
}
@ -62,34 +64,30 @@ export class DeapMainmenu extends DeesElement {
.tab {
padding-top: 18px;
font-size: 24px;
width: 80px;
height: 80px;
width: var(--menuSize);
height: var(--menuSize);
text-align: center;
cursor: pointer;
transition: color 0.1s, background 0.2s;
}
.tab:hover {
background: rgba(0, 0, 0, 0.3);
background: rgba(255, 255, 255, 0.15);
}
.tab.selectedTab {
color: #fff;
background: rgba(0, 0, 0, 0.2);
}
.tab .label {
font-size: 12px;
margin-top: 4px;
background: rgba(255, 255, 255, 0.1);
}
.tabIndicator {
opacity: 0;
background: #4e729a;
position: absolute;
width: 7px;
height: 60px;
width: 5px;
height: calc((var(--menuSize) / 3) * 2);
left: 0px;
top: 90px;
top: calc(var(--menuSize) - (((var(--menuSize) / 3) * 2) / 2));
border-top-right-radius: 7px;
border-bottom-right-radius: 7px;
transition: all 0.1s;
@ -110,8 +108,7 @@ export class DeapMainmenu extends DeesElement {
this.updateTab(tabArg);
}}"
>
<dees-icon iconFA="${tabArg.iconName}"></dees-icon>
<div class="label">${tabArg.key}</div>
<dees-icon iconFA="${tabArg.iconName as any}"></dees-icon>
</div>
`;
})}
@ -130,7 +127,9 @@ export class DeapMainmenu extends DeesElement {
`.tabsContainer .tab:nth-child(${tabIndex + 1})`
);
const tabIndicator: HTMLElement = this.shadowRoot.querySelector('.tabIndicator');
tabIndicator.style.top = selectedTabElement.offsetTop + 10 + 'px';
const offsetTop = selectedTabElement.offsetTop;
tabIndicator.style.opacity = `1`;
tabIndicator.style.top = `calc(${offsetTop}px + (var(--menuSize) / 6))`;
}
updateTab(tabArg: interfaces.ITab) {

41
ts_web/elements/lele-appui-mainselector.ts
View File

@ -8,7 +8,7 @@ import {
html,
css,
cssManager,
} from '@designestate/dees-element';
} from '@design.estate/dees-element';
/**
* the property selector menu
@ -43,7 +43,8 @@ export class DeapMainselector extends DeesElement {
width: 100%;
max-width: 300px;
height: 100%;
background: #3c3c3c;
background: #000000;
border-right: 1px solid #222222;
}
.maincontainer {
position: absolute;
@ -55,27 +56,27 @@ export class DeapMainselector extends DeesElement {
.topbar {
position: absolute;
height: 80px;
height: 32px;
width: 100%;
background: #333333;
}
.topbar .heading {
padding-left: 20px;
line-height: 80px;
font-family: Inter;
padding-left: 16px;
padding-top: 8px;
line-height: 24px;
font-family: 'Hubot Sans', sans-serif;
font-weight: 600;
font-size: 16px;
font-size: 14px;
}
.selectionOptions {
position: absolute;
top: 80px;
top: 32px;
padding-top: 8px;
left: 0px;
width: 100%;
font-family: Roboto Mono;
font-size: 16px;
font-family: 'Mona Sans', sans-serif;
font-size: 14px;
}
.selectionOptions .selectionOption {
@ -83,11 +84,10 @@ export class DeapMainselector extends DeesElement {
margin-right: 16px;
padding-top: 8px;
padding-bottom: 8px;
border-top: 1px solid #707070;
border-top: 1px dotted #303030;
border-left: 0px solid rgba(0,0,0,0);
cursor: pointer;
transition: all 0.1s;
}
.selectionOptions .selectionOption:hover {
@ -95,19 +95,14 @@ export class DeapMainselector extends DeesElement {
padding-left: 8px;
}
.selectionOptions .selectionOption:first-child {
border-top: 1px solid rgba(0,0,0,0);
}
.selectionOptions .selectionOption.selectedOption {
border-left: 4px solid #26A69A;
padding-left: 10px;
}
.selectionOptions .selectionOption:first-child {
margin-top: 16px;
}
.selectionOptions .selectionOption:last-child {
margin-bottom: 16px;
border-bottom: 1px solid #707070;
}
`
];