@amiceli/papierjs 0.2.0 → 0.4.0

package/dist/collection/components/form/slider/sliders.js

@@ -0,0 +1,155 @@
+import { Host, h, } from "@stencil/core";
+export class PSliders {
+    constructor() {
+        this.value = 0;
+        this.min = 0;
+        this.block = false;
+        this.dark = false;
+    }
+    onInput(e) {
+        this.changeEvent.emit(Number.parseInt(e.target.value));
+    }
+    render() {
+        return (h(Host, { key: '53a474f15345a79aa1835998caece0f07e47725e' }, h("div", { key: 'd75f9483b2593d686b92a30fdbfc652360c1996d', class: {
+                papier: true,
+                'is--block': this.block,
+                'is--dark': this.dark,
+            } }, h("div", { key: '5d7fe2af8458cfd0ae3831d32e85e62bb602f220', class: "form-group" }, h("input", { key: 'bf1230a190b68df8fe776129f82263c284ef6785', class: "input-block", type: "range", min: this.min, max: this.max, value: this.value, onInput: (e) => {
+                this.onInput(e);
+            } })))));
+    }
+    static get is() { return "p-slider"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["slider.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["slider.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "value",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "min": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "min",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "max",
+                "reflect": false
+            },
+            "block": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "block",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "dark": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "dark",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "changeEvent",
+                "name": "change",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=sliders.js.map

package/dist/collection/components/form/slider/sliders.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sliders.js","sourceRoot":"","sources":["../../../../src/components/form/slider/sliders.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,SAAS,EACT,KAAK,EAEL,IAAI,EACJ,IAAI,EACJ,CAAC,GACJ,MAAM,eAAe,CAAA;AAOtB,MAAM,OAAO,QAAQ;IALrB;QAOI,UAAK,GAAY,CAAC,CAAA;QAElB,QAAG,GAAY,CAAC,CAAA;QAIhB,UAAK,GAAa,KAAK,CAAA;QAEvB,SAAI,GAAa,KAAK,CAAA;KAqCzB;IAhCU,OAAO,CAAC,CAAQ;QACnB,IAAI,CAAC,WAAW,CAAC,IAAI,CACjB,MAAM,CAAC,QAAQ,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CACxD,CAAA;IACL,CAAC;IAED,MAAM;QACF,OAAO,CACH,EAAC,IAAI;YACD,4DACI,KAAK,EAAE;oBACH,MAAM,EAAE,IAAI;oBACZ,WAAW,EAAE,IAAI,CAAC,KAAK;oBACvB,UAAU,EAAE,IAAI,CAAC,IAAI;iBACxB;gBAED,4DAAK,KAAK,EAAC,YAAY;oBACnB,8DACI,KAAK,EAAC,aAAa,EACnB,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;4BACX,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA;wBACnB,CAAC,GACH,CACA,CACJ,CACH,CACV,CAAA;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import {\n    Component,\n    Event,\n    type EventEmitter,\n    Host,\n    Prop,\n    h,\n} from '@stencil/core'\n\n@Component({\n    tag: 'p-slider',\n    styleUrl: 'slider.scss',\n    shadow: true,\n})\nexport class PSliders {\n    @Prop()\n    value?: number = 0\n    @Prop()\n    min?: number = 0\n    @Prop()\n    max?: number\n    @Prop()\n    block?: boolean = false\n    @Prop()\n    dark?: boolean = false\n\n    @Event({ eventName: 'change' })\n    public changeEvent: EventEmitter<number>\n\n    public onInput(e: Event) {\n        this.changeEvent.emit(\n            Number.parseInt((e.target as HTMLInputElement).value),\n        )\n    }\n\n    render() {\n        return (\n            <Host>\n                <div\n                    class={{\n                        papier: true,\n                        'is--block': this.block,\n                        'is--dark': this.dark,\n                    }}\n                >\n                    <div class=\"form-group\">\n                        <input\n                            class=\"input-block\"\n                            type=\"range\"\n                            min={this.min}\n                            max={this.max}\n                            value={this.value}\n                            onInput={(e) => {\n                                this.onInput(e)\n                            }}\n                        />\n                    </div>\n                </div>\n            </Host>\n        )\n    }\n}\n"]}

package/dist/collection/components/form/slider/sliders.preview.js

@@ -0,0 +1,17 @@
+export function previewSlider() {
+    const alertObserver = new MutationObserver(() => {
+        const slider = document.querySelector('#for-slider');
+        const sliderSpan = document.querySelector('#for-slider-label');
+        if (slider && sliderSpan) {
+            slider.addEventListener('change', (e) => {
+                sliderSpan.textContent = e.detail;
+            });
+            alertObserver.disconnect();
+        }
+    });
+    alertObserver.observe(document.body, {
+        childList: true,
+        subtree: true,
+    });
+}
+//# sourceMappingURL=sliders.preview.js.map

package/dist/collection/components/form/slider/sliders.preview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sliders.preview.js","sourceRoot":"","sources":["../../../../src/components/form/slider/sliders.preview.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,aAAa;IACzB,MAAM,aAAa,GAAG,IAAI,gBAAgB,CAAC,GAAG,EAAE;QAC5C,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,CAAA;QACpD,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAA;QAE9D,IAAI,MAAM,IAAI,UAAU,EAAE,CAAC;YACvB,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAc,EAAE,EAAE;gBACjD,UAAU,CAAC,WAAW,GAAG,CAAC,CAAC,MAAM,CAAA;YACrC,CAAC,CAAC,CAAA;YAEF,aAAa,CAAC,UAAU,EAAE,CAAA;QAC9B,CAAC;IACL,CAAC,CAAC,CAAA;IAEF,aAAa,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,EAAE;QACjC,SAAS,EAAE,IAAI;QACf,OAAO,EAAE,IAAI;KAChB,CAAC,CAAA;AACN,CAAC","sourcesContent":["export function previewSlider() {\n    const alertObserver = new MutationObserver(() => {\n        const slider = document.querySelector('#for-slider')\n        const sliderSpan = document.querySelector('#for-slider-label')\n\n        if (slider && sliderSpan) {\n            slider.addEventListener('change', (e: CustomEvent) => {\n                sliderSpan.textContent = e.detail\n            })\n\n            alertObserver.disconnect()\n        }\n    })\n\n    alertObserver.observe(document.body, {\n        childList: true,\n        subtree: true,\n    })\n}\n"]}

package/dist/collection/components/form/slider/stories/switch.stories.js

@@ -0,0 +1,33 @@
+export default {
+    title: 'Form/Slider/Playground',
+}
+
+const Template = (args) => {
+    const content = `
+        <p-slider
+            min="${args.min}"
+            max="${args.max}"
+            value="${args.value}"
+            ${args.darkMode ? 'dark' : ''}
+            ${args.block ? 'block' : ''}
+        >
+        </p-slider>`
+
+    return args.darkMode
+        ? `
+        <div style="padding: 10px; box-sizing: border-box; width: 100%; background: #41403e">
+            ${content}
+        </div>
+    `
+        : content
+}
+
+export const Playground = Template.bind({})
+
+Playground.args = {
+    value: 10,
+    min: 0,
+    max: 100,
+    block: false,
+    darkMode: false,
+}

package/dist/collection/components/form/switch/stories/switch.stories.js

@@ -0,0 +1,50 @@
+export default {
+    title: 'Form/Switch/Playground',
+    argTypes: {
+        round: {
+            name: 'round',
+            control: 'boolean',
+        },
+        square: {
+            name: 'square',
+            control: 'boolean',
+        },
+        checked: {
+            name: 'checked',
+            control: 'boolean',
+        },
+        darkMode: {
+            name: 'dark mode',
+            control: 'boolean',
+        },
+    },
+    tags: ['!autodocs'],
+}
+
+const Template = (args) => {
+    const content = `
+        <p-switch
+            ${args.round ? 'round' : ''}
+            ${args.square ? 'square' : ''}
+            ${args.darkMode ? 'dark' : ''}
+            ${args.checked ? 'checked' : ''}
+        >
+        </p-switch>`
+
+    return args.darkMode
+        ? `
+        <div style="padding: 10px; box-sizing: border-box; width: 100%; background: #41403e">
+            ${content}
+        </div>
+    `
+        : content
+}
+
+export const Playground = Template.bind({})
+
+Playground.args = {
+    round: false,
+    square: false,
+    checked: false,
+    darkMode: false,
+}