@amiceli/papierjs 0.4.0 → 0.6.0

package/dist/collection/components/tabs/tabs/tabs.js

@@ -0,0 +1,98 @@
+import { Host, h } from "@stencil/core";
+/** @slot - slot with <p-tab> components */
+export class PTabs {
+    constructor() {
+        this.tabs = [];
+        this.dark = false;
+    }
+    componentDidLoad() {
+        const slot = this.el.shadowRoot.querySelector('slot');
+        const tabs = slot.assignedElements();
+        this.tabs = tabs;
+        for (const tab of this.tabs) {
+            if (this.dark) {
+                ;
+                tab.setAttribute('dark', 'true');
+            }
+            else {
+                ;
+                tab.removeAttribute('dark');
+            }
+        }
+        this.updateSelectedTab();
+    }
+    onSelectTab(t) {
+        for (const tab of this.tabs) {
+            tab.selected = false;
+        }
+        t.selected = true;
+        this.selectedTab = t;
+    }
+    updateSelectedTab() {
+        this.selectedTab = this.tabs.find((s) => s.selected === true);
+        if (!this.selectedTab) {
+            if (this.tabs.at(0)) {
+                this.onSelectTab(this.tabs.at(0));
+            }
+        }
+    }
+    getTabClass(tab) {
+        var _a;
+        const isSame = tab.title === ((_a = this.selectedTab) === null || _a === void 0 ? void 0 : _a.title);
+        return {
+            'is--selected': isSame && tab.selected,
+        };
+    }
+    render() {
+        return (h(Host, { key: 'da40a21de1a04bfbe55ca13d13bb42f18711bccc' }, h("div", { key: '57ae24e8054245c0148eeedffa3e022c107a9457', class: {
+                'is--dark': this.dark,
+                papier: true,
+            } }, h("div", { key: 'aff4aa296e27b60428a6163d1122e9811b8e3f8c', class: "row flex-spaces tabs" }, this.tabs.map((t) => {
+            return (h("label", { class: this.getTabClass(t), htmlFor: "tab1", key: t.title, onClick: () => this.onSelectTab(t) }, t.title));
+        }), h("div", { key: '79bfdea23e0aced78e2fb7f94f3b1b13c5a05562', class: "content" }, h("slot", { key: '40c497f849e95b148ccf1be29f1379de2b9c15a6' }))))));
+    }
+    static get is() { return "p-tabs"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tabs.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tabs.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "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 states() {
+        return {
+            "tabs": {},
+            "selectedTab": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=tabs.js.map

package/dist/collection/components/tabs/tabs/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../../src/components/tabs/tabs/tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAA;AAGxE,2CAA2C;AAM3C,MAAM,OAAO,KAAK;IALlB;QASI,SAAI,GAAW,EAAE,CAAA;QAIjB,SAAI,GAAa,KAAK,CAAA;KA2EzB;IAzEU,gBAAgB;QACnB,MAAM,IAAI,GAAG,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAA;QACrD,MAAM,IAAI,GAAG,IAAI,CAAC,gBAAgB,EAAuB,CAAA;QAEzD,IAAI,CAAC,IAAI,GAAG,IAAI,CAAA;QAEhB,KAAK,MAAM,GAAG,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YAC1B,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;gBACZ,CAAC;gBAAC,GAA8B,CAAC,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;YACjE,CAAC;iBAAM,CAAC;gBACJ,CAAC;gBAAC,GAA8B,CAAC,eAAe,CAAC,MAAM,CAAC,CAAA;YAC5D,CAAC;QACL,CAAC;QACD,IAAI,CAAC,iBAAiB,EAAE,CAAA;IAC5B,CAAC;IAEM,WAAW,CAAC,CAAO;QACtB,KAAK,MAAM,GAAG,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YAC1B,GAAG,CAAC,QAAQ,GAAG,KAAK,CAAA;QACxB,CAAC;QACD,CAAC,CAAC,QAAQ,GAAG,IAAI,CAAA;QAEjB,IAAI,CAAC,WAAW,GAAG,CAAC,CAAA;IACxB,CAAC;IAEM,iBAAiB;QACpB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,KAAK,IAAI,CAAC,CAAA;QAE7D,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;YACpB,IAAI,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;gBAClB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;YACrC,CAAC;QACL,CAAC;IACL,CAAC;IAEM,WAAW,CAAC,GAAS;;QACxB,MAAM,MAAM,GAAG,GAAG,CAAC,KAAK,MAAK,MAAA,IAAI,CAAC,WAAW,0CAAE,KAAK,CAAA,CAAA;QAEpD,OAAO;YACH,cAAc,EAAE,MAAM,IAAI,GAAG,CAAC,QAAQ;SACzC,CAAA;IACL,CAAC;IAED,MAAM;QACF,OAAO,CACH,EAAC,IAAI;YACD,4DACI,KAAK,EAAE;oBACH,UAAU,EAAE,IAAI,CAAC,IAAI;oBACrB,MAAM,EAAE,IAAI;iBACf;gBAED,4DAAK,KAAK,EAAC,sBAAsB;oBAC5B,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;wBACjB,OAAO,CACH,aACI,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAC1B,OAAO,EAAC,MAAM,EACd,GAAG,EAAE,CAAC,CAAC,KAAK,EACZ,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAEjC,CAAC,CAAC,KAAK,CACJ,CACX,CAAA;oBACL,CAAC,CAAC;oBACF,4DAAK,KAAK,EAAC,SAAS;wBAChB,8DAAQ,CACN,CACJ,CACJ,CACH,CACV,CAAA;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Element, Host, Prop, State, h } from '@stencil/core'\nimport type { PTab } from '../tab/tab'\n\n/** @slot - slot with <p-tab> components */\n@Component({\n    tag: 'p-tabs',\n    styleUrl: 'tabs.scss',\n    shadow: true,\n})\nexport class PTabs {\n    @Element()\n    public el: HTMLElement\n    @State()\n    tabs: PTab[] = []\n    @State()\n    selectedTab?: PTab\n    @Prop()\n    dark?: boolean = false\n\n    public componentDidLoad() {\n        const slot = this.el.shadowRoot.querySelector('slot')\n        const tabs = slot.assignedElements() as unknown as PTab[]\n\n        this.tabs = tabs\n\n        for (const tab of this.tabs) {\n            if (this.dark) {\n                ;(tab as unknown as HTMLElement).setAttribute('dark', 'true')\n            } else {\n                ;(tab as unknown as HTMLElement).removeAttribute('dark')\n            }\n        }\n        this.updateSelectedTab()\n    }\n\n    public onSelectTab(t: PTab) {\n        for (const tab of this.tabs) {\n            tab.selected = false\n        }\n        t.selected = true\n\n        this.selectedTab = t\n    }\n\n    public updateSelectedTab() {\n        this.selectedTab = this.tabs.find((s) => s.selected === true)\n\n        if (!this.selectedTab) {\n            if (this.tabs.at(0)) {\n                this.onSelectTab(this.tabs.at(0))\n            }\n        }\n    }\n\n    public getTabClass(tab: PTab) {\n        const isSame = tab.title === this.selectedTab?.title\n\n        return {\n            'is--selected': isSame && tab.selected,\n        }\n    }\n\n    render() {\n        return (\n            <Host>\n                <div\n                    class={{\n                        'is--dark': this.dark,\n                        papier: true,\n                    }}\n                >\n                    <div class=\"row flex-spaces tabs\">\n                        {this.tabs.map((t) => {\n                            return (\n                                <label\n                                    class={this.getTabClass(t)}\n                                    htmlFor=\"tab1\"\n                                    key={t.title}\n                                    onClick={() => this.onSelectTab(t)}\n                                >\n                                    {t.title}\n                                </label>\n                            )\n                        })}\n                        <div class=\"content\">\n                            <slot />\n                        </div>\n                    </div>\n                </div>\n            </Host>\n        )\n    }\n}\n"]}

package/dist/collection/components/tooltip/stories/tooltip.stories.js

@@ -0,0 +1,31 @@
+export default {
+    title: 'Components/Tooltip/Playground',
+}
+
+const Template = (args) => {
+    return `
+        <div style="width: 400px">
+            <p-tooltip 
+                ${args.disabled ? 'disabled' : ''}
+                ${args.top ? 'top' : ''}
+                ${args.right ? 'right' : ''}
+                ${args.left ? 'left' : ''}
+                ${args.bottom ? 'bottom' : ''}
+                title="${args.title}"
+            >
+                <p-button>Click here ;)</p-button>
+            </p-tooltip>
+        </div>
+    `
+}
+
+export const Playground = Template.bind({})
+
+Playground.args = {
+    title: 'Awesome',
+    left: false,
+    right: true,
+    bottom: false,
+    top: false,
+    disabled: false,
+}