@amiceli/papierjs 0.7.0 → 0.9.0

package/dist/types/components.d.ts

@@ -37,6 +37,7 @@ export namespace Components {
         "dark"?: boolean;
         "disabled"?: boolean;
         "large"?: boolean;
+        "loading"?: boolean;
         "outline"?: boolean;
         "small"?: boolean;
         "type"?: ButtonColor;
@@ -60,11 +61,16 @@ export namespace Components {
     }
     interface PDropdownPreview {
     }
+    interface PIcon {
+        "color": string;
+        "icon": string;
+        "size": number;
+    }
     interface PInputText {
         "block"?: boolean;
         "dark"?: boolean;
         "disabled"?: boolean;
-        "hasError"?: boolean;
+        "error"?: string;
         "label"?: string;
         "placeholder"?: string;
         "required"?: boolean;
@@ -92,6 +98,7 @@ export namespace Components {
     interface PNotificationPreview {
     }
     interface PProgressBar {
+        "auto"?: number;
         "dark"?: boolean;
         "striped"?: boolean;
         "type"?: ProgressBarColor;
@@ -104,6 +111,11 @@ export namespace Components {
         "min"?: number;
         "value"?: number;
     }
+    interface PSpinner {
+        "color"?: string;
+        "dark"?: boolean;
+        "large": boolean;
+    }
     interface PSwitch {
         "checked"?: boolean;
         "dark"?: boolean;
@@ -266,8 +278,15 @@ declare global {
         prototype: HTMLPDropdownPreviewElement;
         new (): HTMLPDropdownPreviewElement;
     };
+    interface HTMLPIconElement extends Components.PIcon, HTMLStencilElement {
+    }
+    var HTMLPIconElement: {
+        prototype: HTMLPIconElement;
+        new (): HTMLPIconElement;
+    };
     interface HTMLPInputTextElementEventMap {
         "change": string;
+        "input": string;
     }
     interface HTMLPInputTextElement extends Components.PInputText, HTMLStencilElement {
         addEventListener<K extends keyof HTMLPInputTextElementEventMap>(type: K, listener: (this: HTMLPInputTextElement, ev: PInputTextCustomEvent<HTMLPInputTextElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -364,6 +383,12 @@ declare global {
         prototype: HTMLPSliderElement;
         new (): HTMLPSliderElement;
     };
+    interface HTMLPSpinnerElement extends Components.PSpinner, HTMLStencilElement {
+    }
+    var HTMLPSpinnerElement: {
+        prototype: HTMLPSpinnerElement;
+        new (): HTMLPSpinnerElement;
+    };
     interface HTMLPSwitchElementEventMap {
         "change": boolean;
     }
@@ -426,6 +451,7 @@ declare global {
         "p-dropdown": HTMLPDropdownElement;
         "p-dropdown-item": HTMLPDropdownItemElement;
         "p-dropdown-preview": HTMLPDropdownPreviewElement;
+        "p-icon": HTMLPIconElement;
         "p-input-text": HTMLPInputTextElement;
         "p-leaf": HTMLPLeafElement;
         "p-modal": HTMLPModalElement;
@@ -435,6 +461,7 @@ declare global {
         "p-notification-preview": HTMLPNotificationPreviewElement;
         "p-progress-bar": HTMLPProgressBarElement;
         "p-slider": HTMLPSliderElement;
+        "p-spinner": HTMLPSpinnerElement;
         "p-switch": HTMLPSwitchElement;
         "p-switch-tile": HTMLPSwitchTileElement;
         "p-tab": HTMLPTabElement;
@@ -473,6 +500,7 @@ declare namespace LocalJSX {
         "dark"?: boolean;
         "disabled"?: boolean;
         "large"?: boolean;
+        "loading"?: boolean;
         "outline"?: boolean;
         "small"?: boolean;
         "type"?: ButtonColor;
@@ -498,13 +526,19 @@ declare namespace LocalJSX {
     }
     interface PDropdownPreview {
     }
+    interface PIcon {
+        "color"?: string;
+        "icon"?: string;
+        "size"?: number;
+    }
     interface PInputText {
         "block"?: boolean;
         "dark"?: boolean;
         "disabled"?: boolean;
-        "hasError"?: boolean;
+        "error"?: string;
         "label"?: string;
         "onChange"?: (event: PInputTextCustomEvent<string>) => void;
+        "onInput"?: (event: PInputTextCustomEvent<string>) => void;
         "placeholder"?: string;
         "required"?: boolean;
         "value"?: string;
@@ -530,6 +564,7 @@ declare namespace LocalJSX {
     interface PNotificationPreview {
     }
     interface PProgressBar {
+        "auto"?: number;
         "dark"?: boolean;
         "striped"?: boolean;
         "type"?: ProgressBarColor;
@@ -543,6 +578,11 @@ declare namespace LocalJSX {
         "onChange"?: (event: PSliderCustomEvent<number>) => void;
         "value"?: number;
     }
+    interface PSpinner {
+        "color"?: string;
+        "dark"?: boolean;
+        "large"?: boolean;
+    }
     interface PSwitch {
         "checked"?: boolean;
         "dark"?: boolean;
@@ -592,6 +632,7 @@ declare namespace LocalJSX {
         "p-dropdown": PDropdown;
         "p-dropdown-item": PDropdownItem;
         "p-dropdown-preview": PDropdownPreview;
+        "p-icon": PIcon;
         "p-input-text": PInputText;
         "p-leaf": PLeaf;
         "p-modal": PModal;
@@ -601,6 +642,7 @@ declare namespace LocalJSX {
         "p-notification-preview": PNotificationPreview;
         "p-progress-bar": PProgressBar;
         "p-slider": PSlider;
+        "p-spinner": PSpinner;
         "p-switch": PSwitch;
         "p-switch-tile": PSwitchTile;
         "p-tab": PTab;
@@ -621,6 +663,7 @@ declare module "@stencil/core" {
             "p-dropdown": LocalJSX.PDropdown & JSXBase.HTMLAttributes<HTMLPDropdownElement>;
             "p-dropdown-item": LocalJSX.PDropdownItem & JSXBase.HTMLAttributes<HTMLPDropdownItemElement>;
             "p-dropdown-preview": LocalJSX.PDropdownPreview & JSXBase.HTMLAttributes<HTMLPDropdownPreviewElement>;
+            "p-icon": LocalJSX.PIcon & JSXBase.HTMLAttributes<HTMLPIconElement>;
             "p-input-text": LocalJSX.PInputText & JSXBase.HTMLAttributes<HTMLPInputTextElement>;
             "p-leaf": LocalJSX.PLeaf & JSXBase.HTMLAttributes<HTMLPLeafElement>;
             "p-modal": LocalJSX.PModal & JSXBase.HTMLAttributes<HTMLPModalElement>;
@@ -630,6 +673,7 @@ declare module "@stencil/core" {
             "p-notification-preview": LocalJSX.PNotificationPreview & JSXBase.HTMLAttributes<HTMLPNotificationPreviewElement>;
             "p-progress-bar": LocalJSX.PProgressBar & JSXBase.HTMLAttributes<HTMLPProgressBarElement>;
             "p-slider": LocalJSX.PSlider & JSXBase.HTMLAttributes<HTMLPSliderElement>;
+            "p-spinner": LocalJSX.PSpinner & JSXBase.HTMLAttributes<HTMLPSpinnerElement>;
             "p-switch": LocalJSX.PSwitch & JSXBase.HTMLAttributes<HTMLPSwitchElement>;
             "p-switch-tile": LocalJSX.PSwitchTile & JSXBase.HTMLAttributes<HTMLPSwitchTileElement>;
             "p-tab": LocalJSX.PTab & JSXBase.HTMLAttributes<HTMLPTabElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amiceli/papierjs",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "description": "Papercss web components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -40,8 +40,9 @@
     "loader/"
   ],
   "scripts": {
-    "build": "stencil build",
-    "build:watch": "stencil build --watch",
+    "build:icon": "node scripts/copy-svg.js",
+    "build": "npm run build:icon && stencil build",
+    "build:watch": "npm run build:icon && stencil build --watch",
     "start": "stencil build --dev --watch --serve",
     "test": "stencil test --spec --e2e",
     "test.watch": "stencil test --spec --e2e --watchAll",
@@ -71,6 +72,7 @@
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
     "lefthook": "^1.10.10",
+    "stencil-inline-svg": "^1.1.0",
     "storybook": "^8.5.8"
   },
   "optionalDependencies": {
@@ -79,6 +81,7 @@
   "license": "MIT",
   "dependencies": {
     "feather-icons": "^4.29.2",
-    "papercss": "^1.9.2"
+    "papercss": "^1.9.2",
+    "pixelarticons": "^1.8.1"
   }
 }

package/readme.md

@@ -25,6 +25,7 @@ Available components:
 - [ ] NavBar
 - [X] Tabs
 - [X] Popover as tooltip
+- [X] Icon (with [pixelarticons](https://github.com/halfmage/pixelarticons))
 
 Component features :
 - [X] dropdown since

package/dist/components/p-3e858546.js.map

@@ -1 +0,0 @@
-{"file":"p-3e858546.js","mappings":";;AAAA,MAAM,SAAS,GAAG,mlqFAAmlqF,CAAC;AACtmqF,sBAAe,SAAS;;MCWX,MAAM;IALnB;;;;QAOI,SAAI,GAAiB,SAAS,CAAA;QAE9B,YAAO,GAAa,KAAK,CAAA;QAEzB,UAAK,GAAa,KAAK,CAAA;QAEvB,UAAK,GAAa,KAAK,CAAA;QAEvB,UAAK,GAAa,KAAK,CAAA;QAEvB,aAAQ,GAAa,KAAK,CAAA;QAE1B,SAAI,GAAa,KAAK,CAAA;KAkDzB;IAhDU,QAAQ;QACX,MAAM,KAAK,GAAG,CAAC,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAA;QACtE,IAAI,QAAQ,GAAG,EAAE,CAAA;QAEjB,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;YAC5B,QAAQ,GAAG,aAAa,CAAA;SAC3B;aAAM;YACH,QAAQ,GAAG,OAAO,IAAI,CAAC,IAAI,EAAE,CAAA;SAChC;QAED,IAAI,IAAI,CAAC,QAAQ,EAAE;YACf,QAAQ,GAAG,UAAU,CAAA;SACxB;QAED,QAAQ,GAAG,GAAG,QAAQ,GAAG,IAAI,CAAC,OAAO,GAAG,UAAU,GAAG,EAAE,EAAE,CAAA;QACzD,QAAQ,GAAG,GAAG,QAAQ,GAAG,IAAI,CAAC,KAAK,GAAG,YAAY,GAAG,EAAE,EAAE,CAAA;QACzD,QAAQ,GAAG,GAAG,QAAQ,GAAG,IAAI,CAAC,KAAK,GAAG,YAAY,GAAG,EAAE,EAAE,CAAA;QACzD,QAAQ,GAAG,GAAG,QAAQ,GAAG,IAAI,CAAC,KAAK,GAAG,YAAY,GAAG,EAAE,EAAE,CAAA;QAEzD,OAAO,QAAQ,CAAA;KAClB;IAEM,cAAc;QACjB,IAAI,QAAQ,GAAG,QAAQ,CAAA;QAEvB,IAAI,IAAI,CAAC,KAAK,EAAE;YACZ,QAAQ,GAAG,GAAG,QAAQ,YAAY,CAAA;SACrC;QAED,IAAI,IAAI,CAAC,IAAI,EAAE;YACX,QAAQ,GAAG,GAAG,QAAQ,WAAW,CAAA;SACpC;QAED,OAAO,QAAQ,CAAA;KAClB;IACD,MAAM;QACF,QACI,4DAAK,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,IAC7B,+DACI,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,IAEtB,8DAAQ,CACH,CACP,EACT;KACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/button/button.scss?tag=p-button&encapsulation=shadow","src/components/button/button.tsx"],"sourcesContent":[":host {\n    @import \"../common\";\n\n    @include useBlock();\n}","import { Component, Prop, h } from '@stencil/core'\n\ntype ButtonColor = 'success' | 'secondary' | 'primary' | 'danger' | 'warning'\n\n/**\n * @slot - button content\n */\n@Component({\n    tag: 'p-button',\n    styleUrl: 'button.scss',\n    shadow: true,\n})\nexport class Button {\n    @Prop()\n    type?: ButtonColor = 'primary'\n    @Prop()\n    outline?: boolean = false\n    @Prop()\n    large?: boolean = false\n    @Prop()\n    small?: boolean = false\n    @Prop()\n    block?: boolean = false\n    @Prop()\n    disabled?: boolean = false\n    @Prop()\n    dark?: boolean = false\n\n    public getClass(): string {\n        const types = ['success', 'secondary', 'primary', 'danger', 'warning']\n        let cssClass = ''\n\n        if (!types.includes(this.type)) {\n            cssClass = 'btn-primary'\n        } else {\n            cssClass = `btn-${this.type}`\n        }\n\n        if (this.disabled) {\n            cssClass = 'disabled'\n        }\n\n        cssClass = `${cssClass}${this.outline ? '-outline' : ''}`\n        cssClass = `${cssClass}${this.large ? ' btn-large' : ''}`\n        cssClass = `${cssClass}${this.small ? ' btn-small' : ''}`\n        cssClass = `${cssClass}${this.block ? ' btn-block' : ''}`\n\n        return cssClass\n    }\n\n    public getParentClass() {\n        let cssClass = 'papier'\n\n        if (this.block) {\n            cssClass = `${cssClass} is--block`\n        }\n\n        if (this.dark) {\n            cssClass = `${cssClass} is--dark`\n        }\n\n        return cssClass\n    }\n    render() {\n        return (\n            <div class={this.getParentClass()}>\n                <button\n                    disabled={this.disabled}\n                    type=\"button\"\n                    class={this.getClass()}\n                >\n                    <slot />\n                </button>\n            </div>\n        )\n    }\n}\n"],"version":3}

package/dist/components/p-555df865.js.map

@@ -1 +0,0 @@
-{"file":"p-555df865.js","mappings":";;AAAA,MAAM,QAAQ,GAAG,mrqFAAmrqF,CAAC;AACrsqF,qBAAe,QAAQ;;MCcV,MAAM;IALnB;;;;;QAOI,WAAM,GAAY,KAAK,CAAA;KAkD1B;IA5CU,MAAM,IAAI;QACb,IAAI,CAAC,MAAM,GAAG,IAAI,CAAA;KACrB;IAGM,MAAM,KAAK;QACd,IAAI,CAAC,MAAM,GAAG,KAAK,CAAA;QACnB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;KAC7B;IAED,MAAM;QACF,QACI,EAAC,IAAI,uDACA,IAAI,CAAC,MAAM,KACR,4DAAK,KAAK,EAAC,QAAQ,IACf,4DAAK,KAAK,EAAC,OAAO,IACd,4DACI,KAAK,EAAC,UAAU,EAChB,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,EAAE,GAC7B,EACF,4DAAK,KAAK,EAAC,YAAY,IACnB,6DACI,KAAK,EAAC,WAAW,EACjB,OAAO,EAAE,MAAM,IAAI,CAAC,KAAK,EAAE,QAGxB,EACP,2DAAI,KAAK,EAAC,aAAa,IACnB,6DAAM,IAAI,EAAC,OAAO,GAAG,CACpB,EACL,2DAAI,KAAK,EAAC,gBAAgB,IACtB,6DAAM,IAAI,EAAC,WAAW,GAAG,CACxB,EACL,0DAAG,KAAK,EAAC,YAAY,IACjB,6DAAM,IAAI,EAAC,MAAM,GAAG,CACpB,EACJ,8DAAQ,CACN,CACJ,CACJ,CACT,CACE,EACV;KACJ;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/modal/modal.scss?tag=p-modal&encapsulation=shadow","src/components/modal/modal.tsx"],"sourcesContent":[":host {\n    @import \"../common\";\n\n    .modal {\n        opacity: 1 !important;\n        visibility: visible !important;\n    }\n\n    .modal-body {\n        top: 50% !important;\n    }\n\n    h4.modal-title ::slotted([slot=\"title\"]) {\n        all: inherit !important;\n    }\n}","import {\n    Component,\n    Event,\n    type EventEmitter,\n    Host,\n    Method,\n    State,\n    h,\n} from '@stencil/core'\n\n@Component({\n    tag: 'p-modal',\n    styleUrl: 'modal.scss',\n    shadow: true,\n})\nexport class PModal {\n    @State()\n    isOpen: boolean = false\n\n    @Event({ eventName: 'close' })\n    public closeEvent: EventEmitter<void>\n\n    @Method()\n    public async open() {\n        this.isOpen = true\n    }\n\n    @Method()\n    public async close() {\n        this.isOpen = false\n        this.closeEvent.emit(null)\n    }\n\n    render() {\n        return (\n            <Host>\n                {this.isOpen && (\n                    <div class=\"papier\">\n                        <div class=\"modal\">\n                            <div\n                                class=\"modal-bg\"\n                                onClick={() => this.close()}\n                            />\n                            <div class=\"modal-body\">\n                                <span\n                                    class=\"btn-close\"\n                                    onClick={() => this.close()}\n                                >\n                                    X\n                                </span>\n                                <h4 class=\"modal-title\">\n                                    <slot name=\"title\" />\n                                </h4>\n                                <h5 class=\"modal-subtitle\">\n                                    <slot name=\"sub-title\" />\n                                </h5>\n                                <p class=\"modal-text\">\n                                    <slot name=\"text\" />\n                                </p>\n                                <slot />\n                            </div>\n                        </div>\n                    </div>\n                )}\n            </Host>\n        )\n    }\n}\n"],"version":3}