@paperless/core 0.1.0-alpha.2 → 0.1.0-alpha.20

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

@@ -3,60 +3,102 @@ import { Component, Element, h, Host, Listen, Prop } from '@stencil/core';
 export class Tooltip {
   constructor() {
     /**
-     * The content of the tooltip
+     * The variant of the popover
      */
-    this.content = null;
+    this.variant = 'hover';
     /**
-     * The content of the tooltip
+     * The content of the popover
+     */
+    this.popover = null;
+    /**
+     * The content of the popover
      */
     this.placement = 'top';
     /**
-     * Wether to force show the tooltip
+     * Wether to show the popover
+     */
+    this.show = false;
+    /**
+     * Wether to someone can manually close the popover
      */
-    this.forceShow = false;
+    this.canManuallyClose = true;
     this._loaded = false;
   }
   componentShouldUpdate() {
     this._setOptions();
-    if (this.forceShow) {
+    if (this._loaded && this.show) {
       this._show();
     }
   }
   render() {
-    return (h(Host, { class: "p-tooltip" },
-      h("slot", null),
-      h("div", { class: "tooltip", role: "tooltip", ref: el => this._load(el) },
-        this.content,
+    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 }))));
   }
+  clickHandler() {
+    if (this.variant === 'hover') {
+      return;
+    }
+    if (this._popover.hasAttribute('data-show')) {
+      return;
+    }
+    if (!this._popover.hasAttribute('data-show')) {
+      this._show();
+    }
+  }
+  documentClickHandler() {
+    if (this.variant === 'hover' || !this.canManuallyClose) {
+      return;
+    }
+    if (!this._popover.hasAttribute('data-show')) {
+      return;
+    }
+    if (this._popover.hasAttribute('data-show')) {
+      this._hide();
+    }
+  }
+  mouseEnterHandler() {
+    if (this.variant === 'click') {
+      return;
+    }
+    this._show();
+  }
+  mouseLeaveHandler() {
+    if (this.show || this.variant === 'click') {
+      return;
+    }
+    this._hide();
+  }
   _show() {
     if (!this._loaded) {
       return;
     }
-    // Make the tooltip visible
-    this._tooltip.setAttribute('data-show', '');
+    // 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();
   }
   _hide() {
-    if (!this._loaded && !this.forceShow) {
+    if (!this._loaded) {
       return;
     }
-    // Hide the tooltip
-    this._tooltip.removeAttribute('data-show');
+    // 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 }] })));
   }
-  _load(tooltip) {
-    this._tooltip = tooltip;
-    if (tooltip) {
-      this._popper = createPopper(this._el, tooltip);
+  _load(popover) {
+    this._popover = popover;
+    if (popover) {
+      this._popper = createPopper(this._el, popover);
       this._setOptions();
       this._loaded = true;
-      if (this.forceShow) {
-        this._show();
+      if (this.show) {
+        setTimeout(() => this._show(), 100);
       }
     }
   }
@@ -85,7 +127,25 @@ export class Tooltip {
     "$": ["tooltip.component.css"]
   }; }
   static get properties() { return {
-    "content": {
+    "variant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'hover' | 'click'",
+        "resolved": "\"click\" | \"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": {
@@ -97,9 +157,9 @@ export class Tooltip {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The content of the tooltip"
+        "text": "The content of the popover"
       },
-      "attribute": "content",
+      "attribute": "popover",
       "reflect": false,
       "defaultValue": "null"
     },
@@ -120,13 +180,13 @@ export class Tooltip {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The content of the tooltip"
+        "text": "The content of the popover"
       },
       "attribute": "placement",
       "reflect": false,
       "defaultValue": "'top'"
     },
-    "forceShow": {
+    "show": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -138,35 +198,65 @@ export class Tooltip {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Wether to force show the tooltip"
+        "text": "Wether to show the popover"
       },
-      "attribute": "force-show",
+      "attribute": "show",
       "reflect": false,
       "defaultValue": "false"
+    },
+    "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 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": "_show",
+      "method": "mouseEnterHandler",
       "target": undefined,
       "capture": false,
       "passive": true
     }, {
       "name": "focus",
-      "method": "_show",
+      "method": "mouseEnterHandler",
       "target": undefined,
       "capture": false,
       "passive": false
     }, {
       "name": "mouseleave",
-      "method": "_hide",
+      "method": "mouseLeaveHandler",
       "target": undefined,
       "capture": false,
       "passive": true
     }, {
       "name": "blur",
-      "method": "_hide",
+      "method": "mouseLeaveHandler",
       "target": undefined,
       "capture": false,
       "passive": false

package/dist/collection/components/molecules/navigation-item/navigation-item.component.css

@@ -0,0 +1,28 @@
+:host {
+  @apply w-full inline-block mb-1;
+}
+:host > a {
+  @apply w-full h-8 px-2 cursor-pointer rounded-large;
+  @apply flex items-center;
+  @apply text-storm-medium font-medium;
+  @apply hover:bg-indigo-light hover:text-storm-dark;
+}
+:host > a > p-icon {
+  @apply text-mystic-dark mr-3;
+}
+:host > a > p-counter {
+  @apply ml-auto;
+}
+:host > a > span.has-counter {
+  @apply mr-3;
+}
+:host > a:hover > p-icon {
+  @apply text-storm-vague;
+}
+
+:host(.active) > a {
+  @apply text-indigo bg-indigo-light;
+}
+:host(.active) > a > p-icon {
+  @apply text-indigo;
+}

package/dist/collection/components/molecules/navigation-item/navigation-item.component.js

@@ -0,0 +1,118 @@
+import { Component, h, Host, Prop } from '@stencil/core';
+export class NavigationItem {
+  constructor() {
+    /**
+     * Wether the navigation item is active
+     */
+    this.active = false;
+  }
+  render() {
+    return (h(Host, { class: `p-navigation-item ${this.active && 'active'}` },
+      h("a", { href: this.href, target: this.target },
+        this.icon && h("p-icon", { variant: this.icon }),
+        h("span", { class: this.counter && 'has-counter' },
+          h("slot", null)),
+        this.counter && h("p-counter", null, this.counter))));
+  }
+  static get is() { return "p-navigation-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["navigation-item.component.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["navigation-item.component.css"]
+  }; }
+  static get properties() { return {
+    "active": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether the navigation item is active"
+      },
+      "attribute": "active",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "icon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "IconVariant",
+        "resolved": "\"arrow\" | \"attachment\" | \"bread\" | \"calendar\" | \"car\" | \"checkmark\" | \"chevron\" | \"clock\" | \"cogs\" | \"comment\" | \"document\" | \"download\" | \"envelope\" | \"explanation\" | \"eye\" | \"filter\" | \"grid\" | \"headset\" | \"list\" | \"location\" | \"megaphone\" | \"minus\" | \"negative\" | \"pagination\" | \"payment\" | \"pencil\" | \"person\" | \"plus\" | \"question\" | \"receipt\" | \"report\" | \"search\" | \"settings\" | \"sick\" | \"tachometer\" | \"tool\" | \"trash\" | \"turn\" | \"upload\" | \"warning\"",
+        "references": {
+          "IconVariant": {
+            "location": "import",
+            "path": "../../atoms/icon/icon.component"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Icon of the navigation item"
+      },
+      "attribute": "icon",
+      "reflect": false
+    },
+    "counter": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "number | string",
+        "resolved": "number | string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Icon of the navigation item"
+      },
+      "attribute": "counter",
+      "reflect": false
+    },
+    "href": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The href of the navigation item"
+      },
+      "attribute": "href",
+      "reflect": false
+    },
+    "target": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The target of the navigation item"
+      },
+      "attribute": "target",
+      "reflect": false
+    }
+  }; }
+}

package/dist/collection/components/molecules/pagination/pagination.component.css

@@ -0,0 +1,3 @@
+p-pagination {
+  @apply flex;
+}

package/dist/collection/components/molecules/pagination/pagination.component.js

@@ -0,0 +1,238 @@
+import { Component, Event, h, Host, Prop, Watch, } from '@stencil/core';
+export class Pagination {
+  constructor() {
+    /**
+     * The current page
+     */
+    this.value = 1;
+    /**
+     * The amount of items per page
+     */
+    this.pageSize = 12;
+    this._pages = [];
+    this._set = [];
+    this._nextClick = () => {
+      const nextPage = this.value + 1;
+      if (nextPage > this._pages[this._pages.length - 1]) {
+        return;
+      }
+      this._changePage(nextPage);
+    };
+    this._pageClick = (p) => this._changePage(p);
+    this._generateSet = (range = 1, enableBoundaries = true) => {
+      const totalPages = this._pages.length;
+      if (!totalPages) {
+        return [];
+      }
+      let start = this.value - range;
+      let end = this.value + range;
+      if (end > totalPages) {
+        end = totalPages;
+        start = totalPages - range * 2;
+        start = start < 1 ? 1 : start;
+      }
+      if (start <= 1) {
+        start = 1;
+        end = Math.min(range * 2 + 1, totalPages);
+      }
+      const set = [];
+      const previous = {
+        type: 'previous',
+        value: h("p-icon", { variant: "chevron", rotate: 90 }),
+      };
+      const next = {
+        type: 'next',
+        value: h("p-icon", { variant: "chevron", rotate: -90 }),
+      };
+      // Disable page range, display all the pages
+      if (range === null) {
+        const p = this._pages.map((p) => ({
+          type: 'page',
+          value: p,
+        }));
+        return enableBoundaries ? [previous, ...p, next] : p;
+      }
+      if (enableBoundaries) {
+        set.push(previous);
+      }
+      if (start <= 3) {
+        for (let i = 1; i < start; i++) {
+          set.push({
+            type: 'page',
+            value: this._pages[i - 1],
+          });
+        }
+      }
+      else {
+        set.push({
+          type: 'page',
+          value: 1,
+        });
+        set.push({
+          type: 'ellipsis',
+          value: 'ellipsis',
+        });
+      }
+      for (let i = start; i <= end; i++) {
+        set.push({
+          type: 'page',
+          value: this._pages[i - 1],
+        });
+      }
+      if (end >= totalPages - 2) {
+        for (let i = end + 1; i <= totalPages; i++) {
+          set.push({
+            type: 'page',
+            value: this._pages[i - 1],
+          });
+        }
+      }
+      else {
+        set.push({
+          type: 'ellipsis',
+        });
+        set.push({
+          type: 'page',
+          value: this._pages[this._pages.length - 1],
+        });
+      }
+      if (enableBoundaries) {
+        set.push(next);
+      }
+      return set;
+    };
+  }
+  componentWillRender() {
+    this._generate();
+  }
+  render() {
+    var _a;
+    return (h(Host, { class: "p-pagination" }, (_a = this._set) === null || _a === void 0 ? void 0 : _a.map((p) => {
+      if (p.type === 'previous' || p.type === 'next') {
+        return (h("p-pagination-item", { onClick: () => p.type === 'previous'
+            ? this._previousClick()
+            : this._nextClick() }, p.value));
+      }
+      if (p.type === 'ellipsis') {
+        return h("p-pagination-item", null, "...");
+      }
+      return (h("p-pagination-item", { active: p.value === this.value, onClick: () => this._pageClick(p.value) }, p.value));
+    })));
+  }
+  pageChangeHandler() {
+    this._generate();
+  }
+  _generate() {
+    this._pages = this._generatePages();
+    this._set = this._generateSet();
+  }
+  _changePage(p) {
+    if (!p) {
+      return;
+    }
+    this.value = p;
+    this.valueChange.emit(this.value);
+  }
+  _previousClick() {
+    const previousPage = this.value - 1;
+    if (previousPage < this._pages[0]) {
+      return;
+    }
+    this._changePage(previousPage);
+  }
+  _generatePages() {
+    if (!this.total || !this.pageSize) {
+      return [];
+    }
+    const pages = Math.ceil(this.total / this.pageSize);
+    return new Array(pages).fill(undefined).map((_, i) => i + 1);
+  }
+  static get is() { return "p-pagination"; }
+  static get originalStyleUrls() { return {
+    "$": ["pagination.component.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pagination.component.css"]
+  }; }
+  static get properties() { return {
+    "value": {
+      "type": "number",
+      "mutable": true,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The current page"
+      },
+      "attribute": "value",
+      "reflect": true,
+      "defaultValue": "1"
+    },
+    "pageSize": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The amount of items per page"
+      },
+      "attribute": "page-size",
+      "reflect": false,
+      "defaultValue": "12"
+    },
+    "total": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The total amount of items"
+      },
+      "attribute": "total",
+      "reflect": false
+    }
+  }; }
+  static get events() { return [{
+      "method": "valueChange",
+      "name": "valueChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      }
+    }]; }
+  static get watchers() { return [{
+      "propName": "value",
+      "methodName": "pageChangeHandler"
+    }, {
+      "propName": "pageSize",
+      "methodName": "pageChangeHandler"
+    }, {
+      "propName": "total",
+      "methodName": "pageChangeHandler"
+    }]; }
+}

package/dist/collection/components/molecules/pagination/pagination.value-accessor.js

@@ -0,0 +1,6 @@
+export const paginationValueAccessor = {
+  elementSelectors: ['p-pagination'],
+  event: 'valueChange',
+  targetAttr: 'value',
+  type: 'number',
+};

package/dist/collection/tailwind/border-radius.js

@@ -1,4 +1,5 @@
 module.exports = {
+  xlarge: '0.5625rem',
   large: '0.375rem',
   DEFAULT: '0.25rem',
   medium: '0.25rem',

package/dist/collection/tailwind/grid.js

@@ -1,6 +1,26 @@
 module.exports = {
-  13: 'repeat(13, minmax(0, 1fr))',
-  14: 'repeat(14, minmax(0, 1fr))',
-  15: 'repeat(15, minmax(0, 1fr))',
-  16: 'repeat(16, minmax(0, 1fr))',
+  gridTemplateColumns: {
+    '13': 'repeat(13, minmax(0, 1fr))',
+    '14': 'repeat(14, minmax(0, 1fr))',
+    '15': 'repeat(15, minmax(0, 1fr))',
+    '16': 'repeat(16, minmax(0, 1fr))',
+  },
+  gridColumn: {
+    'span-13': 'span 13 / span 13',
+    'span-14': 'span 14 / span 14',
+    'span-15': 'span 15 / span 15',
+    'span-16': 'span 16 / span 16',
+  },
+  gridColumnStart: {
+    '13': '13',
+    '14': '14',
+    '15': '15',
+    '16': '16',
+  },
+  gridColumnEnd: {
+    '13': '13',
+    '14': '14',
+    '15': '15',
+    '16': '16',
+  },
 };

package/dist/collection/tailwind.config.js

@@ -13,7 +13,7 @@ module.exports = {
     dropShadow: shadows,
     borderRadius,
     extend: {
-      grid,
+      ...grid,
       scale,
       rotate,
     },