skinny-widgets
Version:
skinnable web components widgets collection
172 lines (151 loc) • 6.97 kB
HTML
<html>
<head>
<meta charset="utf-8">
<script src="../node_modules/mocha/mocha.js"></script>
<script src="../node_modules/chai/chai.js"></script>
<script src="../node_modules/sinon/pkg/sinon.js"></script>
<script src="../node_modules/wct-mocha/wct-mocha.js"></script>
</head>
<body>
<sk-config
theme="antd"
base-path="/node_modules/sk-core/src"
lang="ru"
id="skConfig"
></sk-config>
<my-view use-shadow-root="false" id="myView">
<sk-button button-type="primary" id="myButton">
Show Dialog
</sk-button>
<sk-dialog id="myDialog" title="Some Title" type="confirm" open>
<sk-alert closable type="error">Alarm ! Alarm !</sk-alert>
<sk-tabs>
<sk-tab title="General">
<div>
<sk-datepicker></sk-datepicker>
<sk-input type="text" name="alternativeSelector" value="">alternativeSelector</sk-input>
<sk-select id="mySelect">
<optgroup label="foo">
<option value="default">Default</option>
</optgroup>
<optgroup label="bar">
<option value="antd">Antd</option>
<option value="jquery">Jquery</option>
</optgroup>
</sk-select>
</div>
<div>
<sk-input type="text" name="alternativeSelectorInsert" value="">alternativeSelectorInsert</sk-input>
</div>
<div>
<sk-input type="text" name="basketBtnSticky" value="">basketBtnSticky</sk-input>
</div>
<div>
<sk-input type="text" name="basketBtnStickyOffset" value="">basketBtnStickyOffset</sk-input>
</div>
</sk-tab>
<sk-tab title="Service">
<div>
<sk-input type="text" name="serviceUploadEnabled" value="">serviceUploadEnabled</sk-input>
</div>
<div>
<sk-input type="text" name="serviceType" value="">serviceType</sk-input>
</div>
<div>
<sk-input type="text" name="serviceUrl" value="">serviceUrl</sk-input>
</div>
<div>
<sk-input type="text" name="serviceLogin" value="">serviceLogin</sk-input>
</div>
<div>
<sk-input type="text" name="servicePassword" value="">servicePassword</sk-input>
</div>
</sk-tab>
<sk-tab title="Notifications">
<div>
<sk-input type="text" name="notificationEmailEnabled" value="">notificationEmailEnabled</sk-input>
</div>
<div>
<sk-input type="text" name="notificationEmail" value="">notificationEmail</sk-input>
</div>
<div>
<sk-input type="text" name="notificationEmailSMTPHost" value="">notificationEmailSMTPHost</sk-input>
</div>
<div>
<sk-input type="text" name="notificationEmailSMTPPort" value="">notificationEmailSMTPPort</sk-input>
</div>
<div>
<sk-input type="text" name="notificationEmailSMTPFrom" value="">notificationEmailSMTPFrom</sk-input>
</div>
<div>
<sk-input type="text" name="notificationEmailSMTPAuth" value="">notificationEmailSMTPAuth</sk-input>
</div>
<div>
<sk-input type="text" name="notificationEmailSSLEnabled" value="">notificationEmailSSLEnabled</sk-input>
</div>
<div>
<sk-input type="text" name="notificationEmailSMTPDebug" value="">notificationEmailSMTPDebug</sk-input>
</div>
<div>
<sk-input type="text" name="notificationEmailSMTPUser" value="">notificationEmailSMTPUser</sk-input>
</div>
<div>
<sk-input type="password" name="notificationEmailSMTPPassword" value="">notificationEmailSMTPPassword</sk-input>
</div>
<div>
<sk-input type="text" name="notificationEmailSMTPReplyAddress" value="">notificationEmailSMTPReplyAddress</sk-input>
</div>
<div>
<sk-input type="text" name="notificationEmailSMTPReplyPersonal" value="">notificationEmailSMTPReplyPersonal</sk-input>
</div>
</sk-tab>
</sk-tabs>
<template id="SkDialogFooterTpl">
<div>
<sk-button action="cancel" type="button">Cancel</sk-button>
<sk-button action="save" type="button" button-type="primary">Save</sk-button>
</div>
</template>
</sk-dialog>
</my-view>
<script type="module">
import { SkElement } from '../node_modules/sk-core/src/sk-element.js';
export class MyView extends SkElement {
static get observedAttributes() {
return ['open'];
}
onAttrChanged() {
console.log('on attr changed by plugin');
}
}
window.MyView = MyView;
</script>
<sk-registry>
<sk-registry-item key="SkConfig" defName="SkConfig" is="sk-config" full-path="/node_modules/sk-core/src/sk-config.js"></sk-registry-item>
<sk-registry-item key="SkButton" defName="SkButton" is="sk-button" full-path="/node_modules/sk-button/src/sk-button.js"></sk-registry-item>
<sk-registry-item key="SkDialog" defName="SkDialog" is="sk-dialog" full-path="/node_modules/sk-dialog/src/sk-dialog.js"></sk-registry-item>
<sk-registry-item key="MyViewCfg" val='{"buttonSl": "#dialogButton", "dialogSl": "#dialog"}'></sk-registry-item>
<sk-registry-item key="MyView" defName="MyView" is="my-view" plugins='[{"onAttrChange": "onAttrChanged"}]'
deps='{"viewCfg": "MyViewCfg"}'>
<sk-registry-connection from="#myButton" to="#myDialog" target-type="method" target="open"></sk-registry-connection>
</sk-registry-item>
</sk-registry>
<script type="module">
import { whenSkRendered } from '../node_modules/sk-core/src/rd-util.js';
import { SkRegistry } from "../node_modules/sk-core/src/sk-registry.js";
customElements.define('sk-registry', SkRegistry);
suite('<sk-registry>', () => {
suiteSetup(() => {
});
test('is my-view rendered', (done) => {
const element = document.getElementById('myView');
element.whenRendered(() => {
chai.assert.instanceOf(element, MyView);
done();
});
});
});
</script>
</body>
</html>