@paperless/core 0.1.0-alpha.43 → 0.1.0-alpha.430

package/dist/collection/components/atoms/tooltip/tooltip.component.js

@@ -1,44 +1,29 @@
-import { createPopper } from '@popperjs/core';
-import { Component, Element, h, Host, Listen, Prop } from '@stencil/core';
+import { arrow, autoUpdate, computePosition, flip, offset, shift, } from '@floating-ui/dom';
+import { h, Host, } from '@stencil/core';
 export class Tooltip {
   constructor() {
-    /**
-     * The variant of the popover
-     */
+    this._loaded = false;
     this.variant = 'hover';
-    /**
-     * The content of the popover
-     */
     this.popover = null;
-    /**
-     * The content of the popover
-     */
     this.placement = 'top';
-    /**
-     * Wether to show the popover
-     */
+    this.strategy = 'fixed';
     this.show = false;
-    /**
-     * Wether to someone can manually close the popover
-     */
     this.canManuallyClose = true;
-    this._loaded = false;
   }
   componentShouldUpdate() {
-    this._setOptions();
-    if (this._loaded && this.show) {
-      this._show();
+    this._update();
+  }
+  disconnectedCallback() {
+    if (this._cleanup) {
+      this._cleanup();
+      this._cleanup = null;
     }
   }
   render() {
-    return (h(Host, { class: "p-popover" },
-      h("slot", { name: "content" }),
-      h("div", { class: `popover variant-${this.variant}`, role: "popover", ref: (el) => this._load(el) },
-        this.popover ? this.popover : h("slot", { name: "popover" }),
-        h("div", { class: "arrow", "data-popper-arrow": true }))));
+    return (h(Host, { class: "p-popover" }, h("slot", { name: "content" }), h("div", { class: "popover-container" }, h("div", { class: `popover variant-${this.variant}`, role: "popover", "data-placement": this.placement, "data-strategy": this.strategy, ref: (el) => this._load(el) }, this.popover ? this.popover : h("slot", { name: "popover" }), h("div", { class: "arrow" })))));
   }
   clickHandler() {
-    if (this.variant !== 'click') {
+    if (this.variant === 'hover') {
       return;
     }
     if (this._popover.hasAttribute('data-show')) {
@@ -47,7 +32,7 @@ export class Tooltip {
     this._show();
   }
   documentClickHandler() {
-    if (this.variant !== 'click' || !this.canManuallyClose) {
+    if (this.variant === 'hover' || !this.canManuallyClose) {
       return;
     }
     if (!this._popover.hasAttribute('data-show')) {
@@ -71,202 +56,261 @@ export class Tooltip {
     if (!this._loaded) {
       return;
     }
+    this._cleanup = autoUpdate(this._el, this._popover, () => this._update());
     // Make the popover visible
     this._popover.setAttribute('data-show', '');
-    // Enable the event listeners
-    this._popper.setOptions((options) => (Object.assign(Object.assign({}, options), { modifiers: [
-        ...options.modifiers,
-        { name: 'eventListeners', enabled: true },
-      ] })));
     // Update its position
-    this._popper.update();
+    this.isOpen.emit(true);
   }
   _hide() {
     if (!this._loaded) {
       return;
     }
+    if (this._cleanup) {
+      this._cleanup();
+      this._cleanup = null;
+    }
     // Hide the popover
     this._popover.removeAttribute('data-show');
-    // Disable the event listeners
-    this._popper.setOptions((options) => (Object.assign(Object.assign({}, options), { modifiers: [
-        ...options.modifiers,
-        { name: 'eventListeners', enabled: false },
-      ] })));
+    this.isOpen.emit(false);
   }
   _load(popover) {
     this._popover = popover;
     if (popover) {
-      this._popper = createPopper(this._el, popover);
-      this._setOptions();
+      this._update();
       this._loaded = true;
       if (this.show) {
         setTimeout(() => this._show(), 100);
       }
     }
   }
-  _setOptions() {
-    if (!this._popper) {
+  _update() {
+    if (!this._popover) {
       return;
     }
-    this._popper.setOptions({
-      placement: this.variant === 'error' ? 'bottom-start' : this.placement,
-      modifiers: [
-        {
-          name: 'offset',
-          options: {
-            offset: [0, 8],
-          },
-        },
-        {
-          name: 'arrow',
-          options: {
-            padding: 4,
-          },
-        },
+    const arrowEl = this._popover.querySelector('.arrow');
+    if (!arrowEl) {
+      return;
+    }
+    computePosition(this._el, this._popover, {
+      placement: this.variant === 'error' ? 'top-end' : this.placement,
+      strategy: this.strategy,
+      middleware: [
+        offset(this.variant === 'error' ? 14 : 8),
+        flip(),
+        shift(),
+        arrow({ element: arrowEl, padding: 8 }),
       ],
+    }).then(({ x, y, placement, middlewareData }) => {
+      this._popover.dataset.placement = placement;
+      Object.assign(this._popover.style, {
+        top: `${y}px`,
+        left: `${x}px`,
+      });
+      if (middlewareData.arrow) {
+        const { x, y } = middlewareData.arrow;
+        Object.assign(arrowEl.style, {
+          left: this.variant === 'error'
+            ? 'calc(100% - 1rem)'
+            : x != null
+              ? `${x}px`
+              : '',
+          top: y != null ? `${y}px` : '',
+        });
+      }
     });
   }
   static get is() { return "p-tooltip"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["tooltip.component.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["tooltip.component.css"]
-  }; }
-  static get properties() { return {
-    "variant": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'hover' | 'click' | 'error'",
-        "resolved": "\"click\" | \"error\" | \"hover\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The variant of the popover"
-      },
-      "attribute": "variant",
-      "reflect": false,
-      "defaultValue": "'hover'"
-    },
-    "popover": {
-      "type": "any",
-      "mutable": false,
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["tooltip.component.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["tooltip.component.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "variant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'hover' | 'click' | 'error'",
+          "resolved": "\"click\" | \"error\" | \"hover\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The variant of the popover"
+        },
+        "attribute": "variant",
+        "reflect": false,
+        "defaultValue": "'hover'"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The content of the popover"
+      "popover": {
+        "type": "any",
+        "mutable": false,
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The content of the popover"
+        },
+        "attribute": "popover",
+        "reflect": false,
+        "defaultValue": "null"
       },
-      "attribute": "popover",
-      "reflect": false,
-      "defaultValue": "null"
-    },
-    "placement": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "Placement",
-        "resolved": "\"auto\" | \"auto-end\" | \"auto-start\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
-        "references": {
-          "Placement": {
-            "location": "import",
-            "path": "@popperjs/core"
+      "placement": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Placement",
+          "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+          "references": {
+            "Placement": {
+              "location": "import",
+              "path": "@floating-ui/dom"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The content of the popover"
-      },
-      "attribute": "placement",
-      "reflect": false,
-      "defaultValue": "'top'"
-    },
-    "show": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Wether to show the popover"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The placement of the popover"
+        },
+        "attribute": "placement",
+        "reflect": false,
+        "defaultValue": "'top'"
       },
-      "attribute": "show",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "canManuallyClose": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "strategy": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Strategy",
+          "resolved": "\"absolute\" | \"fixed\"",
+          "references": {
+            "Strategy": {
+              "location": "import",
+              "path": "@floating-ui/dom"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The strategy of the popover placement"
+        },
+        "attribute": "strategy",
+        "reflect": false,
+        "defaultValue": "'fixed'"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Wether to someone can manually close the popover"
+      "show": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Wether to show the popover"
+        },
+        "attribute": "show",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "attribute": "can-manually-close",
-      "reflect": false,
-      "defaultValue": "true"
-    }
-  }; }
+      "canManuallyClose": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Wether to someone can manually close the popover"
+        },
+        "attribute": "can-manually-close",
+        "reflect": false,
+        "defaultValue": "true"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "isOpen",
+        "name": "isOpen",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Open change event"
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }];
+  }
   static get elementRef() { return "_el"; }
-  static get listeners() { return [{
-      "name": "click",
-      "method": "clickHandler",
-      "target": undefined,
-      "capture": true,
-      "passive": false
-    }, {
-      "name": "click",
-      "method": "documentClickHandler",
-      "target": "document",
-      "capture": true,
-      "passive": false
-    }, {
-      "name": "mouseenter",
-      "method": "mouseEnterHandler",
-      "target": undefined,
-      "capture": false,
-      "passive": true
-    }, {
-      "name": "focus",
-      "method": "mouseEnterHandler",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "mouseleave",
-      "method": "mouseLeaveHandler",
-      "target": undefined,
-      "capture": false,
-      "passive": true
-    }, {
-      "name": "blur",
-      "method": "mouseLeaveHandler",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
+  static get listeners() {
+    return [{
+        "name": "click",
+        "method": "clickHandler",
+        "target": undefined,
+        "capture": true,
+        "passive": false
+      }, {
+        "name": "click",
+        "method": "documentClickHandler",
+        "target": "document",
+        "capture": true,
+        "passive": false
+      }, {
+        "name": "mouseenter",
+        "method": "mouseEnterHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": true
+      }, {
+        "name": "focus",
+        "method": "mouseEnterHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "mouseleave",
+        "method": "mouseLeaveHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": true
+      }, {
+        "name": "blur",
+        "method": "mouseLeaveHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
 }
+//# sourceMappingURL=tooltip.component.js.map

package/dist/collection/components/atoms/tooltip/tooltip.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.component.js","sourceRoot":"","sources":["../../../../src/components/atoms/tooltip/tooltip.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    arrow,\n    autoUpdate,\n    computePosition,\n    flip,\n    offset,\n    Placement,\n    shift,\n    Strategy,\n} from '@floating-ui/dom';\nimport {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Listen,\n    Prop,\n} from '@stencil/core';\n\n@Component({\n    tag: 'p-tooltip',\n    styleUrl: 'tooltip.component.scss',\n    shadow: true,\n})\nexport class Tooltip {\n    /**\n     * The variant of the popover\n     */\n    @Prop() variant: 'hover' | 'click' | 'error' = 'hover';\n\n    /**\n     * The content of the popover\n     */\n    @Prop() popover: any = null;\n\n    /**\n     * The placement of the popover\n     */\n    @Prop() placement: Placement = 'top';\n\n    /**\n     * The strategy of the popover placement\n     */\n    @Prop() strategy: Strategy = 'fixed';\n\n    /**\n     * Wether to show the popover\n     */\n    @Prop() show: boolean = false;\n\n    /**\n     * Wether to someone can manually close the popover\n     */\n    @Prop() canManuallyClose: boolean = true;\n\n    /**\n     * Open change event\n     */\n    @Event() isOpen: EventEmitter<boolean>;\n\n    /**\n     * The host element\n     */\n    @Element() private _el: HTMLElement;\n\n    private _loaded = false;\n    private _popover: HTMLElement;\n    private _cleanup: () => void;\n\n    componentShouldUpdate() {\n        this._update();\n    }\n\n    disconnectedCallback() {\n        if (this._cleanup) {\n            this._cleanup();\n            this._cleanup = null;\n        }\n    }\n\n    render() {\n        return (\n            <Host class=\"p-popover\">\n                <slot name=\"content\" />\n                <div class=\"popover-container\">\n                    <div\n                        class={`popover variant-${this.variant}`}\n                        role=\"popover\"\n                        data-placement={this.placement}\n                        data-strategy={this.strategy}\n                        ref={(el) => this._load(el)}\n                    >\n                        {this.popover ? this.popover : <slot name=\"popover\" />}\n                        <div class=\"arrow\"></div>\n                    </div>\n                </div>\n            </Host>\n        );\n    }\n\n    @Listen('click', { capture: true })\n    protected clickHandler() {\n        if (this.variant === 'hover') {\n            return;\n        }\n\n        if (this._popover.hasAttribute('data-show')) {\n            return;\n        }\n\n        this._show();\n    }\n\n    @Listen('click', { target: 'document', capture: true })\n    protected documentClickHandler() {\n        if (this.variant === 'hover' || !this.canManuallyClose) {\n            return;\n        }\n\n        if (!this._popover.hasAttribute('data-show')) {\n            return;\n        }\n\n        this._hide();\n    }\n\n    @Listen('mouseenter')\n    @Listen('focus')\n    protected mouseEnterHandler() {\n        if (this.variant !== 'hover') {\n            return;\n        }\n\n        this._show();\n    }\n\n    @Listen('mouseleave')\n    @Listen('blur')\n    protected mouseLeaveHandler() {\n        if (this.show || this.variant !== 'hover') {\n            return;\n        }\n\n        this._hide();\n    }\n\n    private _show() {\n        if (!this._loaded) {\n            return;\n        }\n\n        this._cleanup = autoUpdate(this._el, this._popover, () =>\n            this._update()\n        );\n        // Make the popover visible\n        this._popover.setAttribute('data-show', '');\n\n        // Update its position\n        this.isOpen.emit(true);\n    }\n\n    private _hide() {\n        if (!this._loaded) {\n            return;\n        }\n\n        if (this._cleanup) {\n            this._cleanup();\n            this._cleanup = null;\n        }\n\n        // Hide the popover\n        this._popover.removeAttribute('data-show');\n        this.isOpen.emit(false);\n    }\n\n    private _load(popover: HTMLElement) {\n        this._popover = popover;\n        if (popover) {\n            this._update();\n            this._loaded = true;\n\n            if (this.show) {\n                setTimeout(() => this._show(), 100);\n            }\n        }\n    }\n\n    private _update() {\n        if (!this._popover) {\n            return;\n        }\n\n        const arrowEl = this._popover.querySelector('.arrow') as HTMLElement;\n        if (!arrowEl) {\n            return;\n        }\n\n        computePosition(this._el, this._popover, {\n            placement: this.variant === 'error' ? 'top-end' : this.placement,\n            strategy: this.strategy,\n\n            middleware: [\n                offset(this.variant === 'error' ? 14 : 8),\n                flip(),\n                shift(),\n                arrow({ element: arrowEl, padding: 8 }),\n            ],\n        }).then(({ x, y, placement, middlewareData }) => {\n            this._popover.dataset.placement = placement;\n            Object.assign(this._popover.style, {\n                top: `${y}px`,\n                left: `${x}px`,\n            });\n\n            if (middlewareData.arrow) {\n                const { x, y } = middlewareData.arrow;\n\n                Object.assign(arrowEl.style, {\n                    left:\n                        this.variant === 'error'\n                            ? 'calc(100% - 1rem)'\n                            : x != null\n                            ? `${x}px`\n                            : '',\n                    top: y != null ? `${y}px` : '',\n                });\n            }\n        });\n    }\n}\n"]}

package/dist/collection/components/helpers/table-column/table-column.component.js

@@ -0,0 +1,151 @@
+export class TableColumn {
+  constructor() {
+    this.path = undefined;
+    this.type = 'td';
+    this.name = undefined;
+    this.useSlot = false;
+    this.align = 'start';
+    this.sizes = 'auto';
+  }
+  componentDidUpdate() {
+    this.tableDefinitionChanged.emit(true);
+  }
+  render() {
+    return;
+  }
+  static get is() { return "p-table-column"; }
+  static get properties() {
+    return {
+      "path": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The path of the value of the item you want to display"
+        },
+        "attribute": "path",
+        "reflect": true
+      },
+      "type": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "'td' | 'th'",
+          "resolved": "\"td\" | \"th\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The type of the column"
+        },
+        "attribute": "type",
+        "reflect": true,
+        "defaultValue": "'td'"
+      },
+      "name": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The name of the column"
+        },
+        "attribute": "name",
+        "reflect": true
+      },
+      "useSlot": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Wether the column should use the slot"
+        },
+        "attribute": "use-slot",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "align": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "'start' | 'center' | 'end'",
+          "resolved": "\"center\" | \"end\" | \"start\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The alignment of the column"
+        },
+        "attribute": "align",
+        "reflect": true,
+        "defaultValue": "'start'"
+      },
+      "sizes": {
+        "type": "any",
+        "mutable": true,
+        "complexType": {
+          "original": "'auto' | number | TableColumnSizes",
+          "resolved": "\"auto\" | TableColumnSizes | number",
+          "references": {
+            "TableColumnSizes": {
+              "location": "import",
+              "path": "../../../types/table"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The sizes of the column"
+        },
+        "attribute": "sizes",
+        "reflect": false,
+        "defaultValue": "'auto'"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "tableDefinitionChanged",
+        "name": "tableDefinitionChanged",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Event to let the table know it has to re render"
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }];
+  }
+}
+//# sourceMappingURL=table-column.component.js.map