@paperless/core 0.0.3-alpha.3 → 0.1.0-alpha.0

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

@@ -0,0 +1,174 @@
+import { createPopper } from '@popperjs/core';
+import { Component, Element, h, Host, Listen, Prop } from '@stencil/core';
+export class Tooltip {
+  constructor() {
+    /**
+     * The content of the tooltip
+     */
+    this.content = null;
+    /**
+     * The content of the tooltip
+     */
+    this.placement = 'top';
+    /**
+     * Wether to force show the tooltip
+     */
+    this.forceShow = false;
+    this._loaded = false;
+  }
+  componentShouldUpdate() {
+    this._setOptions();
+    if (this.forceShow) {
+      this._show();
+    }
+  }
+  render() {
+    return (h(Host, null,
+      h("slot", null),
+      h("div", { class: "tooltip", role: "tooltip", ref: el => this._load(el) },
+        this.content,
+        h("div", { class: "arrow", "data-popper-arrow": true }))));
+  }
+  _show() {
+    if (!this._loaded) {
+      return;
+    }
+    // Make the tooltip visible
+    this._tooltip.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) {
+      return;
+    }
+    // Hide the tooltip
+    this._tooltip.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);
+      this._setOptions();
+      this._loaded = true;
+      if (this.forceShow) {
+        this._show();
+      }
+    }
+  }
+  _setOptions() {
+    if (!this._popper) {
+      return;
+    }
+    this._popper.setOptions({
+      placement: this.placement,
+      modifiers: [
+        {
+          name: 'offset',
+          options: {
+            offset: [0, 8],
+          },
+        },
+      ],
+    });
+  }
+  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 {
+    "content": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The content of the tooltip"
+      },
+      "attribute": "content",
+      "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"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The content of the tooltip"
+      },
+      "attribute": "placement",
+      "reflect": false,
+      "defaultValue": "'top'"
+    },
+    "forceShow": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Wether to force show the tooltip"
+      },
+      "attribute": "force-show",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get elementRef() { return "_el"; }
+  static get listeners() { return [{
+      "name": "mouseenter",
+      "method": "_show",
+      "target": undefined,
+      "capture": false,
+      "passive": true
+    }, {
+      "name": "focus",
+      "method": "_show",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "mouseleave",
+      "method": "_hide",
+      "target": undefined,
+      "capture": false,
+      "passive": true
+    }, {
+      "name": "blur",
+      "method": "_hide",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}

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

@@ -1,6 +1,7 @@
 module.exports = {
   large: '0.375rem',
   DEFAULT: '0.25rem',
+  medium: '0.25rem',
   small: '0.125rem',
   none: 0,
   round: '100%',

package/dist/collection/tailwind/grid.js

@@ -0,0 +1,6 @@
+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))',
+};

package/dist/collection/tailwind.config.js

@@ -1,13 +1,23 @@
 const colors = require('./tailwind/colors');
 const shadows = require('./tailwind/shadows');
 const borderRadius = require('./tailwind/border-radius');
+const grid = require('./tailwind/grid');
 
 module.exports = {
+  important: true,
+  safelist: [
+    {
+      pattern: /./,
+    },
+  ],
   theme: {
     colors,
     boxShadow: shadows,
     dropShadow: shadows,
     borderRadius,
+    extends: {
+      grid,
+    },
   },
   variants: {},
   plugins: [require('@tailwindcss/aspect-ratio')],

package/dist/collection/utils/icons.js

@@ -0,0 +1,82 @@
+import arrow from '../assets/icons/arrow.svg';
+import attachment from '../assets/icons/attachment.svg';
+import bread from '../assets/icons/bread.svg';
+import calendar from '../assets/icons/calendar.svg';
+import car from '../assets/icons/car.svg';
+import checkmark from '../assets/icons/checkmark.svg';
+import chevron from '../assets/icons/chevron.svg';
+import clock from '../assets/icons/clock.svg';
+import cogs from '../assets/icons/cogs.svg';
+import comment from '../assets/icons/comment.svg';
+import document from '../assets/icons/document.svg';
+import download from '../assets/icons/download.svg';
+import envelope from '../assets/icons/envelope.svg';
+import explanation from '../assets/icons/explanation.svg';
+import eye from '../assets/icons/eye.svg';
+import filter from '../assets/icons/filter.svg';
+import grid from '../assets/icons/grid.svg';
+import headset from '../assets/icons/headset.svg';
+import list from '../assets/icons/list.svg';
+import location from '../assets/icons/location.svg';
+import megaphone from '../assets/icons/megaphone.svg';
+import minus from '../assets/icons/minus.svg';
+import negative from '../assets/icons/negative.svg';
+import pagination from '../assets/icons/pagination.svg';
+import payment from '../assets/icons/payment.svg';
+import pencil from '../assets/icons/pencil.svg';
+import person from '../assets/icons/person.svg';
+import plus from '../assets/icons/plus.svg';
+import question from '../assets/icons/question.svg';
+import receipt from '../assets/icons/receipt.svg';
+import report from '../assets/icons/report.svg';
+import search from '../assets/icons/search.svg';
+import settings from '../assets/icons/settings.svg';
+import sick from '../assets/icons/sick.svg';
+import tachometer from '../assets/icons/tachometer.svg';
+import tool from '../assets/icons/tool.svg';
+import trash from '../assets/icons/trash.svg';
+import turn from '../assets/icons/turn.svg';
+import upload from '../assets/icons/upload.svg';
+import warning from '../assets/icons/warning.svg';
+export default {
+  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,
+};

package/dist/collection/utils/illustrations.js

@@ -0,0 +1,18 @@
+import emptyState from '../assets/illustrations/default-empty-state.svg';
+import departments from '../assets/illustrations/departments.svg';
+import expenses from '../assets/illustrations/expenses.svg';
+import functions from '../assets/illustrations/functions.svg';
+import questions from '../assets/illustrations/questions.svg';
+import sickLeave from '../assets/illustrations/sick-leave.svg';
+import timeOff from '../assets/illustrations/time-off.svg';
+import upgradeToHr from '../assets/illustrations/upgrade-to-hr.svg';
+export default {
+  'empty-state': emptyState,
+  departments,
+  expenses,
+  functions,
+  questions,
+  'sick-leave': sickLeave,
+  'time-off': timeOff,
+  'upgrade-to-hr': upgradeToHr,
+};

package/dist/components/index.d.ts

@@ -1,5 +1,8 @@
 /* paperless custom elements */
 export { Button as PButton } from '../types/components/p-button/p-button';
+export { Icon as PIcon } from '../types/components/p-icon/p-icon';
+export { Icon as PIllustration } from '../types/components/p-illustration/p-illustration';
+export { Tooltip as PTooltip } from '../types/components/p-tooltip/p-tooltip';
 
 /**
  * Used to manually set the base path where assets can be found.

package/dist/components/index.js

@@ -1,2 +1,5 @@
 export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
 export { PButton, defineCustomElement as defineCustomElementPButton } from './p-button.js';
+export { PIcon, defineCustomElement as defineCustomElementPIcon } from './p-icon.js';
+export { PIllustration, defineCustomElement as defineCustomElementPIllustration } from './p-illustration.js';
+export { PTooltip, defineCustomElement as defineCustomElementPTooltip } from './p-tooltip.js';