@konoma-development/react-components 0.1.13 → 0.2.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.
- package/dist/@konoma-development/react-components.js +188 -174
- package/dist/@konoma-development/react-components.js.map +1 -1
- package/dist/components/form/form.d.ts +2 -2
- package/dist/components/form/types.d.ts +2 -2
- package/dist/components/form/validators.d.ts +2 -2
- package/dist/components/table/table.d.ts +5 -5
- package/dist/components/wrapper.d.ts +8 -0
- package/dist/main.d.ts +2 -1
- package/package.json +3 -1
|
@@ -14237,6 +14237,11 @@ var CreatableSelect = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
14237
14237
|
});
|
|
14238
14238
|
var CreatableSelect$1 = CreatableSelect;
|
|
14239
14239
|
|
|
14240
|
+
const i18nContext = createContext({ locale: "en" });
|
|
14241
|
+
function ComponentsWrapper({ children, locale }) {
|
|
14242
|
+
return /* @__PURE__ */ jsx(i18nContext.Provider, { value: { locale: locale ?? "en" }, children });
|
|
14243
|
+
}
|
|
14244
|
+
|
|
14240
14245
|
const CUSTOM_ENTRY_VALUE = "CUSTOM_ENTRY_VALUE";
|
|
14241
14246
|
const baseClasses$a = {
|
|
14242
14247
|
classes: "rounded-krc-select h-10 py-0 border shadow-none",
|
|
@@ -14274,7 +14279,7 @@ function Select({
|
|
|
14274
14279
|
indicatorClasses = baseClasses$a.indicatorClasses,
|
|
14275
14280
|
valueContainerClasses = baseClasses$a.valueContainerClasses,
|
|
14276
14281
|
options = [],
|
|
14277
|
-
placeholder
|
|
14282
|
+
placeholder,
|
|
14278
14283
|
className,
|
|
14279
14284
|
required,
|
|
14280
14285
|
error,
|
|
@@ -14301,6 +14306,7 @@ function Select({
|
|
|
14301
14306
|
},
|
|
14302
14307
|
...props
|
|
14303
14308
|
}) {
|
|
14309
|
+
const { locale } = useContext(i18nContext);
|
|
14304
14310
|
const classesFull = [classes, className];
|
|
14305
14311
|
const optionsInternal = options.filter((o) => !!o.value && o.value !== CUSTOM_ENTRY_VALUE).concat(
|
|
14306
14312
|
!allowCustomValues ? [] : [
|
|
@@ -14418,7 +14424,7 @@ function Select({
|
|
|
14418
14424
|
},
|
|
14419
14425
|
...props
|
|
14420
14426
|
},
|
|
14421
|
-
key
|
|
14427
|
+
key + locale
|
|
14422
14428
|
)
|
|
14423
14429
|
] }),
|
|
14424
14430
|
error && error.length > 0 && error.map((e, i) => /* @__PURE__ */ jsx("span", { className: errorClasses, children: e }, i))
|
|
@@ -15604,7 +15610,6 @@ function Textarea({
|
|
|
15604
15610
|
defaultValue,
|
|
15605
15611
|
maxLengthLabel,
|
|
15606
15612
|
/** UNUSED, only listed so that the typing for onInput does not clash with the onInput event of the textarea */
|
|
15607
|
-
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
15608
15613
|
onInput = () => {
|
|
15609
15614
|
return;
|
|
15610
15615
|
},
|
|
@@ -15718,7 +15723,7 @@ function FormField({
|
|
|
15718
15723
|
);
|
|
15719
15724
|
}
|
|
15720
15725
|
|
|
15721
|
-
function required(message
|
|
15726
|
+
function required(message) {
|
|
15722
15727
|
return (value) => {
|
|
15723
15728
|
if (value === void 0 || value === null || value === "") {
|
|
15724
15729
|
return message;
|
|
@@ -15726,7 +15731,7 @@ function required(message = "Bitte ausfüllen") {
|
|
|
15726
15731
|
return "";
|
|
15727
15732
|
};
|
|
15728
15733
|
}
|
|
15729
|
-
function email(message
|
|
15734
|
+
function email(message) {
|
|
15730
15735
|
return (value) => {
|
|
15731
15736
|
if (!value) {
|
|
15732
15737
|
return "";
|
|
@@ -22491,6 +22496,7 @@ function Table({
|
|
|
22491
22496
|
return;
|
|
22492
22497
|
}
|
|
22493
22498
|
}) {
|
|
22499
|
+
const { locale } = useContext(i18nContext);
|
|
22494
22500
|
const hasFilters = !!(showFilters && (columnsCenter.some((column) => column.filterable) || columnsLeft?.some((column) => column.filterable) || columnsRight?.some((column) => column.filterable)));
|
|
22495
22501
|
const totalPages = totalPagesProp || Math.ceil(totalRows / pagesize);
|
|
22496
22502
|
const currentStart = (currentPage - 1) * pagesize;
|
|
@@ -22515,186 +22521,194 @@ function Table({
|
|
|
22515
22521
|
className: tableClasses,
|
|
22516
22522
|
onScroll,
|
|
22517
22523
|
children: [
|
|
22518
|
-
/* @__PURE__ */ jsxs(
|
|
22519
|
-
|
|
22520
|
-
|
|
22521
|
-
|
|
22522
|
-
|
|
22523
|
-
|
|
22524
|
-
|
|
22525
|
-
|
|
22526
|
-
|
|
22527
|
-
|
|
22528
|
-
|
|
22529
|
-
|
|
22530
|
-
}
|
|
22531
|
-
|
|
22532
|
-
|
|
22533
|
-
|
|
22534
|
-
|
|
22535
|
-
|
|
22536
|
-
|
|
22537
|
-
|
|
22538
|
-
|
|
22539
|
-
|
|
22540
|
-
|
|
22541
|
-
|
|
22542
|
-
|
|
22543
|
-
|
|
22544
|
-
|
|
22545
|
-
|
|
22546
|
-
|
|
22547
|
-
|
|
22548
|
-
|
|
22549
|
-
|
|
22550
|
-
|
|
22551
|
-
|
|
22552
|
-
|
|
22553
|
-
|
|
22554
|
-
|
|
22555
|
-
|
|
22556
|
-
|
|
22557
|
-
|
|
22558
|
-
|
|
22559
|
-
|
|
22560
|
-
children: column.filterable && column.filterKey && /* @__PURE__ */ jsx(Fragment, { children: column.filterComponent?.(filters, updateFilters) || filterComponents?.[column.id]?.(filters, updateFilters) || /* @__PURE__ */ jsx(
|
|
22561
|
-
Input$2,
|
|
22524
|
+
/* @__PURE__ */ jsxs(
|
|
22525
|
+
"div",
|
|
22526
|
+
{
|
|
22527
|
+
ref: header,
|
|
22528
|
+
className: "sticky top-0 z-1 flex flex-row items-center justify-between rounded-t-krc-table bg-krc-table-header",
|
|
22529
|
+
children: [
|
|
22530
|
+
!!currentColumnsLeft.length && /* @__PURE__ */ jsx("div", { className: "sticky left-0 flex flex-row z-1", children: currentColumnsLeft.map((column) => /* @__PURE__ */ jsxs(
|
|
22531
|
+
"div",
|
|
22532
|
+
{
|
|
22533
|
+
style: {
|
|
22534
|
+
minWidth: column.initialWidth,
|
|
22535
|
+
maxWidth: !column.grow ? column.initialWidth : void 0
|
|
22536
|
+
},
|
|
22537
|
+
onClick: () => {
|
|
22538
|
+
return column.sortKey && onSort(
|
|
22539
|
+
Object.assign({}, column, {
|
|
22540
|
+
sorting: column.sorting ? { "+": "-", "-": void 0 }[column.sorting] : "+"
|
|
22541
|
+
})
|
|
22542
|
+
);
|
|
22543
|
+
},
|
|
22544
|
+
className: [
|
|
22545
|
+
headerClasses,
|
|
22546
|
+
hasFilters ? "h-24" : "h-12",
|
|
22547
|
+
column.sortKey ? "cursor-pointer" : "",
|
|
22548
|
+
column.grow ? "grow" : ""
|
|
22549
|
+
].join(" "),
|
|
22550
|
+
children: [
|
|
22551
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center gap-2 w-full justify-between", children: [
|
|
22552
|
+
/* @__PURE__ */ jsx("span", { children: column.title }),
|
|
22553
|
+
column.sortKey && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
|
|
22554
|
+
Icon,
|
|
22555
|
+
{
|
|
22556
|
+
className: "h-4 w-4",
|
|
22557
|
+
name: column.sorting ? {
|
|
22558
|
+
"+": "heroicons:chevron-down-16-solid",
|
|
22559
|
+
"-": "heroicons:chevron-up-16-solid"
|
|
22560
|
+
}[column.sorting] : "heroicons:chevron-up-down-16-solid"
|
|
22561
|
+
}
|
|
22562
|
+
) })
|
|
22563
|
+
] }),
|
|
22564
|
+
hasFilters && /* @__PURE__ */ jsx(
|
|
22565
|
+
"div",
|
|
22562
22566
|
{
|
|
22563
|
-
|
|
22564
|
-
onKeyDown: async (e) => {
|
|
22565
|
-
if (e.key === "Enter" && column.filterKey) {
|
|
22566
|
-
const key = column.filterKey;
|
|
22567
|
-
const value = e.currentTarget.value;
|
|
22568
|
-
if (e) {
|
|
22569
|
-
await updateFilters({ ...filters, [key]: [value] });
|
|
22570
|
-
} else {
|
|
22571
|
-
const newFilters = { ...filters };
|
|
22572
|
-
delete newFilters[key];
|
|
22573
|
-
await updateFilters(newFilters);
|
|
22574
|
-
}
|
|
22575
|
-
}
|
|
22576
|
-
},
|
|
22567
|
+
className: "bg-krc-table-header w-full text-xs font-medium text-secondary-500 min-h-10",
|
|
22577
22568
|
onClick: (e) => {
|
|
22578
22569
|
e.stopPropagation();
|
|
22579
22570
|
},
|
|
22580
|
-
|
|
22581
|
-
|
|
22582
|
-
|
|
22583
|
-
|
|
22584
|
-
|
|
22585
|
-
|
|
22586
|
-
|
|
22587
|
-
|
|
22588
|
-
|
|
22589
|
-
|
|
22590
|
-
|
|
22591
|
-
|
|
22571
|
+
children: column.filterable && column.filterKey && /* @__PURE__ */ jsx(Fragment, { children: column.filterComponent?.(filters, updateFilters) || filterComponents?.[column.id]?.(filters, updateFilters) || /* @__PURE__ */ jsx(
|
|
22572
|
+
Input$2,
|
|
22573
|
+
{
|
|
22574
|
+
defaultValue: filters[column.filterKey]?.join(", "),
|
|
22575
|
+
onKeyDown: async (e) => {
|
|
22576
|
+
if (e.key === "Enter" && column.filterKey) {
|
|
22577
|
+
const key = column.filterKey;
|
|
22578
|
+
const value = e.currentTarget.value;
|
|
22579
|
+
if (e) {
|
|
22580
|
+
await updateFilters({ ...filters, [key]: [value] });
|
|
22581
|
+
} else {
|
|
22582
|
+
const newFilters = { ...filters };
|
|
22583
|
+
delete newFilters[key];
|
|
22584
|
+
await updateFilters(newFilters);
|
|
22585
|
+
}
|
|
22586
|
+
}
|
|
22587
|
+
},
|
|
22588
|
+
onClick: (e) => {
|
|
22589
|
+
e.stopPropagation();
|
|
22590
|
+
},
|
|
22591
|
+
onIconRightClick: async (e) => {
|
|
22592
|
+
e.stopPropagation();
|
|
22593
|
+
const key = column.filterKey;
|
|
22594
|
+
if (key) {
|
|
22595
|
+
const newFilters = { ...filters };
|
|
22596
|
+
delete newFilters[key];
|
|
22597
|
+
await updateFilters(newFilters);
|
|
22598
|
+
}
|
|
22599
|
+
},
|
|
22600
|
+
isClearable: true,
|
|
22601
|
+
className: "h-10",
|
|
22602
|
+
iconRightName: filters[column.filterKey] ? "heroicons:x-mark" : ""
|
|
22603
|
+
},
|
|
22604
|
+
filters[column.filterKey]?.join(", ")
|
|
22605
|
+
) })
|
|
22592
22606
|
},
|
|
22593
|
-
filters
|
|
22594
|
-
)
|
|
22607
|
+
Object.keys(filters).join("-")
|
|
22608
|
+
)
|
|
22609
|
+
]
|
|
22610
|
+
},
|
|
22611
|
+
column.id.toString()
|
|
22612
|
+
)) }),
|
|
22613
|
+
currentColumnsCenter.map((column) => /* @__PURE__ */ jsxs(
|
|
22614
|
+
"div",
|
|
22615
|
+
{
|
|
22616
|
+
style: {
|
|
22617
|
+
minWidth: column.initialWidth,
|
|
22618
|
+
maxWidth: !column.grow ? column.initialWidth : void 0
|
|
22595
22619
|
},
|
|
22596
|
-
|
|
22597
|
-
|
|
22598
|
-
|
|
22599
|
-
|
|
22600
|
-
|
|
22601
|
-
|
|
22602
|
-
|
|
22603
|
-
|
|
22604
|
-
|
|
22605
|
-
|
|
22606
|
-
|
|
22607
|
-
|
|
22608
|
-
|
|
22609
|
-
|
|
22610
|
-
|
|
22611
|
-
|
|
22612
|
-
|
|
22613
|
-
|
|
22614
|
-
|
|
22615
|
-
|
|
22616
|
-
|
|
22617
|
-
|
|
22618
|
-
|
|
22619
|
-
|
|
22620
|
-
|
|
22621
|
-
|
|
22622
|
-
|
|
22623
|
-
|
|
22624
|
-
|
|
22625
|
-
column.sortKey && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
|
|
22626
|
-
Icon,
|
|
22627
|
-
{
|
|
22628
|
-
className: "h-4 w-4",
|
|
22629
|
-
name: column.sorting ? {
|
|
22630
|
-
"+": "heroicons:chevron-down-16-solid",
|
|
22631
|
-
"-": "heroicons:chevron-up-16-solid"
|
|
22632
|
-
}[column.sorting] : "heroicons:chevron-up-down-16-solid"
|
|
22633
|
-
}
|
|
22634
|
-
) })
|
|
22635
|
-
] }),
|
|
22636
|
-
hasFilters && /* @__PURE__ */ jsx(
|
|
22637
|
-
"div",
|
|
22638
|
-
{
|
|
22639
|
-
className: "bg-krc-table-header text-xs font-medium w-full text-secondary-500 min-h-10",
|
|
22640
|
-
onClick: (e) => {
|
|
22641
|
-
e.stopPropagation();
|
|
22642
|
-
},
|
|
22643
|
-
children: column.filterable && column.filterKey && /* @__PURE__ */ jsx(Fragment, { children: column.filterComponent?.(filters, updateFilters) || filterComponents?.[column.id]?.(filters, updateFilters) || /* @__PURE__ */ jsx(
|
|
22644
|
-
Input$2,
|
|
22620
|
+
className: [
|
|
22621
|
+
headerClasses,
|
|
22622
|
+
hasFilters ? "h-24" : "h-12",
|
|
22623
|
+
column.sortKey ? "cursor-pointer" : "",
|
|
22624
|
+
column.grow ? "grow" : ""
|
|
22625
|
+
].join(" "),
|
|
22626
|
+
onClick: () => {
|
|
22627
|
+
return column.sortKey && onSort(
|
|
22628
|
+
Object.assign({}, column, {
|
|
22629
|
+
sorting: column.sorting ? { "+": "-", "-": void 0 }[column.sorting] : "+"
|
|
22630
|
+
})
|
|
22631
|
+
);
|
|
22632
|
+
},
|
|
22633
|
+
children: [
|
|
22634
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center gap-2 w-full justify-between", children: [
|
|
22635
|
+
/* @__PURE__ */ jsx("span", { children: column.title }),
|
|
22636
|
+
column.sortKey && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
|
|
22637
|
+
Icon,
|
|
22638
|
+
{
|
|
22639
|
+
className: "h-4 w-4",
|
|
22640
|
+
name: column.sorting ? {
|
|
22641
|
+
"+": "heroicons:chevron-down-16-solid",
|
|
22642
|
+
"-": "heroicons:chevron-up-16-solid"
|
|
22643
|
+
}[column.sorting] : "heroicons:chevron-up-down-16-solid"
|
|
22644
|
+
}
|
|
22645
|
+
) })
|
|
22646
|
+
] }),
|
|
22647
|
+
hasFilters && /* @__PURE__ */ jsx(
|
|
22648
|
+
"div",
|
|
22645
22649
|
{
|
|
22646
|
-
|
|
22647
|
-
onKeyDown: async (e) => {
|
|
22648
|
-
if (e.key === "Enter" && column.filterKey) {
|
|
22649
|
-
const key = column.filterKey;
|
|
22650
|
-
const value = e.currentTarget.value;
|
|
22651
|
-
if (e) {
|
|
22652
|
-
await updateFilters({ ...filters, [key]: [value] });
|
|
22653
|
-
} else {
|
|
22654
|
-
const newFilters = { ...filters };
|
|
22655
|
-
delete newFilters[key];
|
|
22656
|
-
await updateFilters(newFilters);
|
|
22657
|
-
}
|
|
22658
|
-
}
|
|
22659
|
-
},
|
|
22650
|
+
className: "bg-krc-table-header text-xs font-medium w-full text-secondary-500 min-h-10",
|
|
22660
22651
|
onClick: (e) => {
|
|
22661
22652
|
e.stopPropagation();
|
|
22662
22653
|
},
|
|
22663
|
-
|
|
22664
|
-
|
|
22665
|
-
|
|
22666
|
-
|
|
22667
|
-
|
|
22668
|
-
|
|
22669
|
-
|
|
22670
|
-
|
|
22671
|
-
|
|
22672
|
-
|
|
22673
|
-
|
|
22674
|
-
|
|
22654
|
+
children: column.filterable && column.filterKey && /* @__PURE__ */ jsx(Fragment, { children: column.filterComponent?.(filters, updateFilters) || filterComponents?.[column.id]?.(filters, updateFilters) || /* @__PURE__ */ jsx(
|
|
22655
|
+
Input$2,
|
|
22656
|
+
{
|
|
22657
|
+
defaultValue: filters[column.filterKey]?.join(", "),
|
|
22658
|
+
onKeyDown: async (e) => {
|
|
22659
|
+
if (e.key === "Enter" && column.filterKey) {
|
|
22660
|
+
const key = column.filterKey;
|
|
22661
|
+
const value = e.currentTarget.value;
|
|
22662
|
+
if (e) {
|
|
22663
|
+
await updateFilters({ ...filters, [key]: [value] });
|
|
22664
|
+
} else {
|
|
22665
|
+
const newFilters = { ...filters };
|
|
22666
|
+
delete newFilters[key];
|
|
22667
|
+
await updateFilters(newFilters);
|
|
22668
|
+
}
|
|
22669
|
+
}
|
|
22670
|
+
},
|
|
22671
|
+
onClick: (e) => {
|
|
22672
|
+
e.stopPropagation();
|
|
22673
|
+
},
|
|
22674
|
+
onIconRightClick: async (e) => {
|
|
22675
|
+
e.stopPropagation();
|
|
22676
|
+
const key = column.filterKey;
|
|
22677
|
+
if (key) {
|
|
22678
|
+
const newFilters = { ...filters };
|
|
22679
|
+
delete newFilters[key];
|
|
22680
|
+
await updateFilters(newFilters);
|
|
22681
|
+
}
|
|
22682
|
+
},
|
|
22683
|
+
isClearable: true,
|
|
22684
|
+
className: "h-10",
|
|
22685
|
+
iconRightName: filters[column.filterKey] ? "heroicons:x-mark" : ""
|
|
22686
|
+
},
|
|
22687
|
+
filters[column.filterKey]?.join(", ")
|
|
22688
|
+
) })
|
|
22675
22689
|
},
|
|
22676
|
-
filters
|
|
22677
|
-
)
|
|
22690
|
+
Object.keys(filters).join("-")
|
|
22691
|
+
)
|
|
22692
|
+
]
|
|
22693
|
+
},
|
|
22694
|
+
column.id.toString()
|
|
22695
|
+
)),
|
|
22696
|
+
!!currentColumnsRight.length && /* @__PURE__ */ jsx("div", { className: "sticky right-0 flex flex-row h-full items-center", children: currentColumnsRight.map((column) => /* @__PURE__ */ jsx(
|
|
22697
|
+
"div",
|
|
22698
|
+
{
|
|
22699
|
+
style: {
|
|
22700
|
+
minWidth: column.initialWidth,
|
|
22701
|
+
maxWidth: !column.grow ? column.initialWidth : void 0
|
|
22678
22702
|
},
|
|
22679
|
-
|
|
22680
|
-
|
|
22681
|
-
|
|
22682
|
-
|
|
22683
|
-
|
|
22684
|
-
|
|
22685
|
-
|
|
22686
|
-
|
|
22687
|
-
|
|
22688
|
-
style: {
|
|
22689
|
-
minWidth: column.initialWidth,
|
|
22690
|
-
maxWidth: !column.grow ? column.initialWidth : void 0
|
|
22691
|
-
},
|
|
22692
|
-
className: "flex h-full flex-row items-start justify-end truncate bg-krc-table-header px-4 py-3 text-xs font-medium last:rounded-tr-krc-table",
|
|
22693
|
-
children: column.title
|
|
22694
|
-
},
|
|
22695
|
-
column.id.toString()
|
|
22696
|
-
)) })
|
|
22697
|
-
] }),
|
|
22703
|
+
className: "flex h-full flex-row items-start justify-end truncate bg-krc-table-header px-4 py-3 text-xs font-medium last:rounded-tr-krc-table",
|
|
22704
|
+
children: column.title
|
|
22705
|
+
},
|
|
22706
|
+
column.id.toString()
|
|
22707
|
+
)) })
|
|
22708
|
+
]
|
|
22709
|
+
},
|
|
22710
|
+
locale
|
|
22711
|
+
),
|
|
22698
22712
|
allowReorder ? /* @__PURE__ */ jsx(DndProvider, { backend: HTML5Backend, debugMode: true, children: data.map((entry, i) => {
|
|
22699
22713
|
return /* @__PURE__ */ jsx(
|
|
22700
22714
|
Row,
|
|
@@ -23162,5 +23176,5 @@ function Tabs({
|
|
|
23162
23176
|
)) });
|
|
23163
23177
|
}
|
|
23164
23178
|
|
|
23165
|
-
export { Button, Checkbox, CheckboxList, ColumnChooser, ColumnChooserEntry, ErrorContext, FilterContext, Form, FormField, Icon, Input$2 as Input, LoadingIndicator, Modal, Pagination, PhoneInput, RadioButtonGroup, Select, Table, TableActionEntry, TableActions, Tabs, Tag, TagList, Textarea as TextArea, validators };
|
|
23179
|
+
export { Button, Checkbox, CheckboxList, ColumnChooser, ColumnChooserEntry, ComponentsWrapper, ErrorContext, FilterContext, Form, FormField, Icon, Input$2 as Input, LoadingIndicator, Modal, Pagination, PhoneInput, RadioButtonGroup, Select, Table, TableActionEntry, TableActions, Tabs, Tag, TagList, Textarea as TextArea, validators };
|
|
23166
23180
|
//# sourceMappingURL=react-components.js.map
|