Package Exports

skinny-widgets

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (skinny-widgets) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Skinny Widgets

Skinnable component set based on W3C standards compilant technologies.

Allows you to develop ui layer abstract code and easily switch between layouts w/o rewriting the code.

If you are looking for web components based data grid library check out gridy-grid project.

Configuration

sk-config element is acts as common configuration host service, elements tries to find it on connect and request necessary configurations, so you don't have to repeat params for every.

<sk-config styles='{"default.css": "/node_modules/skinny-widgets/src/theme/default/default.css"}'></sk-config>

Attributes

theme - one of supported themes: e.g. 'antd' or 'jquery' (default: 'default')

base-path - path to sources and resources root, (default: '/node_modules/skinny-widgets/src/')

styles - set of style definitions used by elements as Object { 'name': 'path' }. Commonly styles are mounted into shadow root by given path. This allows to provide CSS isolation with file browser cashing.

use-shadow-root - specifies if Shadow Root encapsulation is enabled for elements (default: 'true')

lang - locale code, currently used only for datepicker (default: 'en_US')

reflective - element auto re-render on external events, currently sk-config attrs change (default: true)

Skins

antd - and.design framework styles are used for layout

jquery - web components styled for jquery-ui

default - web components and standard native browser elements and technologies are used for layout

Widgets

sk-button

<sk-config
    styles='{"antd.css": "/node_modules/skinny-widgets/src/theme/antd/antd.min.css", "jquery-ui.css": "/node_modules/skinny-widgets/src/theme/jquery/jquery-ui.css"}'
    theme="jquery"
    base-path="/node_modules/skinny-widgets/src"
></sk-config>
<sk-button id="myButton" button-type="primary">
    <span slot="label">MyButton</span>
</sk-button>

sk-checkbox

<sk-checkbox theme="antd" base-path="/node_modules/skinny-widgets/src" id="myCheckbox"></sk-checkbox>

sk-datepicker

<sk-datepicker base-path="/node_modules/skinny-widgets/src" id="myDatePicker" value="12/25/2019"></sk-datepicker>

attritutes

fmt - date value format (default: 'm/d/Y')

{Date} d [01-31]
{Short_Day_Name} D [Su, Mo, Tu, We, Th, Fr, Sa]
{Date} j [1-31]
{Full_day_name} l [Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday]
{Week_day_number} w 0=Sunday, 1=Monday, 2=Tuesday etc...
{Nth_day_of_year} z [1-365] except leap years
{Full_month_name} F [January, February, ...]
{Month_number} m [01-12]
{Month_name_stripped_to_three_letters} M [Jan, Feb, ...]
{Month_number} n [1-12]
{Days_in_current_month} t [28-31]
{Full_year} Y [1900, ...]
{Last_two_digits_of_a_year} y [01-99]
{Time_postfix} a [am|pm]
{Time_postfix} A [AM|PM]
{Hours_in_12h_format} g [1-12]
{Hours_in_24h_format} G [0-23]
{Hour_in_12h_format_with_padding} h [01-12]
{Hours_in_24h_format_with_padding} H [00-23]
{Minutes_with_padding} i [00-59]
{Seconds_with_padding} s [00-59]
{Timezone} Z 2 for GMT+2

sk-dialog

<sk-button theme="antd" base-path="/node_modules/skinny-widgets/src" id="myButton" button-type="primary">
    <span slot="label">Show Dialog</span>
</sk-button>
<sk-dialog theme="antd" base-path="/node_modules/skinny-widgets/src" id="myDialog" title="Some Title" type="confirm">
    Hello Dialog !
</sk-dialog>
<script type="module">
    import { SkButton } from '/node_modules/skinny-widgets/sk-button.js';
    import { SkDialog } from '/node_modules/skinny-widgets/sk-dialog.js';
    customElements.define('sk-button', SkButton);
    customElements.define('sk-dialog', SkDialog);

    myButton.addEventListener('click', (event) => {
        myDialog.open();
    });
    myDialog.onconfirm = function(event) {
        console.log('confirmed');
        this.close();
    };
    myDialog.oncancel = function(event) {
        console.log('cancelled');
        this.close();
    };
</script>

sk-tabs

<sk-config
    styles='{"antd.css": "/node_modules/skinny-widgets/src/theme/antd/antd.min.css"}'
    theme="antd"
    base-path="/node_modules/skinny-widgets/src"
    lang="ru"
></sk-config>
<sk-tabs id="tabs">
    <sk-tab title="foo">
        some foo tab contents
    </sk-tab>
    <sk-tab title="bar">
        some bar tab contents
    </sk-tab>
    <sk-tab title="baz">
        some baz tab contents
    </sk-tab>
</sk-tabs>

sk-select

<sk-config
    styles='{"antd.css": "/node_modules/skinny-widgets/src/theme/antd/antd.min.css"}'
    theme="antd"
    base-path="/node_modules/skinny-widgets/src"
    lang="ru"
    id="skConfig"
></sk-config>
<sk-select id="skSelect">
    <option value="default">default</option>
    <option value="antd">antd</option>
    <option value="jquery">jquery</option>
</sk-select>
<script type="module">
    import { SkConfig } from '/node_modules/skinny-widgets/sk-config.js';
    import { SkSelect } from '/node_modules/skinny-widgets/sk-select.js';

    customElements.define('sk-config', SkConfig);
    customElements.define('sk-select', SkSelect);

    skSelect.value = myConfig.getAttribute('theme');
    skSelect.addEventListener('change', (event) => {
        skConfig.setAttribute('theme', event.target.value);
    }, false);
</script>

sk-input

<sk-input id="myInput1" value="foobar"></sk-input>

sk-spinner

<sk-config
    styles='{"antd.css": "/node_modules/skinny-widgets/src/theme/antd/antd.min.css"}'
    theme="antd"
    base-path="/node_modules/skinny-widgets/src"
    lang="ru"
></sk-config>
<sk-button id="skButton" button-type="primary">
    <span slot="label">Show Dialog</span>
</sk-button>
<sk-spinner id="skSpinner"></sk-spinner>

<script type="module">
    import { SkSpinner } from '/node_modules/skinny-widgets/sk-spinner.js';
    import { SkButton } from '/node_modules/skinny-widgets/sk-button.js';

    customElements.define('sk-spinner', SkSpinner);
    customElements.define('sk-button', SkButton);

    skButton.addEventListener('click', (event) => {
        skSpinner.dispatchEvent(new CustomEvent('toggle'));
    });
</script>

Tests

Web Component Tests

run http-server on project root
```
cd skinny-widgets
npx http-server
```
open /test/all.html in browser with developer console opened