fix(core): update

This commit is contained in:
Philipp Kunz 2024-01-15 12:57:49 +01:00
parent 2c34ec8b39
commit 554b72b075
9 changed files with 67 additions and 32 deletions

View File

@ -3,6 +3,6 @@
*/ */
export const commitinfo = { export const commitinfo = {
name: '@design.estate/dees-catalog', name: '@design.estate/dees-catalog',
version: '1.0.242', version: '1.0.243',
description: 'website for lossless.com' description: 'website for lossless.com'
} }

View File

@ -5,4 +5,10 @@ export const demoFunc = () => html`
.options=${['option 1', 'option 2', 'a longer option with multiple words']} .options=${['option 1', 'option 2', 'a longer option with multiple words']}
.selectedOption=${'option 2'} .selectedOption=${'option 2'}
></dees-input-multitoggle> ></dees-input-multitoggle>
<dees-input-multitoggle
.type=${'boolean'}
.booleanTrueName=${'enabled'}
.booleanFalseName=${'disabled'}
.selectedOption=${'true'}
></dees-input-multitoggle>
`; `;

View File

@ -96,7 +96,7 @@ export class DeesInputMultitoggle extends DeesElement {
public async firstUpdated() { public async firstUpdated() {
if (this.type === 'boolean') { if (this.type === 'boolean') {
this.options = [this.booleanTrueName || 'true', this.booleanFalseName]; this.options = [this.booleanTrueName || 'true', this.booleanFalseName || 'false'];
} }
this.setIndicator(); this.setIndicator();
} }

View File

@ -1,5 +1,15 @@
import { html } from '@design.estate/dees-element'; import { html } from '@design.estate/dees-element';
export const demoFunc = () => html` export const demoFunc = () => html`
<dees-input-multiselect></dees-input-multiselect> <style>
.demoContainer {
max-width: 600px;
margin: auto;
padding: 40px;
background: #000;
}
</style>
<div class="demoContainer">
<dees-input-typelist></dees-input-typelist>
</div>
`; `;

View File

@ -40,29 +40,48 @@ export class DeesInputTypelist extends DeesElement {
border-left: ${cssManager.bdTheme('1px solid #CCC', 'none')}; border-left: ${cssManager.bdTheme('1px solid #CCC', 'none')};
} }
.selections { .tags {
padding: 8px; padding: 16px;
cursor: default;
}
.notags {
text-align: center;
opacity: 0.5;
font-size: 12px;
} }
input { input {
display: block;
box-sizing: border-box;
background: #181818; background: #181818;
width: 100%; width: 100%;
outline: none; outline: none;
border: none; border: none;
color: inherit; color: inherit;
padding: 8px; padding: 0px 16px;
overflow: hidden;
line-height: 32px;
height: 0px;
transition: height 0.2s;
}
input:focus {
height: 32px;
} }
`, `,
]; ];
public render(): TemplateResult { public render(): TemplateResult {
return html` return html`
<div class="label">MultiSelect</div> <div class="label">Type List</div>
<div class="mainbox"> <div class="mainbox">
<div class="selections"> <div class="tags" @click=${() => {
Nothing selected... this.shadowRoot.querySelector('input').focus();
}}>
<div class="notags">No tags yet</div>
</div> </div>
<input type="text" placeholder="Type to select" /> <input type="text" placeholder="Type, press Enter to add it..." />
</div> </div>
`; `;
} }

View File

@ -57,18 +57,9 @@ export class DeesPdf extends DeesElement {
if (!DeesPdf.pdfJsReady) { if (!DeesPdf.pdfJsReady) {
const pdfJsReadyDeferred = domtools.plugins.smartpromise.defer(); const pdfJsReadyDeferred = domtools.plugins.smartpromise.defer();
DeesPdf.pdfJsReady = pdfJsReadyDeferred.promise; DeesPdf.pdfJsReady = pdfJsReadyDeferred.promise;
const loadDeferred = domtools.plugins.smartpromise.defer(); // @ts-ignore
const script = document.createElement('script'); DeesPdf.pdfjsLib = await import('https://cdn.jsdelivr.net/npm/pdfjs-dist@4.0.379/+esm');
script.addEventListener('load', () => { DeesPdf.pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdn.jsdelivr.net/npm/pdfjs-dist@4.0.379/build/pdf.worker.mjs';
console.log('pdf.js loaded!');
loadDeferred.resolve();
});
script.src = 'https:////mozilla.github.io/pdf.js/build/pdf.js';
document.getElementsByTagName('head')[0].appendChild(script);
// The workerSrc property shall be specified.
await loadDeferred.promise;
DeesPdf.pdfjsLib = window['pdfjs-dist/build/pdf'];
DeesPdf.pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';
pdfJsReadyDeferred.resolve(); pdfJsReadyDeferred.resolve();
} }
await DeesPdf.pdfJsReady; await DeesPdf.pdfJsReady;

View File

View File

@ -0,0 +1,7 @@
import { html } from '@design.estate/dees-element';
import { DeesUpdater } from './dees-updater.js';
export const demoFunc = () => {
}

View File

@ -1,7 +1,5 @@
import { customElement, DeesElement, type TemplateResult, html, property, type CSSResult, } from '@design.estate/dees-element'; import { customElement, DeesElement, type TemplateResult, html, property, type CSSResult, domtools } from '@design.estate/dees-element';
import { demoFunc } from './dees-updater.demo.js';
import * as domtools from '@design.estate/dees-domtools';
import './dees-windowlayer'; import './dees-windowlayer';
import { css, cssManager } from '@design.estate/dees-element'; import { css, cssManager } from '@design.estate/dees-element';
@ -14,7 +12,11 @@ declare global {
@customElement('dees-updater') @customElement('dees-updater')
export class DeesUpdater extends DeesElement { export class DeesUpdater extends DeesElement {
public static demo = () => html`<dees-updater></dees-updater>`; public static demo = demoFunc;
public static async createAndShow() {
}
@property({ @property({
type: String, type: String,
@ -38,9 +40,8 @@ export class DeesUpdater extends DeesElement {
will-change: transform; will-change: transform;
position: relative; position: relative;
background: ${cssManager.bdTheme('#eeeeeb', '#222')}; background: ${cssManager.bdTheme('#eeeeeb', '#222')};
margin: auto;
max-width: 800px; max-width: 800px;
border-radius: 3px; border-radius: 8px;
border-top: 1px solid ${cssManager.bdTheme('#eeeeeb', '#333')}; border-top: 1px solid ${cssManager.bdTheme('#eeeeeb', '#333')};
} }
@ -68,7 +69,9 @@ export class DeesUpdater extends DeesElement {
public render(): TemplateResult { public render(): TemplateResult {
return html` return html`
<dees-windowlayer @clicked="${this.windowLayerClicked}"> <dees-windowlayer @clicked="${this.windowLayerClicked}" .options=${{
blur: true,
}}>
<div class="modalContainer"> <div class="modalContainer">
<div class="headingContainer"> <div class="headingContainer">
<dees-spinner .size=${60}></dees-spinner> <dees-spinner .size=${60}></dees-spinner>
@ -84,7 +87,6 @@ export class DeesUpdater extends DeesElement {
} }
private windowLayerClicked() { private windowLayerClicked() {
const windowLayer = this.shadowRoot.querySelector('dees-windowlayer');
windowLayer.toggleVisibility();
} }
} }