fix(core): update
This commit is contained in:
parent
2c34ec8b39
commit
554b72b075
@ -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'
|
||||||
}
|
}
|
||||||
|
@ -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>
|
||||||
`;
|
`;
|
@ -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();
|
||||||
}
|
}
|
||||||
|
@ -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>
|
||||||
`;
|
`;
|
@ -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>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
@ -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;
|
||||||
|
0
ts_web/elements/dees-progressbar.ts
Normal file
0
ts_web/elements/dees-progressbar.ts
Normal file
7
ts_web/elements/dees-updater.demo.ts
Normal file
7
ts_web/elements/dees-updater.demo.ts
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
import { html } from '@design.estate/dees-element';
|
||||||
|
|
||||||
|
import { DeesUpdater } from './dees-updater.js';
|
||||||
|
|
||||||
|
export const demoFunc = () => {
|
||||||
|
|
||||||
|
}
|
@ -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();
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user