@ghentcdh/ui 1.1.1 → 3.0.0

package/modal/modal.vue.d.ts

@@ -1,6 +1,7 @@
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
+        title?(_: {}): any;
         content?(_: {}): any;
         actions?(_: {}): any;
     };

package/package.json

@@ -1,21 +1,20 @@
 {
   "name": "@ghentcdh/ui",
   "author": "GhentCDH",
-  "version": "1.1.1",
-  "type": "module",
-  "main": "./index.cjs",
-  "module": "./index.js",
+  "version": "3.0.0",
+  "main": "./index.js",
+  "module": "./index.mjs",
   "types": "./index.d.ts",
   "exports": {
     ".": {
       "types": "./index.d.ts",
-      "import": "./index.js",
-      "require": "./index.cjs"
+      "import": "./index.mjs",
+      "require": "./index.js"
     },
     "./testing": {
       "types": "./testing/index.d.ts",
-      "import": "./testing.js",
-      "require": "./testing.cjs"
+      "import": "./testing.mjs",
+      "require": "./testing.js"
     },
     "./index.css": "./index.css",
     "./package.json": "./package.json"
@@ -53,28 +52,39 @@
   "peerDependenciesMeta": {
     "@playwright/test": {
       "optional": true
+    },
+    "@tiptap/pm": {
+      "optional": true
+    },
+    "@tiptap/starter-kit": {
+      "optional": true
+    },
+    "@tiptap/vue-3": {
+      "optional": true
+    },
+    "tiptap-markdown": {
+      "optional": true
     }
   },
   "sideEffects": false,
-  "dependencies": {
-    "@heroicons/vue": "^2.2.0",
+  "peerDependencies": {
+    "@ghentcdh/json-forms-core": ">=0.0.1",
+    "@playwright/test": ">=1.50.0",
     "@tiptap/pm": "^3.0.0",
     "@tiptap/starter-kit": "^3.0.0",
     "@tiptap/vue-3": "^3.0.0",
     "tiptap-markdown": "^0.9.0",
-    "uuid": "^11.0.0"
-  },
-  "peerDependencies": {
-    "@ghentcdh/json-forms-core": ">=0.0.1",
-    "@ghentcdh/tools-vue": ">=0.6.0",
-    "@playwright/test": ">=1.50.0",
     "vue": "^3.5.0",
     "vue-router": "^5.0.0"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "4.2.1",
+    "@tiptap/pm": "3.20.0",
+    "@tiptap/starter-kit": "3.20.0",
+    "@tiptap/vue-3": "3.20.0",
     "daisyui": "5.5.19",
     "tailwindcss": "4.2.1",
+    "tiptap-markdown": "0.9.0",
     "vue": "3.5.29",
     "vue-router": "5.0.3"
   },

package/table/cells/text.cell.vue.d.ts

@@ -22,5 +22,5 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     options: {
         type: ObjectConstructor;
     };
-}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
 export default _default;

package/table/column.model.d.ts

@@ -0,0 +1,6 @@
+import { TextCellType } from '../../../json-forms/core/src/index.ts';
+export type ColumnDef = TextCellType & {
+    id: string;
+    label: string;
+    width?: string;
+};

package/table/header/sort.header.properties.d.ts

@@ -1,5 +1,5 @@
 import { PropType } from 'vue';
-import { ColumnDef } from '../../../../core/types/src/index.ts';
+import { ColumnDef } from '../column.model';
 export declare const SortHeaderProperties: {
     column: {
         type: PropType<ColumnDef>;

package/table/header/sort.header.vue.d.ts

@@ -1,6 +1,6 @@
 declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     column: {
-        type: import('vue').PropType<import('../../../../core/types/src/index.ts').ColumnDef>;
+        type: import('vue').PropType<import('..').ColumnDef>;
         required: true;
     };
     sortColumn: {
@@ -11,7 +11,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     };
 }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     column: {
-        type: import('vue').PropType<import('../../../../core/types/src/index.ts').ColumnDef>;
+        type: import('vue').PropType<import('..').ColumnDef>;
         required: true;
     };
     sortColumn: {

package/table/index.d.ts

@@ -6,4 +6,6 @@ export { default as TableComponent } from './table.component.vue';
 export { default as Table } from './table.component.vue';
 export { default as TextCell } from './cells/text.cell.vue';
 export { default as BooleanCell } from './cells/boolean.cell.vue';
+export * from './column.model';
 export * from './table.model';
+export { type TablePage, type TableSort } from './table.component.properties';

package/table/pagination.component.properties.d.ts

@@ -1,3 +1,4 @@
+import { PropType } from 'vue';
 export declare const PaginationComponentProperties: {
     totalItems: {
         type: NumberConstructor;
@@ -11,5 +12,9 @@ export declare const PaginationComponentProperties: {
         type: NumberConstructor;
         default: number;
     };
+    pageSizeOptions: {
+        type: PropType<number[]>;
+        default: () => number[];
+    };
 };
 export declare const PaginationComponentEmits: string[];

package/table/pagination.component.vue.d.ts

@@ -11,6 +11,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: NumberConstructor;
         default: number;
     };
+    pageSizeOptions: {
+        type: import('vue').PropType<number[]>;
+        default: () => number[];
+    };
 }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     totalItems: {
         type: NumberConstructor;
@@ -24,9 +28,14 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: NumberConstructor;
         default: number;
     };
+    pageSizeOptions: {
+        type: import('vue').PropType<number[]>;
+        default: () => number[];
+    };
 }>> & Readonly<{}>, {
     currentPage: number;
     totalItems: number;
     itemsPerPage: number;
+    pageSizeOptions: number[];
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
 export default _default;

package/table/table.component.properties.d.ts

@@ -14,6 +14,10 @@ export declare const TableComponentProperties: {
         type: BooleanConstructor;
         default: false;
     };
+    multiselect: {
+        type: BooleanConstructor;
+        default: false;
+    };
     actions: {
         type: PropType<TableAction[]>;
     };

package/table/table.component.vue.d.ts

@@ -3,6 +3,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: BooleanConstructor;
         default: false;
     };
+    multiselect: {
+        type: BooleanConstructor;
+        default: false;
+    };
     actions: {
         type: import('vue').PropType<import('./table.model').TableAction[]>;
     };
@@ -24,6 +28,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: BooleanConstructor;
         default: false;
     };
+    multiselect: {
+        type: BooleanConstructor;
+        default: false;
+    };
     actions: {
         type: import('vue').PropType<import('./table.model').TableAction[]>;
     };
@@ -42,5 +50,6 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     };
 }>> & Readonly<{}>, {
     loading: boolean;
+    multiselect: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

package/table/table.model.d.ts

@@ -1,9 +1,12 @@
-import { ColumnDef } from '../../../core/types/src/index.ts';
+import { ColumnDef } from './column.model';
 import { IconEnum } from '../icons';
 export type TableAction = {
     label?: string;
+    tooltip?: string;
     icon?: IconEnum;
     action: <T>(data: T) => void;
+    /** Optional predicate — when provided, the button is only shown if this returns true for the row. */
+    visible?: <T>(data: T) => boolean;
 };
 export type DisplayColumn = ColumnDef & {
     component: any;

package/testing.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class r{constructor(t){this.locator=t}page(){return this.locator.page()}asLocator(){return this.locator}}const e=(x,t,a)=>x.getByRole(t,{name:a});class i extends r{static byId(t,a){return new i(e(t,"textbox",a))}static byLabel(t,a){return new i(e(t,"textbox",a))}static for(t){return new i(t)}async fill(t){return await this.locator.click(),await this.locator.fill(t),this}async type(t){return await this.locator.click(),await this.locator.pressSequentially(t),this}async clear(){return await this.locator.fill(""),this}async value(){return this.locator.inputValue()}async blur(){return await this.locator.press("Tab"),this}}class o extends r{static byId(t,a){return new o(e(t,"spinbutton",a))}static byLabel(t,a){return new o(e(t,"spinbutton",a))}static for(t){return new o(t)}async fill(t){return await this.locator.click(),await this.locator.fill(String(t)),await this.locator.press("Tab"),this}async clear(){return await this.locator.fill(""),this}async value(){const t=await this.locator.inputValue();return t===""?null:Number(t)}}class c extends r{static byId(t,a){return new c(e(t,"textbox",a))}static byLabel(t,a){return new c(e(t,"textbox",a))}static for(t){return new c(t)}async fill(t){return await this.locator.click(),await this.locator.fill(t),this}async clear(){return await this.locator.fill(""),this}async value(){return this.locator.inputValue()}}class s extends r{static byId(t,a){return new s(e(t,"checkbox",a))}static byLabel(t,a){return new s(e(t,"checkbox",a))}static for(t){return new s(t)}async fill(t){return t?await this.locator.check():await this.locator.uncheck(),this}async toggle(){return await this.locator.click(),this}async value(){return this.locator.isChecked()}}class n extends r{static byId(t,a){return new n(e(t,"combobox",a))}static byLabel(t,a){return new n(e(t,"combobox",a))}static for(t){return new n(t)}async open(){return await this.locator.click(),this}async fill(t){return this.select(t)}async select(t){return await this.open(),await this.page().getByRole("option",{name:t}).locator("a").click(),this}async value(){return(await this.locator.textContent())?.trim()??""}async clear(){return await this.locator.locator('xpath=ancestor::*[@role="select"][1]').getByRole("button",{name:"Clear"}).click(),this}async clickCreateNew(){await this.locator.locator('xpath=ancestor::*[@role="select"][1]').getByRole("button",{name:"create"}).click()}}class l extends r{static byId(t,a){return new l(e(t,"combobox",a))}static byLabel(t,a){return new l(e(t,"combobox",a))}static for(t){return new l(t)}async fill(t){return await this.locator.click(),await this.locator.fill(t),await this.page().getByRole("option",{name:t}).locator("a").click(),this}async query(t){return await this.locator.click(),await this.locator.fill(t),this}async pickOption(t){return await this.page().getByRole("option",{name:t}).locator("a").click(),this}async press(t){return await this.locator.press(t),this}async clickCreateNew(){await this.locator.locator('xpath=ancestor::*[@role="select"][1]').getByRole("button",{name:"create"}).click()}async clear(){return await this.locator.locator('xpath=ancestor::*[@role="select"][1]').getByRole("button",{name:"Clear"}).click(),this}async value(){return this.locator.inputValue()}listbox(){return this.page().getByRole("listbox")}options(){return this.page().getByRole("option")}}class u extends r{static byId(t,a){return new u(e(t,"combobox",a))}static byLabel(t,a){return new u(e(t,"combobox",a))}static for(t){return new u(t)}async open(){return await this.locator.click(),this}async fill(t){await this.open();for(const a of t)await this.page().getByRole("option",{name:a}).locator("a").click();return await this.locator.click(),this}async select(t){return await this.open(),await this.page().getByRole("option",{name:t}).locator("a").click(),this}async removeChip(t){return await this.locator.locator('xpath=ancestor::*[@role="select"][1]').getByText(t,{exact:!0}).getByRole("button").click(),this}}class h extends r{static byId(t,a){return new h(e(t,"textbox",a))}static byLabel(t,a){return new h(e(t,"textbox",a))}static for(t){return new h(t)}get editor(){return this.locator.getByRole("textbox")}async fill(t){return await this.editor.fill(t),this}async clear(){return await this.editor.fill(""),this}async typeBold(t){return await this.toolbar("B").click(),await this.editor.pressSequentially(t),await this.toolbar("B").click(),this}async typeItalic(t){return await this.toolbar("I").click(),await this.editor.pressSequentially(t),await this.toolbar("I").click(),this}async type(t){return await this.editor.pressSequentially(t),this}toolbar(t){return this.locator.getByRole("button",{name:t})}async isMarkActive(t){return(await this.toolbar(t).getAttribute("class")??"").includes("btn-active")}}class y extends r{static byTitle(t,a){return new y(t.getByRole("dialog",{name:a}))}static current(t){return new y(t.getByRole("dialog"))}static for(t){return new y(t)}async clickClose(){return await this.locator.getByRole("button",{name:"Close"}).click(),this}async pressEscape(){return await this.locator.press("Escape"),this}async clickBackdrop(){return await this.locator.click({position:{x:5,y:5}}),this}async clickAction(t){return await this.locator.getByRole("button",{name:t}).click(),this}title(){return this.locator.locator("h3").first()}content(){return this.locator.locator('[id$="_content"]').first()}asLocator(){return this.locator}}class b extends r{static byName(t,a){return new b(e(t,"button",a))}static for(t){return new b(t)}async click(){return await this.locator.click(),this}async isDisabled(){return this.locator.isDisabled()}async text(){return await this.locator.textContent()??""}}class p extends r{static byTitle(t,a){const f=t.getByLabel(`Toggle ${a}`);return new p(f.locator(".."))}static for(t){return new p(t)}async toggle(){return await this.checkbox().click(),this}async isOpen(){return this.checkbox().isChecked()}title(){return this.locator.locator(".collapse-title span").first()}content(){return this.locator.locator(".collapse-content")}checkbox(){return this.locator.locator('input[type="checkbox"]')}}class w extends r{static byMessage(t,a){return new w(t.getByRole("alert").filter({hasText:a}))}static first(t){return new w(t.getByRole("alert").first())}static for(t){return new w(t)}async message(){return await this.locator.locator("span").textContent()??""}async hasClass(t){return(await this.locator.getAttribute("class")??"").includes(t)}}class g extends r{static root(t){return new g(t.locator("main").first())}static for(t){return new g(t)}async toggleLeft(){return await this.leftButton().click(),this}async toggleRight(){return await this.rightButton().click(),this}async isLeftOpen(){return await this.leftButton().getAttribute("aria-expanded")==="true"}async isRightOpen(){return await this.rightButton().getAttribute("aria-expanded")==="true"}leftPanel(){return this.locator.locator("#drawer-left-panel")}rightPanel(){return this.locator.locator("#drawer-right-panel")}leftButton(){return this.locator.locator('button[aria-controls="drawer-left-panel"]')}rightButton(){return this.locator.locator('button[aria-controls="drawer-right-panel"]')}}exports.AlertHarness=w;exports.AutocompleteHarness=l;exports.BooleanHarness=s;exports.ButtonHarness=b;exports.CollapseHarness=p;exports.DrawerHarness=g;exports.Harness=r;exports.MarkdownHarness=h;exports.ModalHarness=y;exports.MultiSelectHarness=u;exports.NumberHarness=o;exports.SelectHarness=n;exports.TextAreaHarness=c;exports.TextHarness=i;exports.byRole=e;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=class{constructor(e){this.locator=e}page(){return this.locator.page()}asLocator(){return this.locator}},t=(e,t,n)=>e.getByRole(t,{name:n}),n=class n extends e{static byId(e,r){return new n(t(e,`textbox`,r))}static byLabel(e,r){return new n(t(e,`textbox`,r))}static for(e){return new n(e)}async fill(e){return await this.locator.click(),await this.locator.fill(e),this}async type(e){return await this.locator.click(),await this.locator.pressSequentially(e),this}async clear(){return await this.locator.fill(``),this}async value(){return this.locator.inputValue()}async blur(){return await this.locator.press(`Tab`),this}},r=class n extends e{static byId(e,r){return new n(t(e,`spinbutton`,r))}static byLabel(e,r){return new n(t(e,`spinbutton`,r))}static for(e){return new n(e)}async fill(e){return await this.locator.click(),await this.locator.fill(String(e)),await this.locator.press(`Tab`),this}async clear(){return await this.locator.fill(``),this}async value(){let e=await this.locator.inputValue();return e===``?null:Number(e)}},i=class n extends e{static byId(e,r){return new n(t(e,`textbox`,r))}static byLabel(e,r){return new n(t(e,`textbox`,r))}static for(e){return new n(e)}async fill(e){return await this.locator.click(),await this.locator.fill(e),this}async clear(){return await this.locator.fill(``),this}async value(){return this.locator.inputValue()}},a=class n extends e{static byId(e,r){return new n(t(e,`checkbox`,r))}static byLabel(e,r){return new n(t(e,`checkbox`,r))}static for(e){return new n(e)}async fill(e){return e?await this.locator.check():await this.locator.uncheck(),this}async toggle(){return await this.locator.click(),this}async value(){return this.locator.isChecked()}},o=class n extends e{static byId(e,r){return new n(t(e,`combobox`,r))}static byLabel(e,r){return new n(t(e,`combobox`,r))}static for(e){return new n(e)}async open(){return await this.locator.click(),this}async fill(e){return this.select(e)}async select(e){return await this.open(),await this.page().getByRole(`option`,{name:e}).locator(`a`).click(),this}async value(){return(await this.locator.textContent())?.trim()??``}async clear(){return await this.locator.locator(`xpath=ancestor::*[@role="select"][1]`).getByRole(`button`,{name:`Clear`}).click(),this}async clickCreateNew(){await this.locator.locator(`xpath=ancestor::*[@role="select"][1]`).getByRole(`button`,{name:`create`}).click()}},s=class n extends e{static byId(e,r){return new n(t(e,`combobox`,r))}static byLabel(e,r){return new n(t(e,`combobox`,r))}static for(e){return new n(e)}async fill(e){return await this.locator.click(),await this.locator.fill(e),await this.page().getByRole(`option`,{name:e}).locator(`a`).click(),this}async query(e){return await this.locator.click(),await this.locator.fill(e),this}async pickOption(e){return await this.page().getByRole(`option`,{name:e}).locator(`a`).click(),this}async press(e){return await this.locator.press(e),this}async clickCreateNew(){await this.locator.locator(`xpath=ancestor::*[@role="select"][1]`).getByRole(`button`,{name:`create`}).click()}async clear(){return await this.locator.locator(`xpath=ancestor::*[@role="select"][1]`).getByRole(`button`,{name:`Clear`}).click(),this}async value(){return this.locator.inputValue()}listbox(){return this.page().getByRole(`listbox`)}options(){return this.page().getByRole(`option`)}},c=class n extends e{static byId(e,r){return new n(t(e,`combobox`,r))}static byLabel(e,r){return new n(t(e,`combobox`,r))}static for(e){return new n(e)}async open(){return await this.locator.click(),this}async fill(e){await this.open();for(let t of e)await this.page().getByRole(`option`,{name:t}).locator(`a`).click();return await this.locator.click(),this}async select(e){return await this.open(),await this.page().getByRole(`option`,{name:e}).locator(`a`).click(),this}async removeChip(e){return await this.locator.locator(`xpath=ancestor::*[@role="select"][1]`).getByText(e,{exact:!0}).getByRole(`button`).click(),this}},l=class n extends e{static byId(e,r){return new n(t(e,`textbox`,r))}static byLabel(e,r){return new n(t(e,`textbox`,r))}static for(e){return new n(e)}get editor(){return this.locator.getByRole(`textbox`)}async fill(e){return await this.editor.fill(e),this}async clear(){return await this.editor.fill(``),this}async typeBold(e){return await this.toolbar(`B`).click(),await this.editor.pressSequentially(e),await this.toolbar(`B`).click(),this}async typeItalic(e){return await this.toolbar(`I`).click(),await this.editor.pressSequentially(e),await this.toolbar(`I`).click(),this}async type(e){return await this.editor.pressSequentially(e),this}toolbar(e){return this.locator.getByRole(`button`,{name:e})}async isMarkActive(e){return(await this.toolbar(e).getAttribute(`class`)??``).includes(`btn-active`)}},u=class t extends e{static byTitle(e,n){return new t(e.getByRole(`dialog`,{name:n}))}static current(e){return new t(e.getByRole(`dialog`))}static for(e){return new t(e)}async clickClose(){return await this.locator.getByRole(`button`,{name:`Close`}).click(),this}async pressEscape(){return await this.locator.press(`Escape`),this}async clickBackdrop(){return await this.locator.click({position:{x:5,y:5}}),this}async clickAction(e){return await this.locator.getByRole(`button`,{name:e}).click(),this}title(){return this.locator.locator(`h3`).first()}content(){return this.locator.locator(`[id$="_content"]`).first()}asLocator(){return this.locator}},d=class n extends e{static byName(e,r){return new n(t(e,`button`,r))}static for(e){return new n(e)}async click(){return await this.locator.click(),this}async isDisabled(){return this.locator.isDisabled()}async text(){return await this.locator.textContent()??``}},f=class t extends e{static byTitle(e,n){return new t(e.getByLabel(`Toggle ${n}`).locator(`..`))}static for(e){return new t(e)}async toggle(){return await this.checkbox().click(),this}async isOpen(){return this.checkbox().isChecked()}title(){return this.locator.locator(`.collapse-title span`).first()}content(){return this.locator.locator(`.collapse-content`)}checkbox(){return this.locator.locator(`input[type="checkbox"]`)}},p=class t extends e{static byMessage(e,n){return new t(e.getByRole(`alert`).filter({hasText:n}))}static first(e){return new t(e.getByRole(`alert`).first())}static for(e){return new t(e)}async message(){return await this.locator.locator(`span`).textContent()??``}async hasClass(e){return(await this.locator.getAttribute(`class`)??``).includes(e)}},m=class t extends e{static root(e){return new t(e.locator(`main`).first())}static for(e){return new t(e)}async toggleLeft(){return await this.leftButton().click(),this}async toggleRight(){return await this.rightButton().click(),this}async isLeftOpen(){return await this.leftButton().getAttribute(`aria-expanded`)===`true`}async isRightOpen(){return await this.rightButton().getAttribute(`aria-expanded`)===`true`}leftPanel(){return this.locator.locator(`#drawer-left-panel`)}rightPanel(){return this.locator.locator(`#drawer-right-panel`)}leftButton(){return this.locator.locator(`button[aria-controls="drawer-left-panel"]`)}rightButton(){return this.locator.locator(`button[aria-controls="drawer-right-panel"]`)}};exports.AlertHarness=p,exports.AutocompleteHarness=s,exports.BooleanHarness=a,exports.ButtonHarness=d,exports.CollapseHarness=f,exports.DrawerHarness=m,exports.Harness=e,exports.MarkdownHarness=l,exports.ModalHarness=u,exports.MultiSelectHarness=c,exports.NumberHarness=r,exports.SelectHarness=o,exports.TextAreaHarness=i,exports.TextHarness=n,exports.byRole=t;