npm - @paperless/core - Versions diffs - 1.14.0 → 1.16.0 - Mend

@paperless/core 1.14.0 → 1.16.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (101) hide show

package/dist/collection/components/molecules/table-header/table-header.component.js CHANGED Viewed

@@ -4,8 +4,8 @@ import { formatTranslation, getLocaleComponentStrings, } from "../../../utils/lo
 export class TableHeader {
   constructor() {
     this._defaultFilterButtonTemplate = () => formatTranslation(this._locales.filter);
-    this._defaultEditButtonTemplate = (amount) => this.editText
-      ? this.editText
+    this._defaultActionButtonTemplate = (amount) => this.actionText
+      ? this.actionText
       : formatTranslation(amount === 0
         ? this._locales.edit
         : amount === 1
@@ -22,12 +22,12 @@ export class TableHeader {
     this.enableFilter = true;
     this.selectedFiltersAmount = undefined;
     this.filterButtonTemplate = this._defaultFilterButtonTemplate;
-    this.enableEdit = true;
-    this.editLoading = false;
-    this.editIcon = 'pencil';
-    this.editText = undefined;
-    this.canEdit = false;
-    this.editButtonTemplate = this._defaultEditButtonTemplate;
+    this.enableAction = true;
+    this.actionLoading = false;
+    this.actionIcon = 'pencil';
+    this.actionText = undefined;
+    this.canUseAction = false;
+    this.actionButtonTemplate = this._defaultActionButtonTemplate;
     this._locales = {};
   }
   componentWillLoad() {
@@ -54,15 +54,15 @@ export class TableHeader {
       ? this.filterButtonTemplate()
       : this._defaultFilterButtonTemplate(), this.selectedFiltersAmount &&
       this._getLabel(this.selectedFiltersAmount), mobileTotal > 0 &&
-      this._getLabel(mobileTotal, 'mobile'))), this.enableEdit && this._buttonTemplate()), this.enableEdit && this.canEdit && (h("div", { class: "fixed bottom-0 left-0 block w-full border border-solid border-transparent border-t-mystic-dark bg-white p-4 desktop-xs:hidden" }, this._buttonTemplate(true)))));
+      this._getLabel(mobileTotal, 'mobile'))), this.enableAction && this._buttonTemplate()), this.enableAction && this.canUseAction && (h("div", { class: "fixed bottom-0 left-0 block w-full border border-solid border-transparent border-t-mystic-dark bg-white p-4 desktop-xs:hidden" }, this._buttonTemplate(true)))));
   }
   async _setLocales() {
     this._locales = await getLocaleComponentStrings(this._el);
   }
   _buttonTemplate(mobile = false) {
-    return (h("p-button", { class: mobile ? 'w-full' : 'hidden desktop-xs:flex', icon: this.editIcon, size: "small", disabled: !this.canEdit, onClick: () => this.edit.emit(), loading: this.editLoading }, this.editButtonTemplate
-      ? this.editButtonTemplate(mobile ? this.itemsSelectedAmount : 0)
-      : this._defaultEditButtonTemplate(mobile ? this.itemsSelectedAmount : 0)));
+    return (h("p-button", { class: mobile ? 'w-full' : 'hidden desktop-xs:flex', icon: this.actionIcon, size: "small", disabled: !this.canUseAction, onClick: () => this.action.emit(), loading: this.actionLoading }, this.actionButtonTemplate
+      ? this.actionButtonTemplate(mobile ? this.itemsSelectedAmount : 0)
+      : this._defaultActionButtonTemplate(mobile ? this.itemsSelectedAmount : 0)));
   }
   _getLabel(amount, variant = 'default') {
     return (h("p-label", { size: "small", variant: "negative", behavior: "text", class: `ml-1 ${variant === 'default'
@@ -250,7 +250,7 @@ export class TableHeader {
         },
         "defaultValue": "this._defaultFilterButtonTemplate"
       },
-      "enableEdit": {
+      "enableAction": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -262,13 +262,13 @@ export class TableHeader {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Wether to show the edit button"
+          "text": "Wether to show the action button"
         },
-        "attribute": "enable-edit",
+        "attribute": "enable-action",
         "reflect": false,
         "defaultValue": "true"
       },
-      "editLoading": {
+      "actionLoading": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -280,13 +280,13 @@ export class TableHeader {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Wether the edit button is loading"
+          "text": "Wether the action button is loading"
         },
-        "attribute": "edit-loading",
+        "attribute": "action-loading",
         "reflect": false,
         "defaultValue": "false"
       },
-      "editIcon": {
+      "actionIcon": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -304,13 +304,13 @@ export class TableHeader {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The edit button icon"
+          "text": "The action button icon"
         },
-        "attribute": "edit-icon",
+        "attribute": "action-icon",
         "reflect": false,
         "defaultValue": "'pencil'"
       },
-      "editText": {
+      "actionText": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -322,12 +322,12 @@ export class TableHeader {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The edit button text if changed"
+          "text": "The action button text if changed"
         },
-        "attribute": "edit-text",
+        "attribute": "action-text",
         "reflect": false
       },
-      "canEdit": {
+      "canUseAction": {
         "type": "boolean",
         "mutable": true,
         "complexType": {
@@ -339,13 +339,13 @@ export class TableHeader {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Wether to enable the edit button"
+          "text": "Wether to enable the action button"
         },
-        "attribute": "can-edit",
+        "attribute": "can-use-action",
         "reflect": false,
         "defaultValue": "false"
       },
-      "editButtonTemplate": {
+      "actionButtonTemplate": {
         "type": "unknown",
         "mutable": false,
         "complexType": {
@@ -363,9 +363,9 @@ export class TableHeader {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The template for the edit button text"
+          "text": "The template for the action button text"
         },
-        "defaultValue": "this._defaultEditButtonTemplate"
+        "defaultValue": "this._defaultActionButtonTemplate"
       }
     };
   }
@@ -427,14 +427,14 @@ export class TableHeader {
           "references": {}
         }
       }, {
-        "method": "edit",
-        "name": "edit",
+        "method": "action",
+        "name": "action",
         "bubbles": false,
         "cancelable": true,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Event when the edit button is clicked"
+          "text": "Event when the action button is clicked"
         },
         "complexType": {
           "original": "null",

package/dist/collection/components/molecules/table-header/table-header.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"table-header.component.js","sourceRoot":"","sources":["../../../../src/components/molecules/table-header/table-header.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Prop,\n State,\n} from '@stencil/core';\nimport { debounceTime, distinctUntilChanged, Subject } from 'rxjs';\nimport { IconVariant } from '../../../components';\nimport { QuickFilter } from '../../../types/table';\nimport {\n formatTranslation,\n getLocaleComponentStrings,\n} from '../../../utils/localization';\n\nexport type templateFunc = () => string;\nexport type buttonTemplateFunc = (amount: number) => string;\n\n@Component({\n tag: 'p-table-header',\n styleUrl: 'table-header.component.scss',\n shadow: true,\n})\nexport class TableHeader {\n private _defaultFilterButtonTemplate: templateFunc = () =>\n formatTranslation(this._locales.filter);\n private _defaultEditButtonTemplate: buttonTemplateFunc = (amount: number) =>\n this.editText\n ? this.editText\n : formatTranslation(\n amount === 0\n ? this._locales.edit\n : amount === 1\n ? this._locales.edit_single\n : this._locales.edit_plural,\n { amount }\n );\n\n /*\n Quick filters to show\n /\n @Prop() quickFilters: QuickFilter[] = [];\n\n /\n Active quick filter identifier\n /\n @Prop() activeQuickFilterIdentifier: string;\n\n /\n Wether we want to show loading state\n /\n @Prop() loading: boolean = false;\n\n /\n Wether to show the search input\n /\n @Prop() enableSearch: boolean = true;\n\n /\n The amount of items that are selected\n /\n @Prop() itemsSelectedAmount: number = 0;\n\n /\n The query to show in the search bar\n /\n @Prop({ mutable: true }) query: string;\n\n /\n Wether to show the filter button\n /\n @Prop() enableFilter: boolean = true;\n\n /\n The amount of filters being selected\n /\n @Prop() selectedFiltersAmount: number;\n\n /\n The template for the filter button text\n /\n @Prop() filterButtonTemplate: templateFunc =\n this._defaultFilterButtonTemplate;\n\n /\n Wether to show the edit button\n /\n @Prop() enableEdit: boolean = true;\n\n /\n Wether the edit button is loading\n /\n @Prop() editLoading: boolean = false;\n\n /\n The edit button icon\n /\n @Prop() editIcon: IconVariant = 'pencil';\n\n /\n The edit button text if changed\n /\n @Prop() editText: string;\n\n /\n Wether to enable the edit button\n /\n @Prop({ mutable: true }) canEdit: boolean = false;\n\n /\n The template for the edit button text\n /\n @Prop() editButtonTemplate: buttonTemplateFunc =\n this._defaultEditButtonTemplate;\n\n /\n Event when one of the quick filters is clicked\n /\n @Event({\n bubbles: false,\n })\n quickFilter: EventEmitter<QuickFilter>;\n\n /\n Event when the query changes\n /\n @Event({\n bubbles: false,\n })\n queryChange: EventEmitter<string>;\n\n /\n Event when the filter button is clicked\n /\n @Event({\n bubbles: false,\n })\n filter: EventEmitter<null>;\n\n /\n Event when the edit button is clicked\n /\n @Event({\n bubbles: false,\n })\n edit: EventEmitter<null>;\n\n /\n The host element\n /\n @Element() private _el: HTMLElement;\n\n /\n Locales used for this component\n */\n @State() private _locales: any = {};\n\n private _queryObserver = new Subject<string>();\n private _hasCustomFilterSlot = false;\n\n componentWillLoad() {\n this._hasCustomFilterSlot = !!this._el.querySelector(\n ':scope > [slot=\"custom-filter\"]'\n );\n\n this._setLocales();\n }\n\n componentDidLoad() {\n this._queryObserver\n .pipe(debounceTime(300), distinctUntilChanged())\n .subscribe((value) => this.queryChange.emit(value));\n }\n\n render() {\n const activeQuickFilter = this.quickFilters.find(\n (f) => f.identifier === this.activeQuickFilterIdentifier\n );\n const mobileTotal =\n (this.selectedFiltersAmount \|\| 0) +\n (activeQuickFilter?.default ? 0 : 1);\n\n return (\n <Host class=\"p-table-header\">\n {this.loading && (\n <p-loader\n variant=\"ghost\"\n class=\"hidden h-8 w-3/4 rounded desktop-xs:flex\"\n ></p-loader>\n )}\n\n {!this.loading &&\n (this._hasCustomFilterSlot \|\|\n this.quickFilters.length > 0) && (\n <div class=\"left-side flex flex-col justify-start gap-4 desktop-xs:flex-row\">\n {this._hasCustomFilterSlot && (\n <slot name=\"custom-filter\" />\n )}\n\n {this.quickFilters.length > 0 && (\n <p-segment-container class=\"hidden desktop-xs:flex\">\n {this.quickFilters.map((item) => (\n <p-segment-item\n active={\n item.identifier ===\n this.activeQuickFilterIdentifier\n }\n onClick={() =>\n this.quickFilter.emit(item)\n }\n >\n {typeof item.text === 'string'\n ? item.text\n : item.text()}{' '}\n {item?.count >= 0\n ? `(${item.count})`\n : ''}\n </p-segment-item>\n ))}\n </p-segment-container>\n )}\n </div>\n )}\n\n <div class=\"right-side flex flex-col justify-end gap-4 desktop-xs:flex-row\">\n {this.enableSearch && (\n <p-input-group\n icon=\"search\"\n size=\"small\"\n class=\"desktop-xs:w-48\"\n >\n <input\n type=\"text\"\n slot=\"input\"\n placeholder=\"Zoeken...\"\n value={this.query}\n onInput={(ev) =>\n this._queryObserver.next(\n (ev.target as HTMLInputElement).value\n )\n }\n />\n </p-input-group>\n )}\n\n {this.enableFilter && (\n <p-button\n icon=\"filter\"\n variant=\"secondary\"\n size=\"small\"\n class=\"w-full desktop-xs:w-auto\"\n onClick={() => this.filter.emit()}\n >\n {this.filterButtonTemplate\n ? this.filterButtonTemplate()\n : this._defaultFilterButtonTemplate()}\n {this.selectedFiltersAmount &&\n this._getLabel(this.selectedFiltersAmount)}\n {mobileTotal > 0 &&\n this._getLabel(mobileTotal, 'mobile')}\n </p-button>\n )}\n\n {this.enableEdit && this._buttonTemplate()}\n </div>\n\n {this.enableEdit && this.canEdit && (\n <div class=\"fixed bottom-0 left-0 block w-full border border-solid border-transparent border-t-mystic-dark bg-white p-4 desktop-xs:hidden\">\n {this._buttonTemplate(true)}\n </div>\n )}\n </Host>\n );\n }\n\n @Listen('localeChanged', { target: 'body' })\n private async _setLocales(): Promise<void> {\n this._locales = await getLocaleComponentStrings(this._el);\n }\n\n private _buttonTemplate(mobile = false) {\n return (\n <p-button\n class={mobile ? 'w-full' : 'hidden desktop-xs:flex'}\n icon={this.editIcon}\n size=\"small\"\n disabled={!this.canEdit}\n onClick={() => this.edit.emit()}\n loading={this.editLoading}\n >\n {this.editButtonTemplate\n ? this.editButtonTemplate(\n mobile ? this.itemsSelectedAmount : 0\n )\n : this._defaultEditButtonTemplate(\n mobile ? this.itemsSelectedAmount : 0\n )}\n </p-button>\n );\n }\n\n private _getLabel(amount, variant: 'mobile' \| 'default' = 'default') {\n return (\n <p-label\n size=\"small\"\n variant=\"negative\"\n behavior=\"text\"\n class={`ml-1 ${\n variant === 'default'\n ? 'hidden desktop-xs:flex'\n : 'flex desktop-xs:hidden'\n }`}\n >\n {amount}\n </p-label>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"table-header.component.js","sourceRoot":"","sources":["../../../../src/components/molecules/table-header/table-header.component.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Prop,\n State,\n} from '@stencil/core';\nimport { debounceTime, distinctUntilChanged, Subject } from 'rxjs';\nimport { IconVariant } from '../../../components';\nimport { QuickFilter } from '../../../types/table';\nimport {\n formatTranslation,\n getLocaleComponentStrings,\n} from '../../../utils/localization';\n\nexport type templateFunc = () => string;\nexport type buttonTemplateFunc = (amount: number) => string;\n\n@Component({\n tag: 'p-table-header',\n styleUrl: 'table-header.component.scss',\n shadow: true,\n})\nexport class TableHeader {\n private _defaultFilterButtonTemplate: templateFunc = () =>\n formatTranslation(this._locales.filter);\n private _defaultActionButtonTemplate: buttonTemplateFunc = (\n amount: number\n ) =>\n this.actionText\n ? this.actionText\n : formatTranslation(\n amount === 0\n ? this._locales.edit\n : amount === 1\n ? this._locales.edit_single\n : this._locales.edit_plural,\n { amount }\n );\n\n /*\n Quick filters to show\n /\n @Prop() quickFilters: QuickFilter[] = [];\n\n /\n Active quick filter identifier\n /\n @Prop() activeQuickFilterIdentifier: string;\n\n /\n Wether we want to show loading state\n /\n @Prop() loading: boolean = false;\n\n /\n Wether to show the search input\n /\n @Prop() enableSearch: boolean = true;\n\n /\n The amount of items that are selected\n /\n @Prop() itemsSelectedAmount: number = 0;\n\n /\n The query to show in the search bar\n /\n @Prop({ mutable: true }) query: string;\n\n /\n Wether to show the filter button\n /\n @Prop() enableFilter: boolean = true;\n\n /\n The amount of filters being selected\n /\n @Prop() selectedFiltersAmount: number;\n\n /\n The template for the filter button text\n /\n @Prop() filterButtonTemplate: templateFunc =\n this._defaultFilterButtonTemplate;\n\n /\n Wether to show the action button\n /\n @Prop() enableAction: boolean = true;\n\n /\n Wether the action button is loading\n /\n @Prop() actionLoading: boolean = false;\n\n /\n The action button icon\n /\n @Prop() actionIcon: IconVariant = 'pencil';\n\n /\n The action button text if changed\n /\n @Prop() actionText: string;\n\n /\n Wether to enable the action button\n /\n @Prop({ mutable: true }) canUseAction: boolean = false;\n\n /\n The template for the action button text\n /\n @Prop() actionButtonTemplate: buttonTemplateFunc =\n this._defaultActionButtonTemplate;\n\n /\n Event when one of the quick filters is clicked\n /\n @Event({\n bubbles: false,\n })\n quickFilter: EventEmitter<QuickFilter>;\n\n /\n Event when the query changes\n /\n @Event({\n bubbles: false,\n })\n queryChange: EventEmitter<string>;\n\n /\n Event when the filter button is clicked\n /\n @Event({\n bubbles: false,\n })\n filter: EventEmitter<null>;\n\n /\n Event when the action button is clicked\n /\n @Event({\n bubbles: false,\n })\n action: EventEmitter<null>;\n\n /\n The host element\n /\n @Element() private _el: HTMLElement;\n\n /\n Locales used for this component\n */\n @State() private _locales: any = {};\n\n private _queryObserver = new Subject<string>();\n private _hasCustomFilterSlot = false;\n\n componentWillLoad() {\n this._hasCustomFilterSlot = !!this._el.querySelector(\n ':scope > [slot=\"custom-filter\"]'\n );\n\n this._setLocales();\n }\n\n componentDidLoad() {\n this._queryObserver\n .pipe(debounceTime(300), distinctUntilChanged())\n .subscribe((value) => this.queryChange.emit(value));\n }\n\n render() {\n const activeQuickFilter = this.quickFilters.find(\n (f) => f.identifier === this.activeQuickFilterIdentifier\n );\n const mobileTotal =\n (this.selectedFiltersAmount \|\| 0) +\n (activeQuickFilter?.default ? 0 : 1);\n\n return (\n <Host class=\"p-table-header\">\n {this.loading && (\n <p-loader\n variant=\"ghost\"\n class=\"hidden h-8 w-3/4 rounded desktop-xs:flex\"\n ></p-loader>\n )}\n\n {!this.loading &&\n (this._hasCustomFilterSlot \|\|\n this.quickFilters.length > 0) && (\n <div class=\"left-side flex flex-col justify-start gap-4 desktop-xs:flex-row\">\n {this._hasCustomFilterSlot && (\n <slot name=\"custom-filter\" />\n )}\n\n {this.quickFilters.length > 0 && (\n <p-segment-container class=\"hidden desktop-xs:flex\">\n {this.quickFilters.map((item) => (\n <p-segment-item\n active={\n item.identifier ===\n this.activeQuickFilterIdentifier\n }\n onClick={() =>\n this.quickFilter.emit(item)\n }\n >\n {typeof item.text === 'string'\n ? item.text\n : item.text()}{' '}\n {item?.count >= 0\n ? `(${item.count})`\n : ''}\n </p-segment-item>\n ))}\n </p-segment-container>\n )}\n </div>\n )}\n\n <div class=\"right-side flex flex-col justify-end gap-4 desktop-xs:flex-row\">\n {this.enableSearch && (\n <p-input-group\n icon=\"search\"\n size=\"small\"\n class=\"desktop-xs:w-48\"\n >\n <input\n type=\"text\"\n slot=\"input\"\n placeholder=\"Zoeken...\"\n value={this.query}\n onInput={(ev) =>\n this._queryObserver.next(\n (ev.target as HTMLInputElement).value\n )\n }\n />\n </p-input-group>\n )}\n\n {this.enableFilter && (\n <p-button\n icon=\"filter\"\n variant=\"secondary\"\n size=\"small\"\n class=\"w-full desktop-xs:w-auto\"\n onClick={() => this.filter.emit()}\n >\n {this.filterButtonTemplate\n ? this.filterButtonTemplate()\n : this._defaultFilterButtonTemplate()}\n {this.selectedFiltersAmount &&\n this._getLabel(this.selectedFiltersAmount)}\n {mobileTotal > 0 &&\n this._getLabel(mobileTotal, 'mobile')}\n </p-button>\n )}\n\n {this.enableAction && this._buttonTemplate()}\n </div>\n\n {this.enableAction && this.canUseAction && (\n <div class=\"fixed bottom-0 left-0 block w-full border border-solid border-transparent border-t-mystic-dark bg-white p-4 desktop-xs:hidden\">\n {this._buttonTemplate(true)}\n </div>\n )}\n </Host>\n );\n }\n\n @Listen('localeChanged', { target: 'body' })\n private async _setLocales(): Promise<void> {\n this._locales = await getLocaleComponentStrings(this._el);\n }\n\n private _buttonTemplate(mobile = false) {\n return (\n <p-button\n class={mobile ? 'w-full' : 'hidden desktop-xs:flex'}\n icon={this.actionIcon}\n size=\"small\"\n disabled={!this.canUseAction}\n onClick={() => this.action.emit()}\n loading={this.actionLoading}\n >\n {this.actionButtonTemplate\n ? this.actionButtonTemplate(\n mobile ? this.itemsSelectedAmount : 0\n )\n : this._defaultActionButtonTemplate(\n mobile ? this.itemsSelectedAmount : 0\n )}\n </p-button>\n );\n }\n\n private _getLabel(amount, variant: 'mobile' \| 'default' = 'default') {\n return (\n <p-label\n size=\"small\"\n variant=\"negative\"\n behavior=\"text\"\n class={`ml-1 ${\n variant === 'default'\n ? 'hidden desktop-xs:flex'\n : 'flex desktop-xs:hidden'\n }`}\n >\n {amount}\n </p-label>\n );\n }\n}\n"]}

package/dist/collection/components/organisms/table/table.component.css CHANGED Viewed

	@@ -1 +1 @@
1	- .flex{display:flex!important}.flex-shrink{flex-shrink:1!important}*{box-sizing:border-box}p-table{display:flex;flex-direction:column}p-table .p-input[type=checkbox]{flex-shrink:0}.static{position:static!important}.mb-14{margin-bottom:3.5rem!important}.mb-6{margin-bottom:1.5rem!important}.table{display:table!important}.~~hidden{display:none!important}.~~h-6{height:1.5rem!important}.w-6{width:1.5rem!important}.max-w-\[20rem\]{max-width:20rem!important}.cursor-pointer{cursor:pointer!important}.flex-col{flex-direction:column!important}.items-center{align-items:center!important}.self-center{align-self:center!important}.rounded{border-radius:.25rem!important}.py-24{padding-bottom:6rem!important;padding-top:6rem!important}.text-center{text-align:center!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.font-semibold{font-weight:600!important}.text-storm-medium{--tw-text-opacity:1!important;color:rgb(128 130 158/var(--tw-text-opacity))!important}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}
1	+ .fixed{position:fixed!important}.absolute{position:absolute!important}.relative{position:relative!important}.bottom-4{bottom:1rem!important}.left-1\/2{left:50%!important}.flex{display:flex!important}.hidden{display:none!important}.flex-shrink{flex-shrink:1!important}.-translate-x-1\/2{--tw-translate-x:-50%!important}.-translate-x-1\/2,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))!important}*{box-sizing:border-box}p-table{display:flex;flex-direction:column;position:relative}p-table .p-input[type=checkbox]{flex-shrink:0}p-table p-table-container{position:relative}p-table p-table-container p-floating-menu-container{--tw-translate-x:-50%;animation:floatingMenuContainerIn .3s ease forwards!important;bottom:1rem;left:50%;position:fixed;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@media (min-width:40rem){p-table p-table-container p-floating-menu-container{bottom:4rem;position:absolute}}p-table p-table-container p-floating-menu-container.inactive{animation:floatingMenuContainerOut .3s ease forwards!important}p-table p-table-container p-floating-menu-container .hide-mobile{display:none}@media (min-width:40rem){p-table p-table-container p-floating-menu-container .hide-mobile{display:block}}@keyframes floatingMenuContainerOut{0%{opacity:1;transform:translateY(0) translateX(-50%)}to{opacity:0;transform:translateY(100%) translateX(-50%)}}@keyframes floatingMenuContainerIn{0%{opacity:0;transform:translateY(100%) translateX(-50%)}to{opacity:1;transform:translateY(0) translateX(-50%)}}@media (min-width:40rem){.tablet\:block{display:block!important}}.static{position:static!important}.mx-0{margin-left:0!important;margin-right:0!important}.mb-14{margin-bottom:3.5rem!important}.mb-6{margin-bottom:1.5rem!important}.table{display:table!important}.h-6{height:1.5rem!important}.w-6{width:1.5rem!important}.max-w-\[20rem\]{max-width:20rem!important}.cursor-pointer{cursor:pointer!important}.flex-col{flex-direction:column!important}.items-center{align-items:center!important}.self-center{align-self:center!important}.rounded{border-radius:.25rem!important}.py-24{padding-bottom:6rem!important;padding-top:6rem!important}.text-center{text-align:center!important}.text-sm{font-size:.875rem!important;line-height:1.25rem!important}.font-semibold{font-weight:600!important}.text-storm{--tw-text-opacity:1!important;color:rgb(81 83 107/var(--tw-text-opacity))!important}.text-storm-medium{--tw-text-opacity:1!important;color:rgb(128 130 158/var(--tw-text-opacity))!important}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)!important}

package/dist/collection/components/organisms/table/table.component.js CHANGED Viewed

@@ -5,6 +5,7 @@ export class Table {
   constructor() {
     this._ctrlDown = false;
     this._hasCustomFilterSlot = false;
+    this._hasFloatingMenuItems = false;
     this.items = undefined;
     this.loading = false;
     this.headerLoading = false;
@@ -13,6 +14,13 @@ export class Table {
     this.enableRowSelection = true;
     this.enableRowClick = true;
     this.selectedRows = [];
+    this.enableFloatingMenu = true;
+    this.floatingMenuAmountSelectedTemplate = (amount) => {
+      var _a, _b, _c;
+      return formatTranslation((_c = (amount === 1
+        ? (_a = this._locales.floating_menu) === null || _a === void 0 ? void 0 : _a.amount_selected
+        : (_b = this._locales.floating_menu) === null || _b === void 0 ? void 0 : _b.amount_selected_plural)) === null || _c === void 0 ? void 0 : _c.replace('{{amount}}', amount));
+    };
     this.selectionKey = undefined;
     this.canSelectKey = undefined;
     this.enableHeader = true;
@@ -23,11 +31,12 @@ export class Table {
     this.enableFilter = true;
     this.selectedFiltersAmount = undefined;
     this.filterButtonTemplate = undefined;
-    this.enableEdit = true;
-    this.editButtonLoading = false;
-    this.editButtonIcon = 'pencil';
-    this.editButtonText = undefined;
-    this.editButtonTemplate = undefined;
+    this.enableAction = false;
+    this.actionButtonLoading = false;
+    this.actionButtonEnabled = false;
+    this.actionButtonIcon = 'pencil';
+    this.actionButtonText = undefined;
+    this.actionButtonTemplate = undefined;
     this.enableFooter = true;
     this.enablePageSize = true;
     this.enablePagination = true;
@@ -49,6 +58,10 @@ export class Table {
   }
   componentWillLoad() {
     this._hasCustomFilterSlot = !!this._el.querySelector(':scope > [slot="custom-filter"]');
+    this._hasFloatingMenuItems = !!this._el.querySelectorAll(':scope > [slot="floating-menu-item"]').length;
+    if (this.enableRowSelection) {
+      console.log(this._hasFloatingMenuItems, this._el.querySelectorAll(':scope > [slot="floating-menu-item"]'));
+    }
     this._setLocales();
     this._parseItems(this.items);
     this._generateColumns();
@@ -57,7 +70,7 @@ export class Table {
     this.hasRendered.emit();
   }
   render() {
-    var _a, _b;
+    var _a, _b, _c;
     return (h(Host, { class: "p-table" }, h("p-table-container", null, this.enableHeader && (h("p-table-header", {
       // quick filters
       quickFilters: this.quickFilters, activeQuickFilterIdentifier: this.activeQuickFilterIdentifier, onQuickFilter: ({ detail }) => this.quickFilter.emit(detail),
@@ -65,8 +78,8 @@ export class Table {
       enableSearch: this.enableSearch, query: this.query, onQueryChange: ({ detail }) => this.queryChange.emit(detail),
       // filter button
       enableFilter: this.enableFilter, selectedFiltersAmount: this.selectedFiltersAmount, filterButtonTemplate: this.filterButtonTemplate, onFilter: () => this.filter.emit(),
-      // edit button
-      enableEdit: this.enableEdit, editIcon: this.editButtonIcon, editText: this.editButtonText, editLoading: this.editButtonLoading, canEdit: !!((_a = this.selectedRows) === null || _a === void 0 ? void 0 : _a.length), editButtonTemplate: this.editButtonTemplate, onEdit: () => this.edit.emit(), itemsSelectedAmount: (_b = this.selectedRows) === null || _b === void 0 ? void 0 : _b.length,
+      // action button
+      enableAction: this.enableAction, actionIcon: this.actionButtonIcon, actionText: this.actionButtonText, actionLoading: this.actionButtonLoading, canUseAction: this.actionButtonEnabled, actionButtonTemplate: this.actionButtonTemplate, onAction: () => this.action.emit(), itemsSelectedAmount: (_a = this.selectedRows) === null || _a === void 0 ? void 0 : _a.length,
       //loading
       loading: this.headerLoading
     }, this._hasCustomFilterSlot && (h("slot", { name: "custom-filter", slot: "custom-filter" })))), this._getHeader(), h("div", { class: "flex flex-col" }, this._getRows()), this.enableFooter && (h("p-table-footer", {
@@ -80,7 +93,11 @@ export class Table {
       enableExport: this.enableExport, onExport: () => this.export.emit(),
       //loading
       loading: this.footerLoading
-    })))));
+    })), this.enableFloatingMenu ? (h("p-floating-menu-container", { usedInTable: true, class: ((_b = this.selectedRows) === null || _b === void 0 ? void 0 : _b.length) ? '' : 'inactive' }, h("p-floating-menu-item", { hover: false, slot: "floating-menu-item", class: this._hasFloatingMenuItems
+        ? 'hide-mobile'
+        : '' }, this.floatingMenuAmountSelectedTemplate((_c = this.selectedRows) === null || _c === void 0 ? void 0 : _c.length)), h("p-divider", { class: `mx-0 text-storm ${this._hasFloatingMenuItems
+        ? 'hide-mobile'
+        : ''}`, variant: "vertical", slot: "floating-menu-item" }), this._hasFloatingMenuItems && (h("slot", { name: "floating-menu-item" })), this._hasFloatingMenuItems && (h("p-divider", { class: "mx-0 text-storm", variant: "vertical", slot: "floating-menu-item" })), h("p-floating-menu-item", { slot: "floating-menu-item", onClick: () => this._selectAllChange(null, false) }, h("p-icon", { variant: "negative" })))) : (''))));
   }
   async _setLocales() {
     this._locales = await getLocaleComponentStrings(this._el);
@@ -125,7 +142,7 @@ export class Table {
   }
   _getHeader() {
     return (h("p-table-row", { variant: "header" }, this._columns.map((col, index) => (h("p-table-cell", { definition: col, value: col.name, variant: "header", checkbox: index === 0 || col.hasCheckbox
-        ? this._getCheckbox(null, 'loading')
+        ? this._getCheckbox(null, this.loading ? 'loading' : 'header')
         : null, index: index })))));
   }
   _getRows() {
@@ -174,11 +191,13 @@ export class Table {
     return (h("div", { class: `flex max-w-[20rem] flex-col items-center self-center py-24 text-center ${this.enableEmptyStateAction && 'cursor-pointer'}`, onClick: () => this.enableEmptyStateAction &&
         this.emptyStateActionClick.emit(null) }, h("p-illustration", { variant: "empty-state-add", class: "mb-6" }), h("p", { class: "text-storm-default font-semibold" }, this.emptyStateHeader()), h("p", { class: "mb-6 text-sm text-storm-medium" }, this.emptyStateContent()), this.enableEmptyStateAction && (h("p-button", { variant: "secondary", icon: "plus", size: "small" }, this.emptyStateAction()))));
   }
-  _selectAllChange($event) {
+  _selectAllChange($event, forceValue) {
     if (!this.enableRowSelection) {
       return;
     }
-    const value = this._getCheckedValue($event.target);
+    const value = forceValue === undefined
+      ? this._getCheckedValue($event.target)
+      : forceValue;
     if (value) {
       const toAdd = [];
       for (let i = 0; i < this._items.length; i++) {
@@ -481,6 +500,46 @@ export class Table {
         },
         "defaultValue": "[]"
       },
+      "enableFloatingMenu": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Wether to enable the floating menu"
+        },
+        "attribute": "enable-floating-menu",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "floatingMenuAmountSelectedTemplate": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "amountSelectedTemplateFunc",
+          "resolved": "(amount: number) => string",
+          "references": {
+            "amountSelectedTemplateFunc": {
+              "location": "local",
+              "path": "/home/runner/work/Paperless/Paperless/packages/core/src/components/organisms/table/table.component.tsx",
+              "id": "src/components/organisms/table/table.component.tsx::amountSelectedTemplateFunc"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The template for amount selected item in the floating menu"
+        },
+        "defaultValue": "(\n        amount: number\n    ) =>\n        formatTranslation(\n            (amount === 1\n                ? this._locales.floating_menu?.amount_selected\n                : this._locales.floating_menu?.amount_selected_plural\n            )?.replace('{{amount}}', amount)\n        )"
+      },
       "selectionKey": {
         "type": "string",
         "mutable": false,
@@ -663,7 +722,7 @@ export class Table {
           "text": "The template for the filter button text"
         }
       },
-      "enableEdit": {
+      "enableAction": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -675,13 +734,31 @@ export class Table {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Wether to show the edit button"
+          "text": "Wether to show the action button"
         },
-        "attribute": "enable-edit",
+        "attribute": "enable-action",
         "reflect": false,
-        "defaultValue": "true"
+        "defaultValue": "false"
+      },
+      "actionButtonLoading": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Wether the action button is loading"
+        },
+        "attribute": "action-button-loading",
+        "reflect": false,
+        "defaultValue": "false"
       },
-      "editButtonLoading": {
+      "actionButtonEnabled": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -693,13 +770,13 @@ export class Table {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Wether the edit button is loading"
+          "text": "Wether the action button is enabled"
         },
-        "attribute": "edit-button-loading",
+        "attribute": "action-button-enabled",
         "reflect": false,
         "defaultValue": "false"
       },
-      "editButtonIcon": {
+      "actionButtonIcon": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -717,13 +794,13 @@ export class Table {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The edit button icon"
+          "text": "The action button icon"
         },
-        "attribute": "edit-button-icon",
+        "attribute": "action-button-icon",
         "reflect": false,
         "defaultValue": "'pencil'"
       },
-      "editButtonText": {
+      "actionButtonText": {
         "type": "string",
         "mutable": false,
         "complexType": {
@@ -735,12 +812,12 @@ export class Table {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The edit button text if changed"
+          "text": "The action button text if changed"
         },
-        "attribute": "edit-button-text",
+        "attribute": "action-button-text",
         "reflect": false
       },
-      "editButtonTemplate": {
+      "actionButtonTemplate": {
         "type": "unknown",
         "mutable": false,
         "complexType": {
@@ -758,7 +835,7 @@ export class Table {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "The template for the edit button text"
+          "text": "The template for the action button text"
         }
       },
       "enableFooter": {
@@ -1191,14 +1268,14 @@ export class Table {
           "references": {}
         }
       }, {
-        "method": "edit",
-        "name": "edit",
+        "method": "action",
+        "name": "action",
         "bubbles": false,
         "cancelable": true,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Event when the edit button is clicked"
+          "text": "Event when the action button is clicked"
         },
         "complexType": {
           "original": "null",