shadcn-zod-formkit 1.24.0 → 1.26.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/index.cjs +599 -7
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.mts +292 -14
- package/dist/index.d.ts +292 -14
- package/dist/index.mjs +535 -12
- package/dist/index.mjs.map +1 -1
- package/dist/shadcn-zod-formkit-1.26.0.tgz +0 -0
- package/package.json +1 -1
- package/dist/shadcn-zod-formkit-1.24.0.tgz +0 -0
package/dist/index.mjs
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CheckIcon, XIcon, MinusIcon, GripVerticalIcon, ChevronUpIcon,
|
|
1
|
+
import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, CheckIcon, XIcon, MinusIcon, CircleIcon, GripVerticalIcon, ChevronUpIcon, SearchIcon, ChevronsUpDown, Check, CalendarIcon, EyeOff, Eye, Upload, Trash2, Plus, Info, GripVertical, Loader2, Save, Pencil, Search, MessageCircleWarning, CircleCheck, CircleX } from 'lucide-react';
|
|
2
2
|
import { InfoCircledIcon } from '@radix-ui/react-icons';
|
|
3
3
|
import { cva } from 'class-variance-authority';
|
|
4
4
|
import { twMerge } from 'tailwind-merge';
|
|
5
5
|
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
6
6
|
import * as React3 from 'react';
|
|
7
|
-
import React3__default, { useState, useEffect,
|
|
8
|
-
import { FormProvider, Controller, useFormContext, useFormState,
|
|
7
|
+
import React3__default, { useMemo, useState, useEffect, useRef, useTransition } from 'react';
|
|
8
|
+
import { FormProvider, Controller, useFormContext, useFormState, useFieldArray, useForm } from 'react-hook-form';
|
|
9
9
|
import * as AccordionPrimitive from '@radix-ui/react-accordion';
|
|
10
10
|
import { Slot } from '@radix-ui/react-slot';
|
|
11
11
|
import { getDefaultClassNames, DayPicker } from 'react-day-picker';
|
|
@@ -29,7 +29,7 @@ import { Command as Command$1 } from 'cmdk';
|
|
|
29
29
|
import * as TabsPrimitive from '@radix-ui/react-tabs';
|
|
30
30
|
import * as SliderPrimitive from '@radix-ui/react-slider';
|
|
31
31
|
import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCenter } from '@dnd-kit/core';
|
|
32
|
-
import { sortableKeyboardCoordinates, SortableContext, verticalListSortingStrategy,
|
|
32
|
+
import { sortableKeyboardCoordinates, SortableContext, verticalListSortingStrategy, useSortable, arrayMove } from '@dnd-kit/sortable';
|
|
33
33
|
import { CSS } from '@dnd-kit/utilities';
|
|
34
34
|
import z2 from 'zod';
|
|
35
35
|
import { zodResolver } from '@hookform/resolvers/zod';
|
|
@@ -256,9 +256,11 @@ var InputTypes = /* @__PURE__ */ ((InputTypes2) => {
|
|
|
256
256
|
InputTypes2["COMBOBOX"] = "COMBO_BOX";
|
|
257
257
|
InputTypes2["SORTABLE_LIST"] = "sortable_list";
|
|
258
258
|
InputTypes2["REPEATER_TABS"] = "repeater_tabs";
|
|
259
|
+
InputTypes2["STRING_LIST"] = "string_list";
|
|
259
260
|
return InputTypes2;
|
|
260
261
|
})(InputTypes || {});
|
|
261
262
|
var inputFieldComp = [
|
|
263
|
+
"string_list" /* STRING_LIST */,
|
|
262
264
|
"repeater_tabs" /* REPEATER_TABS */,
|
|
263
265
|
"sortable_list" /* SORTABLE_LIST */,
|
|
264
266
|
"COMBO_BOX" /* COMBOBOX */,
|
|
@@ -929,7 +931,54 @@ function Separator({
|
|
|
929
931
|
}
|
|
930
932
|
);
|
|
931
933
|
}
|
|
932
|
-
|
|
934
|
+
function FieldSet({ className, ...props }) {
|
|
935
|
+
return /* @__PURE__ */ jsx(
|
|
936
|
+
"fieldset",
|
|
937
|
+
{
|
|
938
|
+
"data-slot": "field-set",
|
|
939
|
+
className: cn(
|
|
940
|
+
"flex flex-col gap-6",
|
|
941
|
+
"has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
|
|
942
|
+
className
|
|
943
|
+
),
|
|
944
|
+
...props
|
|
945
|
+
}
|
|
946
|
+
);
|
|
947
|
+
}
|
|
948
|
+
function FieldLegend({
|
|
949
|
+
className,
|
|
950
|
+
variant = "legend",
|
|
951
|
+
...props
|
|
952
|
+
}) {
|
|
953
|
+
return /* @__PURE__ */ jsx(
|
|
954
|
+
"legend",
|
|
955
|
+
{
|
|
956
|
+
"data-slot": "field-legend",
|
|
957
|
+
"data-variant": variant,
|
|
958
|
+
className: cn(
|
|
959
|
+
"mb-3 font-medium",
|
|
960
|
+
"data-[variant=legend]:text-base",
|
|
961
|
+
"data-[variant=label]:text-sm",
|
|
962
|
+
className
|
|
963
|
+
),
|
|
964
|
+
...props
|
|
965
|
+
}
|
|
966
|
+
);
|
|
967
|
+
}
|
|
968
|
+
function FieldGroup({ className, ...props }) {
|
|
969
|
+
return /* @__PURE__ */ jsx(
|
|
970
|
+
"div",
|
|
971
|
+
{
|
|
972
|
+
"data-slot": "field-group",
|
|
973
|
+
className: cn(
|
|
974
|
+
"group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
|
|
975
|
+
className
|
|
976
|
+
),
|
|
977
|
+
...props
|
|
978
|
+
}
|
|
979
|
+
);
|
|
980
|
+
}
|
|
981
|
+
var fieldVariants = cva(
|
|
933
982
|
"group/field flex w-full gap-3 data-[invalid=true]:text-destructive",
|
|
934
983
|
{
|
|
935
984
|
variants: {
|
|
@@ -952,6 +1001,147 @@ cva(
|
|
|
952
1001
|
}
|
|
953
1002
|
}
|
|
954
1003
|
);
|
|
1004
|
+
function Field({
|
|
1005
|
+
className,
|
|
1006
|
+
orientation = "vertical",
|
|
1007
|
+
...props
|
|
1008
|
+
}) {
|
|
1009
|
+
return /* @__PURE__ */ jsx(
|
|
1010
|
+
"div",
|
|
1011
|
+
{
|
|
1012
|
+
role: "group",
|
|
1013
|
+
"data-slot": "field",
|
|
1014
|
+
"data-orientation": orientation,
|
|
1015
|
+
className: cn(fieldVariants({ orientation }), className),
|
|
1016
|
+
...props
|
|
1017
|
+
}
|
|
1018
|
+
);
|
|
1019
|
+
}
|
|
1020
|
+
function FieldContent({ className, ...props }) {
|
|
1021
|
+
return /* @__PURE__ */ jsx(
|
|
1022
|
+
"div",
|
|
1023
|
+
{
|
|
1024
|
+
"data-slot": "field-content",
|
|
1025
|
+
className: cn(
|
|
1026
|
+
"group/field-content flex flex-1 flex-col gap-1.5 leading-snug",
|
|
1027
|
+
className
|
|
1028
|
+
),
|
|
1029
|
+
...props
|
|
1030
|
+
}
|
|
1031
|
+
);
|
|
1032
|
+
}
|
|
1033
|
+
function FieldLabel({
|
|
1034
|
+
className,
|
|
1035
|
+
...props
|
|
1036
|
+
}) {
|
|
1037
|
+
return /* @__PURE__ */ jsx(
|
|
1038
|
+
Label,
|
|
1039
|
+
{
|
|
1040
|
+
"data-slot": "field-label",
|
|
1041
|
+
className: cn(
|
|
1042
|
+
"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
|
|
1043
|
+
"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4",
|
|
1044
|
+
"has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10",
|
|
1045
|
+
className
|
|
1046
|
+
),
|
|
1047
|
+
...props
|
|
1048
|
+
}
|
|
1049
|
+
);
|
|
1050
|
+
}
|
|
1051
|
+
function FieldTitle({ className, ...props }) {
|
|
1052
|
+
return /* @__PURE__ */ jsx(
|
|
1053
|
+
"div",
|
|
1054
|
+
{
|
|
1055
|
+
"data-slot": "field-label",
|
|
1056
|
+
className: cn(
|
|
1057
|
+
"flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
|
|
1058
|
+
className
|
|
1059
|
+
),
|
|
1060
|
+
...props
|
|
1061
|
+
}
|
|
1062
|
+
);
|
|
1063
|
+
}
|
|
1064
|
+
function FieldDescription({ className, ...props }) {
|
|
1065
|
+
return /* @__PURE__ */ jsx(
|
|
1066
|
+
"p",
|
|
1067
|
+
{
|
|
1068
|
+
"data-slot": "field-description",
|
|
1069
|
+
className: cn(
|
|
1070
|
+
"text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance",
|
|
1071
|
+
"last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5",
|
|
1072
|
+
"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
|
|
1073
|
+
className
|
|
1074
|
+
),
|
|
1075
|
+
...props
|
|
1076
|
+
}
|
|
1077
|
+
);
|
|
1078
|
+
}
|
|
1079
|
+
function FieldSeparator({
|
|
1080
|
+
children,
|
|
1081
|
+
className,
|
|
1082
|
+
...props
|
|
1083
|
+
}) {
|
|
1084
|
+
return /* @__PURE__ */ jsxs(
|
|
1085
|
+
"div",
|
|
1086
|
+
{
|
|
1087
|
+
"data-slot": "field-separator",
|
|
1088
|
+
"data-content": !!children,
|
|
1089
|
+
className: cn(
|
|
1090
|
+
"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
|
|
1091
|
+
className
|
|
1092
|
+
),
|
|
1093
|
+
...props,
|
|
1094
|
+
children: [
|
|
1095
|
+
/* @__PURE__ */ jsx(Separator, { className: "absolute inset-0 top-1/2" }),
|
|
1096
|
+
children && /* @__PURE__ */ jsx(
|
|
1097
|
+
"span",
|
|
1098
|
+
{
|
|
1099
|
+
className: "bg-background text-muted-foreground relative mx-auto block w-fit px-2",
|
|
1100
|
+
"data-slot": "field-separator-content",
|
|
1101
|
+
children
|
|
1102
|
+
}
|
|
1103
|
+
)
|
|
1104
|
+
]
|
|
1105
|
+
}
|
|
1106
|
+
);
|
|
1107
|
+
}
|
|
1108
|
+
function FieldError({
|
|
1109
|
+
className,
|
|
1110
|
+
children,
|
|
1111
|
+
errors,
|
|
1112
|
+
...props
|
|
1113
|
+
}) {
|
|
1114
|
+
const content = useMemo(() => {
|
|
1115
|
+
if (children) {
|
|
1116
|
+
return children;
|
|
1117
|
+
}
|
|
1118
|
+
if (!errors?.length) {
|
|
1119
|
+
return null;
|
|
1120
|
+
}
|
|
1121
|
+
const uniqueErrors = [
|
|
1122
|
+
...new Map(errors.map((error) => [error?.message, error])).values()
|
|
1123
|
+
];
|
|
1124
|
+
if (uniqueErrors?.length == 1) {
|
|
1125
|
+
return uniqueErrors[0]?.message;
|
|
1126
|
+
}
|
|
1127
|
+
return /* @__PURE__ */ jsx("ul", { className: "ml-4 flex list-disc flex-col gap-1", children: uniqueErrors.map(
|
|
1128
|
+
(error, index) => error?.message && /* @__PURE__ */ jsx("li", { children: error.message }, index)
|
|
1129
|
+
) });
|
|
1130
|
+
}, [children, errors]);
|
|
1131
|
+
if (!content) {
|
|
1132
|
+
return null;
|
|
1133
|
+
}
|
|
1134
|
+
return /* @__PURE__ */ jsx(
|
|
1135
|
+
"div",
|
|
1136
|
+
{
|
|
1137
|
+
role: "alert",
|
|
1138
|
+
"data-slot": "field-error",
|
|
1139
|
+
className: cn("text-destructive text-sm font-normal", className),
|
|
1140
|
+
...props,
|
|
1141
|
+
children: content
|
|
1142
|
+
}
|
|
1143
|
+
);
|
|
1144
|
+
}
|
|
955
1145
|
var Form = FormProvider;
|
|
956
1146
|
var FormFieldContext = React3.createContext(
|
|
957
1147
|
{}
|
|
@@ -1143,7 +1333,7 @@ function InputGroupAddon({
|
|
|
1143
1333
|
}
|
|
1144
1334
|
);
|
|
1145
1335
|
}
|
|
1146
|
-
cva(
|
|
1336
|
+
var inputGroupButtonVariants = cva(
|
|
1147
1337
|
"text-sm shadow-none flex gap-2 items-center",
|
|
1148
1338
|
{
|
|
1149
1339
|
variants: {
|
|
@@ -1159,6 +1349,24 @@ cva(
|
|
|
1159
1349
|
}
|
|
1160
1350
|
}
|
|
1161
1351
|
);
|
|
1352
|
+
function InputGroupButton({
|
|
1353
|
+
className,
|
|
1354
|
+
type = "button",
|
|
1355
|
+
variant = "ghost",
|
|
1356
|
+
size = "xs",
|
|
1357
|
+
...props
|
|
1358
|
+
}) {
|
|
1359
|
+
return /* @__PURE__ */ jsx(
|
|
1360
|
+
Button,
|
|
1361
|
+
{
|
|
1362
|
+
type,
|
|
1363
|
+
"data-size": size,
|
|
1364
|
+
variant,
|
|
1365
|
+
className: cn(inputGroupButtonVariants({ size }), className),
|
|
1366
|
+
...props
|
|
1367
|
+
}
|
|
1368
|
+
);
|
|
1369
|
+
}
|
|
1162
1370
|
function InputGroupText({ className, ...props }) {
|
|
1163
1371
|
return /* @__PURE__ */ jsx(
|
|
1164
1372
|
"span",
|
|
@@ -1187,6 +1395,22 @@ function InputGroupInput({
|
|
|
1187
1395
|
}
|
|
1188
1396
|
);
|
|
1189
1397
|
}
|
|
1398
|
+
function InputGroupTextarea({
|
|
1399
|
+
className,
|
|
1400
|
+
...props
|
|
1401
|
+
}) {
|
|
1402
|
+
return /* @__PURE__ */ jsx(
|
|
1403
|
+
Textarea,
|
|
1404
|
+
{
|
|
1405
|
+
"data-slot": "input-group-control",
|
|
1406
|
+
className: cn(
|
|
1407
|
+
"flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",
|
|
1408
|
+
className
|
|
1409
|
+
),
|
|
1410
|
+
...props
|
|
1411
|
+
}
|
|
1412
|
+
);
|
|
1413
|
+
}
|
|
1190
1414
|
function InputOTP({
|
|
1191
1415
|
className,
|
|
1192
1416
|
containerClassName,
|
|
@@ -1785,6 +2009,41 @@ function ButtonGroup({
|
|
|
1785
2009
|
}
|
|
1786
2010
|
);
|
|
1787
2011
|
}
|
|
2012
|
+
function ButtonGroupText({
|
|
2013
|
+
className,
|
|
2014
|
+
asChild = false,
|
|
2015
|
+
...props
|
|
2016
|
+
}) {
|
|
2017
|
+
const Comp = asChild ? Slot : "div";
|
|
2018
|
+
return /* @__PURE__ */ jsx(
|
|
2019
|
+
Comp,
|
|
2020
|
+
{
|
|
2021
|
+
className: cn(
|
|
2022
|
+
"bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
|
|
2023
|
+
className
|
|
2024
|
+
),
|
|
2025
|
+
...props
|
|
2026
|
+
}
|
|
2027
|
+
);
|
|
2028
|
+
}
|
|
2029
|
+
function ButtonGroupSeparator({
|
|
2030
|
+
className,
|
|
2031
|
+
orientation = "vertical",
|
|
2032
|
+
...props
|
|
2033
|
+
}) {
|
|
2034
|
+
return /* @__PURE__ */ jsx(
|
|
2035
|
+
Separator,
|
|
2036
|
+
{
|
|
2037
|
+
"data-slot": "button-group-separator",
|
|
2038
|
+
orientation,
|
|
2039
|
+
className: cn(
|
|
2040
|
+
"bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto",
|
|
2041
|
+
className
|
|
2042
|
+
),
|
|
2043
|
+
...props
|
|
2044
|
+
}
|
|
2045
|
+
);
|
|
2046
|
+
}
|
|
1788
2047
|
var ButtonGroupInput = class extends BaseInput {
|
|
1789
2048
|
render() {
|
|
1790
2049
|
const { input, form, isSubmitting } = this;
|
|
@@ -1812,7 +2071,7 @@ var FieldButtonGroup = ({ input, form, isSubmitting, className = "w-full flex-1"
|
|
|
1812
2071
|
disabled: isSubmitting,
|
|
1813
2072
|
children: option.label ?? option.name
|
|
1814
2073
|
},
|
|
1815
|
-
key
|
|
2074
|
+
`${input.name}-${key}-btn-g`
|
|
1816
2075
|
)) });
|
|
1817
2076
|
};
|
|
1818
2077
|
var CheckListInput = class extends BaseInput {
|
|
@@ -1988,6 +2247,29 @@ function Command({
|
|
|
1988
2247
|
}
|
|
1989
2248
|
);
|
|
1990
2249
|
}
|
|
2250
|
+
function CommandDialog({
|
|
2251
|
+
title = "Command Palette",
|
|
2252
|
+
description = "Search for a command to run...",
|
|
2253
|
+
children,
|
|
2254
|
+
className,
|
|
2255
|
+
showCloseButton = true,
|
|
2256
|
+
...props
|
|
2257
|
+
}) {
|
|
2258
|
+
return /* @__PURE__ */ jsxs(Dialog, { ...props, children: [
|
|
2259
|
+
/* @__PURE__ */ jsxs(DialogHeader, { className: "sr-only", children: [
|
|
2260
|
+
/* @__PURE__ */ jsx(DialogTitle, { children: title }),
|
|
2261
|
+
/* @__PURE__ */ jsx(DialogDescription, { children: description })
|
|
2262
|
+
] }),
|
|
2263
|
+
/* @__PURE__ */ jsx(
|
|
2264
|
+
DialogContent,
|
|
2265
|
+
{
|
|
2266
|
+
className: cn("overflow-hidden p-0", className),
|
|
2267
|
+
showCloseButton,
|
|
2268
|
+
children: /* @__PURE__ */ jsx(Command, { className: "[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children })
|
|
2269
|
+
}
|
|
2270
|
+
)
|
|
2271
|
+
] });
|
|
2272
|
+
}
|
|
1991
2273
|
function CommandInput({
|
|
1992
2274
|
className,
|
|
1993
2275
|
...props
|
|
@@ -2058,6 +2340,19 @@ function CommandGroup({
|
|
|
2058
2340
|
}
|
|
2059
2341
|
);
|
|
2060
2342
|
}
|
|
2343
|
+
function CommandSeparator({
|
|
2344
|
+
className,
|
|
2345
|
+
...props
|
|
2346
|
+
}) {
|
|
2347
|
+
return /* @__PURE__ */ jsx(
|
|
2348
|
+
Command$1.Separator,
|
|
2349
|
+
{
|
|
2350
|
+
"data-slot": "command-separator",
|
|
2351
|
+
className: cn("bg-border -mx-1 h-px", className),
|
|
2352
|
+
...props
|
|
2353
|
+
}
|
|
2354
|
+
);
|
|
2355
|
+
}
|
|
2061
2356
|
function CommandItem({
|
|
2062
2357
|
className,
|
|
2063
2358
|
...props
|
|
@@ -2074,6 +2369,22 @@ function CommandItem({
|
|
|
2074
2369
|
}
|
|
2075
2370
|
);
|
|
2076
2371
|
}
|
|
2372
|
+
function CommandShortcut({
|
|
2373
|
+
className,
|
|
2374
|
+
...props
|
|
2375
|
+
}) {
|
|
2376
|
+
return /* @__PURE__ */ jsx(
|
|
2377
|
+
"span",
|
|
2378
|
+
{
|
|
2379
|
+
"data-slot": "command-shortcut",
|
|
2380
|
+
className: cn(
|
|
2381
|
+
"text-muted-foreground ml-auto text-xs tracking-widest",
|
|
2382
|
+
className
|
|
2383
|
+
),
|
|
2384
|
+
...props
|
|
2385
|
+
}
|
|
2386
|
+
);
|
|
2387
|
+
}
|
|
2077
2388
|
var ComboboxInput = class extends BaseInput {
|
|
2078
2389
|
render() {
|
|
2079
2390
|
const { input, form, isSubmitting } = this;
|
|
@@ -4182,7 +4493,7 @@ var FieldKeyValueList = ({ form, input, isSubmitting }) => {
|
|
|
4182
4493
|
return /* @__PURE__ */ jsxs(FormItem, { className: input.className, children: [
|
|
4183
4494
|
/* @__PURE__ */ jsx(FormLabel, { children: /* @__PURE__ */ jsx("b", { children: input.label }) }),
|
|
4184
4495
|
/* @__PURE__ */ jsx(FormMessage, {}),
|
|
4185
|
-
/* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3
|
|
4496
|
+
/* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 rounded-xl p-3 ", children: [
|
|
4186
4497
|
pairs.length === 0 && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "No pairs have been added yet." }),
|
|
4187
4498
|
pairs.map((pair, index) => /* @__PURE__ */ jsxs(
|
|
4188
4499
|
"div",
|
|
@@ -4292,7 +4603,7 @@ var FieldMultiSelect = ({ form, input, isSubmitting }) => {
|
|
|
4292
4603
|
const option = lista.find(
|
|
4293
4604
|
(item) => getValue(item).toString() === val
|
|
4294
4605
|
);
|
|
4295
|
-
return /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: option?.name ?? val }, val);
|
|
4606
|
+
return /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: option?.name ?? val }, `${input.name}-${val}-ms`);
|
|
4296
4607
|
}) }) : /* @__PURE__ */ jsx("span", { children: input.placeHolder ?? "Selecciona..." }),
|
|
4297
4608
|
/* @__PURE__ */ jsx(ChevronsUpDown, { className: "ml-2 h-4 w-4 opacity-50" })
|
|
4298
4609
|
]
|
|
@@ -4325,7 +4636,7 @@ var FieldMultiSelect = ({ form, input, isSubmitting }) => {
|
|
|
4325
4636
|
item.name
|
|
4326
4637
|
]
|
|
4327
4638
|
},
|
|
4328
|
-
value
|
|
4639
|
+
`${value}-ms`
|
|
4329
4640
|
);
|
|
4330
4641
|
}) })
|
|
4331
4642
|
] })
|
|
@@ -4863,7 +5174,7 @@ var FieldSelect = ({ form, input, isSubmitting }) => {
|
|
|
4863
5174
|
}
|
|
4864
5175
|
) }) }),
|
|
4865
5176
|
/* @__PURE__ */ jsxs(SelectContent, { children: [
|
|
4866
|
-
lista.map((item) => /* @__PURE__ */ jsx(SelectItem, { value: getValue(item), children: item.name }, item.id)),
|
|
5177
|
+
lista.map((item) => /* @__PURE__ */ jsx(SelectItem, { value: getValue(item), children: item.name }, `${input.name}-${item.id}-s`)),
|
|
4867
5178
|
lista.length === 0 && !loading && /* @__PURE__ */ jsx("div", { className: "p-2 text-sm text-muted-foreground", children: "No hay opciones disponibles" })
|
|
4868
5179
|
] })
|
|
4869
5180
|
]
|
|
@@ -5160,6 +5471,102 @@ function SortableWrapper({
|
|
|
5160
5471
|
}
|
|
5161
5472
|
);
|
|
5162
5473
|
}
|
|
5474
|
+
var StringValueListInput = class extends BaseInput {
|
|
5475
|
+
render() {
|
|
5476
|
+
const { input, form, isSubmitting } = this;
|
|
5477
|
+
return /* @__PURE__ */ jsx(
|
|
5478
|
+
FieldStringValueList,
|
|
5479
|
+
{
|
|
5480
|
+
input,
|
|
5481
|
+
form,
|
|
5482
|
+
isSubmitting
|
|
5483
|
+
}
|
|
5484
|
+
);
|
|
5485
|
+
}
|
|
5486
|
+
};
|
|
5487
|
+
var FieldStringValueList = ({ form, input, isSubmitting }) => {
|
|
5488
|
+
const fieldName = input.name;
|
|
5489
|
+
useEffect(() => {
|
|
5490
|
+
const current = form.getValues(fieldName);
|
|
5491
|
+
if (!Array.isArray(current)) {
|
|
5492
|
+
form.setValue(fieldName, []);
|
|
5493
|
+
}
|
|
5494
|
+
}, [form, fieldName]);
|
|
5495
|
+
const handleAddItem = () => {
|
|
5496
|
+
const current = form.getValues(fieldName) || [];
|
|
5497
|
+
form.setValue(fieldName, [...current, ""]);
|
|
5498
|
+
};
|
|
5499
|
+
const handleRemoveItem = (index) => {
|
|
5500
|
+
const current = form.getValues(fieldName) || [];
|
|
5501
|
+
const updated = current.filter((_, i) => i !== index);
|
|
5502
|
+
form.setValue(fieldName, updated);
|
|
5503
|
+
};
|
|
5504
|
+
const handleChange = (index, newValue) => {
|
|
5505
|
+
const current = form.getValues(fieldName) || [];
|
|
5506
|
+
const updated = current.map(
|
|
5507
|
+
(item, i) => i === index ? newValue : item
|
|
5508
|
+
);
|
|
5509
|
+
form.setValue(fieldName, updated);
|
|
5510
|
+
};
|
|
5511
|
+
return /* @__PURE__ */ jsx(
|
|
5512
|
+
FormField,
|
|
5513
|
+
{
|
|
5514
|
+
control: form.control,
|
|
5515
|
+
name: fieldName,
|
|
5516
|
+
render: () => {
|
|
5517
|
+
const items = form.watch(fieldName) || [];
|
|
5518
|
+
return /* @__PURE__ */ jsxs(FormItem, { className: input.className, children: [
|
|
5519
|
+
/* @__PURE__ */ jsx(FormLabel, { children: /* @__PURE__ */ jsx("b", { children: input.label }) }),
|
|
5520
|
+
/* @__PURE__ */ jsx(FormMessage, {}),
|
|
5521
|
+
/* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 rounded-xl ", children: [
|
|
5522
|
+
items.length === 0 && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "No items have been added yet." }),
|
|
5523
|
+
items.map((value, index) => /* @__PURE__ */ jsxs(
|
|
5524
|
+
"div",
|
|
5525
|
+
{
|
|
5526
|
+
className: "flex gap-2 items-center",
|
|
5527
|
+
children: [
|
|
5528
|
+
/* @__PURE__ */ jsx(
|
|
5529
|
+
Input,
|
|
5530
|
+
{
|
|
5531
|
+
placeholder: `Item ${index + 1}`,
|
|
5532
|
+
value,
|
|
5533
|
+
disabled: isSubmitting,
|
|
5534
|
+
onChange: (e) => handleChange(index, e.target.value)
|
|
5535
|
+
}
|
|
5536
|
+
),
|
|
5537
|
+
input.isRemovebleOption && /* @__PURE__ */ jsx(
|
|
5538
|
+
Button,
|
|
5539
|
+
{
|
|
5540
|
+
type: "button",
|
|
5541
|
+
variant: "destructive",
|
|
5542
|
+
size: "icon",
|
|
5543
|
+
onClick: () => handleRemoveItem(index),
|
|
5544
|
+
disabled: isSubmitting,
|
|
5545
|
+
children: /* @__PURE__ */ jsx(Trash2, { size: 18 })
|
|
5546
|
+
}
|
|
5547
|
+
)
|
|
5548
|
+
]
|
|
5549
|
+
},
|
|
5550
|
+
index
|
|
5551
|
+
)),
|
|
5552
|
+
/* @__PURE__ */ jsx("div", { className: "flex justify-end mt-2", children: /* @__PURE__ */ jsx(
|
|
5553
|
+
Button,
|
|
5554
|
+
{
|
|
5555
|
+
type: "button",
|
|
5556
|
+
variant: "outline",
|
|
5557
|
+
size: "sm",
|
|
5558
|
+
onClick: handleAddItem,
|
|
5559
|
+
disabled: isSubmitting,
|
|
5560
|
+
children: /* @__PURE__ */ jsx(Plus, { size: 18, className: "mr-1" })
|
|
5561
|
+
}
|
|
5562
|
+
) })
|
|
5563
|
+
] }) }),
|
|
5564
|
+
input.description && /* @__PURE__ */ jsx(FormDescription, { children: input.description })
|
|
5565
|
+
] });
|
|
5566
|
+
}
|
|
5567
|
+
}
|
|
5568
|
+
);
|
|
5569
|
+
};
|
|
5163
5570
|
var SwitchInput = class extends BaseInput {
|
|
5164
5571
|
render() {
|
|
5165
5572
|
const { input, form, isSubmitting } = this;
|
|
@@ -5471,6 +5878,7 @@ var inputMap = {
|
|
|
5471
5878
|
["COMBO_BOX" /* COMBOBOX */]: ComboboxInput,
|
|
5472
5879
|
["sortable_list" /* SORTABLE_LIST */]: SortableListInput,
|
|
5473
5880
|
["repeater_tabs" /* REPEATER_TABS */]: RepeaterTabsInput,
|
|
5881
|
+
["string_list" /* STRING_LIST */]: StringValueListInput,
|
|
5474
5882
|
//ToDos: ============================================================
|
|
5475
5883
|
["slider" /* SLIDER */]: SliderInput,
|
|
5476
5884
|
//ToDo: // PENDIENTE ... VISUALMENTE NO SE VE BIEN.!!!
|
|
@@ -5948,7 +6356,122 @@ var InputList = ({ handleAddInput, inputsTypes }) => {
|
|
|
5948
6356
|
);
|
|
5949
6357
|
}) });
|
|
5950
6358
|
};
|
|
6359
|
+
var GenericFilter = ({
|
|
6360
|
+
filters = [],
|
|
6361
|
+
pagination,
|
|
6362
|
+
autoSubmit = false,
|
|
6363
|
+
defaultValues = {},
|
|
6364
|
+
initPage = 1,
|
|
6365
|
+
initLimit = 10,
|
|
6366
|
+
rangeLimit = [10, 25, 50, 100],
|
|
6367
|
+
onChange,
|
|
6368
|
+
withSearch = true,
|
|
6369
|
+
withInitDate = true,
|
|
6370
|
+
withEndDate = true,
|
|
6371
|
+
withActive = true,
|
|
6372
|
+
withLimit = true,
|
|
6373
|
+
wrapInCard = true
|
|
6374
|
+
}) => {
|
|
6375
|
+
const record = {
|
|
6376
|
+
page: initPage,
|
|
6377
|
+
limit: initLimit,
|
|
6378
|
+
...defaultValues
|
|
6379
|
+
};
|
|
6380
|
+
const [values, setValues] = useState(record);
|
|
6381
|
+
const isFirstRender = useRef(true);
|
|
6382
|
+
useEffect(() => {
|
|
6383
|
+
if (isFirstRender.current) {
|
|
6384
|
+
isFirstRender.current = false;
|
|
6385
|
+
return;
|
|
6386
|
+
}
|
|
6387
|
+
}, [values]);
|
|
6388
|
+
const handleChange = (name, value) => {
|
|
6389
|
+
setValues((prev) => ({ ...prev, [name]: value }));
|
|
6390
|
+
if (autoSubmit && onChange) onChange({ ...values, [name]: value });
|
|
6391
|
+
};
|
|
6392
|
+
const baseFields = [
|
|
6393
|
+
...withSearch ? [
|
|
6394
|
+
{
|
|
6395
|
+
name: "search",
|
|
6396
|
+
label: "Buscar",
|
|
6397
|
+
inputType: "text_group" /* TEXT_GROUP */,
|
|
6398
|
+
inputGroupConfig: { iconsLeft: [Search] },
|
|
6399
|
+
onChange: (value) => handleChange("search", value)
|
|
6400
|
+
}
|
|
6401
|
+
] : [],
|
|
6402
|
+
...withInitDate ? [
|
|
6403
|
+
{
|
|
6404
|
+
name: "initDate",
|
|
6405
|
+
label: "Fecha de Inicio",
|
|
6406
|
+
inputType: "date" /* DATE */,
|
|
6407
|
+
onChange: (value) => handleChange("initDate", value)
|
|
6408
|
+
}
|
|
6409
|
+
] : [],
|
|
6410
|
+
...withEndDate ? [
|
|
6411
|
+
{
|
|
6412
|
+
name: "endDate",
|
|
6413
|
+
label: "Fecha Final",
|
|
6414
|
+
inputType: "date" /* DATE */,
|
|
6415
|
+
onChange: (value) => handleChange("endDate", value)
|
|
6416
|
+
}
|
|
6417
|
+
] : [],
|
|
6418
|
+
...withActive ? [
|
|
6419
|
+
{
|
|
6420
|
+
wrapInCard: true,
|
|
6421
|
+
name: "active",
|
|
6422
|
+
label: "",
|
|
6423
|
+
inputType: "button_group" /* BUTTON_GROUP */,
|
|
6424
|
+
description: "Estado",
|
|
6425
|
+
listConfig: {
|
|
6426
|
+
list: [
|
|
6427
|
+
{ id: 1, name: "Activo", value: true },
|
|
6428
|
+
{ id: 2, name: "Inactivo", value: false },
|
|
6429
|
+
{ id: 3, name: "Todos", value: void 0 }
|
|
6430
|
+
],
|
|
6431
|
+
onOptionChange: (item) => {
|
|
6432
|
+
if (Array.isArray(item) && item[0]) handleChange("active", item[0].value);
|
|
6433
|
+
else if (item && "value" in item) handleChange("active", item.value);
|
|
6434
|
+
}
|
|
6435
|
+
}
|
|
6436
|
+
}
|
|
6437
|
+
] : [],
|
|
6438
|
+
...withLimit ? [
|
|
6439
|
+
{
|
|
6440
|
+
name: "limit",
|
|
6441
|
+
label: "L\xEDmite por p\xE1gina",
|
|
6442
|
+
inputType: "select" /* SELECT */,
|
|
6443
|
+
listConfig: {
|
|
6444
|
+
list: rangeLimit.map((num) => ({
|
|
6445
|
+
value: String(num),
|
|
6446
|
+
id: num,
|
|
6447
|
+
name: String(num)
|
|
6448
|
+
})),
|
|
6449
|
+
onOptionChange: (item) => handleChange("limit", Number(item?.value ?? 10))
|
|
6450
|
+
}
|
|
6451
|
+
}
|
|
6452
|
+
] : []
|
|
6453
|
+
];
|
|
6454
|
+
const fieldsConfig = [
|
|
6455
|
+
...filters,
|
|
6456
|
+
baseFields
|
|
6457
|
+
];
|
|
6458
|
+
return /* @__PURE__ */ jsx("div", { className: "flex flex-col md:flex-row md:items-end gap-4 py-3", children: /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
|
|
6459
|
+
DynamicForm,
|
|
6460
|
+
{
|
|
6461
|
+
withCard: wrapInCard,
|
|
6462
|
+
withSubmitBtn: !autoSubmit,
|
|
6463
|
+
formTitle: "",
|
|
6464
|
+
submitBtnLabel: "Buscar",
|
|
6465
|
+
fields: fieldsConfig,
|
|
6466
|
+
record: values,
|
|
6467
|
+
showFormHeader: false,
|
|
6468
|
+
onSubmit: ({ data }) => {
|
|
6469
|
+
if (onChange && !autoSubmit) onChange(data);
|
|
6470
|
+
}
|
|
6471
|
+
}
|
|
6472
|
+
) }) });
|
|
6473
|
+
};
|
|
5951
6474
|
|
|
5952
|
-
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, Badge, BaseInput, Button, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CheckListInput, Checkbox, ColorCnInput, ColorInput, CustomAlert, DateInput, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DynamicForm, DynamicFormExample, FileInput, Form, FormControl, FormDescription, FormErrorsAlert, FormField, FormItem, FormLabel, FormMessage, GroupedSwitchInput, GroupedSwitches, Input, InputFactory, InputList, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, InputTypes, Label, NumberInput, OTPInput2 as OTPInput, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectInput, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Switch, SwitchInput, TextAreaInput, TextInput, TextInputType, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, entitiesToGroupedOption, entitiesToInputOption, entityToGroupedOption, entityToInputOption, flattenFields, getDefaultValues, getDynamicSchema, getFieldLabel, handleOnChage, inputFieldComp, mockFields, useFormField, validationMessages };
|
|
6475
|
+
export { Accordion, AccordionContent, AccordionGroupedSwitchInput, AccordionGroupedSwitches, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, Badge, BaseInput, Button, ButtonGroup, ButtonGroupInput, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarDayButton, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CheckListInput, Checkbox, CheckboxInput, ColorCnInput, ColorInput, ComboboxInput, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, CurrencyInput, CustomAlert, DateInput, DateTimeInput, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DynamicForm, DynamicFormExample, Field, FieldButtonGroup, FieldContent, FieldCurrency, FieldDateTimeInput, FieldDescription, FieldError, FieldFileMultiUpload, FieldGroup, FieldKeyValueList, FieldLabel, FieldLegend, FieldRepeater, FieldSeparator, FieldSet, FieldSimpleCheckList, FieldSlider, FieldStringValueList, FieldTextGroup, FieldTimeInput, FieldTitle, FileInput, FileMultiUploadInput, Form, FormControl, FormDescription, FormErrorsAlert, FormField, FormFieldsGrid, FormItem, FormLabel, FormMessage, GenericFilter, GroupedSwitchInput, GroupedSwitches, Input, InputFactory, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, InputList, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, InputTypes, KeyValueListInput, Label, MultiSelectInput, NumberInput, OTPInput2 as OTPInput, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, RadioGroup, RadioGroupInput, RadioGroupItem, RepeaterInput, RepeaterTabsInput, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectInput, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SimpleCheckListInput, Slider, SliderInput, SortableListInput, StringValueListInput, Switch, SwitchInput, Tabs, TabsContent, TabsList, TabsTrigger, TagInput, TextAreaInput, TextInput, TextInputGroup, TextInputType, Textarea, TimeInput, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonGroupVariants, buttonVariants, cn, entitiesToGroupedOption, entitiesToInputOption, entityToGroupedOption, entityToInputOption, flattenFields, getDefaultValues, getDynamicSchema, getFieldLabel, handleOnChage, inputFieldComp, mockFields, useFormField, validationMessages };
|
|
5953
6476
|
//# sourceMappingURL=index.mjs.map
|
|
5954
6477
|
//# sourceMappingURL=index.mjs.map
|