@paperless/core 0.1.0-alpha.0 → 0.1.0-alpha.13

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

@@ -0,0 +1,219 @@
+import { Component, 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;
+  }
+  _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": false,
+      "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 watchers() { return [{
+      "propName": "value",
+      "methodName": "pageChangeHandler"
+    }, {
+      "propName": "pageSize",
+      "methodName": "pageChangeHandler"
+    }, {
+      "propName": "total",
+      "methodName": "pageChangeHandler"
+    }]; }
+}

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/rotate.js

@@ -0,0 +1,8 @@
+const rotateNumbers = {};
+
+for (let i = 1; i < 360; i++) {
+  rotateNumbers[`${i}`] = `${i}deg`;
+  rotateNumbers[`-${i}`] = `-${i}deg`;
+}
+
+module.exports = rotateNumbers;

package/dist/collection/tailwind/scale.js

@@ -0,0 +1,3 @@
+module.exports = {
+  flip: '-1',
+};

package/dist/collection/tailwind.config.js

@@ -2,21 +2,20 @@ const colors = require('./tailwind/colors');
 const shadows = require('./tailwind/shadows');
 const borderRadius = require('./tailwind/border-radius');
 const grid = require('./tailwind/grid');
+const scale = require('./tailwind/scale');
+const rotate = require('./tailwind/rotate');
 
 module.exports = {
   important: true,
-  safelist: [
-    {
-      pattern: /./,
-    },
-  ],
   theme: {
     colors,
     boxShadow: shadows,
     dropShadow: shadows,
     borderRadius,
-    extends: {
-      grid,
+    extend: {
+      ...grid,
+      scale,
+      rotate,
     },
   },
   variants: {},