Skip to content

Commit 3db2daa

Browse files
maximilianimaximiliani
committed
minor design optimizations
Signed-off-by: Maximilian Inckmann <[email protected]>
1 parent 825a99d commit 3db2daa

File tree

6 files changed

+128
-165
lines changed

6 files changed

+128
-165
lines changed

‎packages/react-library/lib/components/stencil-generated/components.server.ts‎

Lines changed: 123 additions & 130 deletions
Original file line numberDiff line numberDiff line change
@@ -8,187 +8,180 @@
88

99
/* eslint-disable */
1010

11-
import {
12-
ColorHighlight as ColorHighlightElement,
13-
} from '@kit-data-manager/pid-component/dist/components/color-highlight.js';
14-
import { CopyButton as CopyButtonElement } from '@kit-data-manager/pid-component/dist/components/copy-button.js';
15-
import { JsonViewer as JsonViewerElement } from '@kit-data-manager/pid-component/dist/components/json-viewer.js';
16-
import {
17-
LocaleVisualization as LocaleVisualizationElement,
18-
} from '@kit-data-manager/pid-component/dist/components/locale-visualization.js';
19-
import { PidActions as PidActionsElement } from '@kit-data-manager/pid-component/dist/components/pid-actions.js';
20-
import {
21-
PidCollapsible as PidCollapsibleElement,
22-
} from '@kit-data-manager/pid-component/dist/components/pid-collapsible.js';
23-
import { PidComponent as PidComponentElement } from '@kit-data-manager/pid-component/dist/components/pid-component.js';
24-
import { PidDataTable as PidDataTableElement } from '@kit-data-manager/pid-component/dist/components/pid-data-table.js';
25-
import {
26-
PidPagination as PidPaginationElement,
27-
} from '@kit-data-manager/pid-component/dist/components/pid-pagination.js';
28-
import { PidTooltip as PidTooltipElement } from '@kit-data-manager/pid-component/dist/components/pid-tooltip.js';
11+
import { ColorHighlight as ColorHighlightElement } from "@kit-data-manager/pid-component/dist/components/color-highlight.js";
12+
import { CopyButton as CopyButtonElement } from "@kit-data-manager/pid-component/dist/components/copy-button.js";
13+
import { JsonViewer as JsonViewerElement } from "@kit-data-manager/pid-component/dist/components/json-viewer.js";
14+
import { LocaleVisualization as LocaleVisualizationElement } from "@kit-data-manager/pid-component/dist/components/locale-visualization.js";
15+
import { PidActions as PidActionsElement } from "@kit-data-manager/pid-component/dist/components/pid-actions.js";
16+
import { PidCollapsible as PidCollapsibleElement } from "@kit-data-manager/pid-component/dist/components/pid-collapsible.js";
17+
import { PidComponent as PidComponentElement } from "@kit-data-manager/pid-component/dist/components/pid-component.js";
18+
import { PidDataTable as PidDataTableElement } from "@kit-data-manager/pid-component/dist/components/pid-data-table.js";
19+
import { PidPagination as PidPaginationElement } from "@kit-data-manager/pid-component/dist/components/pid-pagination.js";
20+
import { PidTooltip as PidTooltipElement } from "@kit-data-manager/pid-component/dist/components/pid-tooltip.js";
2921
import type { EventName, StencilReactComponent } from '@stencil/react-output-target/runtime';
3022
import { createComponent, type SerializeShadowRootOptions } from '@stencil/react-output-target/ssr';
3123

32-
export const serializeShadowRoot: SerializeShadowRootOptions = { default: "declarative'declarative-shadow-dom'type ColorHighlightEvents = NonNullable<unknown>;
24+
export const serializeShadowRoot: SerializeShadowRootOptions = { default: "declarative-shadow-dom" };
25+
26+
export type ColorHighlightEvents = NonNullable<unknown>;
3327

3428
export const ColorHighlight: StencilReactComponent<ColorHighlightElement, ColorHighlightEvents> = /*@__PURE__*/ createComponent<ColorHighlightElement, ColorHighlightEvents>({
35-
tagName: 'color-highlight',
36-
properties: { text: 'text' },
37-
hydrateModule: import('@kit-data-manager/pid-component/hydrate'),
38-
serializeShadowRoot,
29+
tagName: 'color-highlight',
30+
properties: { text: 'text' },
31+
hydrateModule: import('@kit-data-manager/pid-component/hydrate'),
32+
serializeShadowRoot
3933
});
4034

4135
export type CopyButtonEvents = NonNullable<unknown>;
4236

4337
export const CopyButton: StencilReactComponent<CopyButtonElement, CopyButtonEvents> = /*@__PURE__*/ createComponent<CopyButtonElement, CopyButtonEvents>({
44-
tagName: 'copy-button',
45-
properties: {
46-
value: 'value',
47-
label: 'label',
48-
},
49-
hydrateModule: import('@kit-data-manager/pid-component/hydrate'),
50-
serializeShadowRoot,
38+
tagName: 'copy-button',
39+
properties: {
40+
value: 'value',
41+
label: 'label'
42+
},
43+
hydrateModule: import('@kit-data-manager/pid-component/hydrate'),
44+
serializeShadowRoot
5145
});
5246

5347
export type JsonViewerEvents = NonNullable<unknown>;
5448

5549
export const JsonViewer: StencilReactComponent<JsonViewerElement, JsonViewerEvents> = /*@__PURE__*/ createComponent<JsonViewerElement, JsonViewerEvents>({
56-
tagName: 'json-viewer',
57-
properties: {
58-
data: 'data',
59-
viewMode: 'view-mode',
60-
maxHeight: 'max-height',
61-
showLineNumbers: 'show-line-numbers',
62-
expandAll: 'expand-all',
63-
theme: 'theme',
64-
},
65-
hydrateModule: import('@kit-data-manager/pid-component/hydrate'),
66-
serializeShadowRoot,
50+
tagName: 'json-viewer',
51+
properties: {
52+
data: 'data',
53+
viewMode: 'view-mode',
54+
maxHeight: 'max-height',
55+
showLineNumbers: 'show-line-numbers',
56+
expandAll: 'expand-all',
57+
theme: 'theme'
58+
},
59+
hydrateModule: import('@kit-data-manager/pid-component/hydrate'),
60+
serializeShadowRoot
6761
});
6862

6963
export type LocaleVisualizationEvents = NonNullable<unknown>;
7064

7165
export const LocaleVisualization: StencilReactComponent<LocaleVisualizationElement, LocaleVisualizationEvents> = /*@__PURE__*/ createComponent<LocaleVisualizationElement, LocaleVisualizationEvents>({
72-
tagName: 'locale-visualization',
73-
properties: {
74-
locale: 'locale',
75-
showFlag: 'show-flag',
76-
},
77-
hydrateModule: import('@kit-data-manager/pid-component/hydrate'),
78-
serializeShadowRoot,
66+
tagName: 'locale-visualization',
67+
properties: {
68+
locale: 'locale',
69+
showFlag: 'show-flag'
70+
},
71+
hydrateModule: import('@kit-data-manager/pid-component/hydrate'),
72+
serializeShadowRoot
7973
});
8074

8175
export type PidActionsEvents = NonNullable<unknown>;
8276

8377
export const PidActions: StencilReactComponent<PidActionsElement, PidActionsEvents> = /*@__PURE__*/ createComponent<PidActionsElement, PidActionsEvents>({
84-
tagName: 'pid-actions',
85-
properties: {
86-
actions: 'actions',
87-
actionsId: 'actions-id',
88-
darkMode: 'dark-mode',
89-
},
90-
hydrateModule: import('@kit-data-manager/pid-component/hydrate'),
91-
serializeShadowRoot,
78+
tagName: 'pid-actions',
79+
properties: {
80+
actions: 'actions',
81+
actionsId: 'actions-id',
82+
darkMode: 'dark-mode'
83+
},
84+
hydrateModule: import('@kit-data-manager/pid-component/hydrate'),
85+
serializeShadowRoot
9286
});
9387

9488
export type PidCollapsibleEvents = {
95-
onCollapsibleToggle: EventName<CustomEvent<boolean>>,
96-
onContentHeightChange: EventName<CustomEvent<{ maxHeight: number }>>
89+
onCollapsibleToggle: EventName<CustomEvent<boolean>>,
90+
onContentHeightChange: EventName<CustomEvent<{ maxHeight: number }>>
9791
};
9892

9993
export const PidCollapsible: StencilReactComponent<PidCollapsibleElement, PidCollapsibleEvents> = /*@__PURE__*/ createComponent<PidCollapsibleElement, PidCollapsibleEvents>({
100-
tagName: 'pid-collapsible',
101-
properties: {
102-
open: 'open',
103-
emphasize: 'emphasize',
104-
darkMode: 'dark-mode',
105-
expanded: 'expanded',
106-
initialWidth: 'initial-width',
107-
initialHeight: 'initial-height',
108-
lineHeight: 'line-height',
109-
showFooter: 'show-footer',
110-
},
111-
hydrateModule: import('@kit-data-manager/pid-component/hydrate'),
112-
serializeShadowRoot,
94+
tagName: 'pid-collapsible',
95+
properties: {
96+
open: 'open',
97+
emphasize: 'emphasize',
98+
darkMode: 'dark-mode',
99+
expanded: 'expanded',
100+
initialWidth: 'initial-width',
101+
initialHeight: 'initial-height',
102+
lineHeight: 'line-height',
103+
showFooter: 'show-footer'
104+
},
105+
hydrateModule: import('@kit-data-manager/pid-component/hydrate'),
106+
serializeShadowRoot
113107
});
114108

115109
export type PidComponentEvents = NonNullable<unknown>;
116110

117111
export const PidComponent: StencilReactComponent<PidComponentElement, PidComponentEvents> = /*@__PURE__*/ createComponent<PidComponentElement, PidComponentEvents>({
118-
tagName: 'pid-component',
119-
properties: {
120-
value: 'value',
121-
settings: 'settings',
122-
openByDefault: 'open-by-default',
123-
amountOfItems: 'amount-of-items',
124-
levelOfSubcomponents: 'level-of-subcomponents',
125-
currentLevelOfSubcomponents: 'current-level-of-subcomponents',
126-
hideSubcomponents: 'hide-subcomponents',
127-
emphasizeComponent: 'emphasize-component',
128-
showTopLevelCopy: 'show-top-level-copy',
129-
defaultTTL: 'default-t-t-l',
130-
width: 'width',
131-
height: 'height',
132-
darkMode: 'dark-mode',
133-
},
134-
hydrateModule: import('@kit-data-manager/pid-component/hydrate'),
135-
serializeShadowRoot,
112+
tagName: 'pid-component',
113+
properties: {
114+
value: 'value',
115+
settings: 'settings',
116+
openByDefault: 'open-by-default',
117+
amountOfItems: 'amount-of-items',
118+
levelOfSubcomponents: 'level-of-subcomponents',
119+
currentLevelOfSubcomponents: 'current-level-of-subcomponents',
120+
hideSubcomponents: 'hide-subcomponents',
121+
emphasizeComponent: 'emphasize-component',
122+
showTopLevelCopy: 'show-top-level-copy',
123+
defaultTTL: 'default-t-t-l',
124+
width: 'width',
125+
height: 'height',
126+
darkMode: 'dark-mode'
127+
},
128+
hydrateModule: import('@kit-data-manager/pid-component/hydrate'),
129+
serializeShadowRoot
136130
});
137131

138132
export type PidDataTableEvents = {
139-
onPageChange: EventName<CustomEvent<number>>,
140-
onItemsPerPageChange: EventName<CustomEvent<number>>
133+
onPageChange: EventName<CustomEvent<number>>,
134+
onItemsPerPageChange: EventName<CustomEvent<number>>
141135
};
142136

143137
export const PidDataTable: StencilReactComponent<PidDataTableElement, PidDataTableEvents> = /*@__PURE__*/ createComponent<PidDataTableElement, PidDataTableEvents>({
144-
tagName: 'pid-data-table',
145-
properties: {
146-
items: 'items',
147-
itemsPerPage: 'items-per-page',
148-
currentPage: 'current-page',
149-
pageSizes: 'page-sizes',
150-
loadSubcomponents: 'load-subcomponents',
151-
hideSubcomponents: 'hide-subcomponents',
152-
currentLevelOfSubcomponents: 'current-level-of-subcomponents',
153-
levelOfSubcomponents: 'level-of-subcomponents',
154-
settings: 'settings',
155-
darkMode: 'dark-mode',
156-
},
157-
hydrateModule: import('@kit-data-manager/pid-component/hydrate'),
158-
serializeShadowRoot,
138+
tagName: 'pid-data-table',
139+
properties: {
140+
items: 'items',
141+
itemsPerPage: 'items-per-page',
142+
currentPage: 'current-page',
143+
pageSizes: 'page-sizes',
144+
loadSubcomponents: 'load-subcomponents',
145+
hideSubcomponents: 'hide-subcomponents',
146+
currentLevelOfSubcomponents: 'current-level-of-subcomponents',
147+
levelOfSubcomponents: 'level-of-subcomponents',
148+
settings: 'settings',
149+
darkMode: 'dark-mode'
150+
},
151+
hydrateModule: import('@kit-data-manager/pid-component/hydrate'),
152+
serializeShadowRoot
159153
});
160154

161155
export type PidPaginationEvents = {
162-
onPageChange: EventName<CustomEvent<number>>,
163-
onItemsPerPageChange: EventName<CustomEvent<number>>
156+
onPageChange: EventName<CustomEvent<number>>,
157+
onItemsPerPageChange: EventName<CustomEvent<number>>
164158
};
165159

166160
export const PidPagination: StencilReactComponent<PidPaginationElement, PidPaginationEvents> = /*@__PURE__*/ createComponent<PidPaginationElement, PidPaginationEvents>({
167-
tagName: 'pid-pagination',
168-
properties: {
169-
currentPage: 'current-page',
170-
totalItems: 'total-items',
171-
itemsPerPage: 'items-per-page',
172-
pageSizes: 'page-sizes',
173-
adaptivePagination: 'adaptive-pagination',
174-
showItemsPerPageControl: 'show-items-per-page-control',
175-
darkMode: 'dark-mode',
176-
},
177-
hydrateModule: import('@kit-data-manager/pid-component/hydrate'),
178-
serializeShadowRoot,
161+
tagName: 'pid-pagination',
162+
properties: {
163+
currentPage: 'current-page',
164+
totalItems: 'total-items',
165+
itemsPerPage: 'items-per-page',
166+
pageSizes: 'page-sizes',
167+
showItemsPerPageControl: 'show-items-per-page-control',
168+
darkMode: 'dark-mode'
169+
},
170+
hydrateModule: import('@kit-data-manager/pid-component/hydrate'),
171+
serializeShadowRoot
179172
});
180173

181174
export type PidTooltipEvents = { onTooltipExpansionChange: EventName<CustomEvent<{ expand: boolean; requiredHeight: number }>> };
182175

183176
export const PidTooltip: StencilReactComponent<PidTooltipElement, PidTooltipEvents> = /*@__PURE__*/ createComponent<PidTooltipElement, PidTooltipEvents>({
184-
tagName: 'pid-tooltip',
185-
properties: {
186-
text: 'text',
187-
position: 'position',
188-
maxWidth: 'max-width',
189-
maxHeight: 'max-height',
190-
fitContent: 'fit-content',
191-
},
192-
hydrateModule: import('@kit-data-manager/pid-component/hydrate'),
193-
serializeShadowRoot,
177+
tagName: 'pid-tooltip',
178+
properties: {
179+
text: 'text',
180+
position: 'position',
181+
maxWidth: 'max-width',
182+
maxHeight: 'max-height',
183+
fitContent: 'fit-content'
184+
},
185+
hydrateModule: import('@kit-data-manager/pid-component/hydrate'),
186+
serializeShadowRoot
194187
});

‎packages/stencil-library/src/components.d.ts‎

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -277,11 +277,6 @@ export namespace Components {
277277
"settings": string;
278278
}
279279
interface PidPagination {
280-
/**
281-
* Enable adaptive pagination mode
282-
* @default false
283-
*/
284-
"adaptivePagination": boolean;
285280
/**
286281
* Current page (0-based index)
287282
* @default 0
@@ -753,11 +748,6 @@ declare namespace LocalJSX {
753748
"settings"?: string;
754749
}
755750
interface PidPagination {
756-
/**
757-
* Enable adaptive pagination mode
758-
* @default false
759-
*/
760-
"adaptivePagination"?: boolean;
761751
/**
762752
* Current page (0-based index)
763753
* @default 0

‎packages/stencil-library/src/components/pid-collapsible/pid-collapsible.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -868,7 +868,7 @@ export class PidCollapsible {
868868
</div>
869869
</summary>
870870

871-
<div class={`${contentClasses} ${this.expanded ? 'mt-2' : ''}`}>
871+
<div class={`${contentClasses}`}>
872872
<slot></slot>
873873
</div>
874874

‎packages/stencil-library/src/components/pid-data-table/pid-data-table.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,9 @@ export class PidDataTable {
143143
}
144144

145145
return (
146-
<div class={isDarkMode ? 'm-1 flex h-full flex-col rounded-lg border border-gray-700 bg-gray-800' : 'm-1 flex h-full flex-col rounded-lg border border-gray-200 bg-gray-50'}>
146+
<div
147+
class={isDarkMode ? 'mx-1 flex h-full flex-col rounded-lg border border-gray-700 bg-gray-800' : 'mx-1 flex h-full flex-col rounded-lg border border-gray-200 bg-gray-50'}
148+
>
147149
{/* Table container with scrollable content */}
148150
<div class="relative z-10 flex-grow overflow-auto">
149151
<table

‎packages/stencil-library/src/components/pid-pagination/pid-pagination.tsx‎

Lines changed: 1 addition & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -30,11 +30,6 @@ export class PidPagination {
3030
*/
3131
@Prop() pageSizes: number[] = [5, 10, 25, 50, 100];
3232

33-
/**
34-
* Enable adaptive pagination mode
35-
*/
36-
@Prop() adaptivePagination: boolean = false;
37-
3833
/**
3934
* Whether to show the items per page control
4035
*/
@@ -182,7 +177,7 @@ export class PidPagination {
182177
{/* Left side: Page size selector and info - ALWAYS SHOWN */}
183178
<div class={`flex flex-wrap items-center gap-2 ${isDarkMode ? 'text-gray-300' : 'text-gray-600'}`}>
184179
{/* Horizontal page size selector - Only shown when not in adaptive mode and when control is enabled */}
185-
{!this.adaptivePagination && this.showItemsPerPageControl && (
180+
{this.showItemsPerPageControl && (
186181
<div class="flex items-center gap-1" role="group" aria-label="Items per page options">
187182
<span class={`text-xs whitespace-nowrap ${isDarkMode ? 'text-gray-300' : 'text-gray-600'}`} id={`${paginationId}-itemsperpage-label`}>
188183
Items per page:
@@ -211,22 +206,6 @@ export class PidPagination {
211206
</div>
212207
)}
213208

214-
{/* When in adaptive mode, show indicator */}
215-
{this.adaptivePagination && (
216-
<div class="flex items-center gap-1">
217-
<span
218-
class={`rounded-full border ${
219-
isDarkMode ? 'border-blue-700 bg-blue-800 text-gray-200' : 'border-blue-100 bg-blue-50 text-gray-600'
220-
} px-2 py-0.5 text-xs whitespace-nowrap`}
221-
role="status"
222-
aria-live="polite"
223-
>
224-
<span class="sr-only">Currently using </span>
225-
Adaptive pagination: {this.itemsPerPage} items
226-
</span>
227-
</div>
228-
)}
229-
230209
{/* Item range display */}
231210
<span class={`hidden text-xs whitespace-nowrap ${isDarkMode ? 'text-gray-300' : 'text-gray-600'} sm:block`} role="status" aria-live="polite">
232211
Showing {this.displayRange.start}-{this.displayRange.end} of {this.totalItems}

0 commit comments

Comments
 (0)