@sqrzro/admin 2.1.0-bz.16 → 2.1.0-bz.17

package/dist/components/Badge/index.js

@@ -1,11 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { tw } from '@sqrzro/components';
-const variantMap = {
+const classMap = {
+    danger: 'bg-red-100 text-red-700',
+    error: 'bg-red-100 text-red-700',
     info: 'bg-sky-100 text-sky-700',
     warning: 'bg-yellow-100 text-yellow-700',
-    success: 'bg-emerald-100 text-emerald-600',
+    success: 'bg-green-100 text-green-700',
+};
+const dotMap = {
+    danger: 'fill-red-500',
+    error: 'fill-red-500',
+    info: 'fill-sky-500',
+    warning: 'fill-yellow-500',
+    success: 'fill-green-500',
 };
 function Badge({ children, variant }) {
-    return (_jsxs("strong", { className: tw('inline-flex items-center gap-1.5 rounded-full bg-red-100 px-2 py-1 text-xs font-medium text-red-700'), children: [_jsx("svg", { "aria-hidden": "true", className: "h-1.5 w-1.5 fill-red-500", viewBox: "0 0 6 6", children: _jsx("circle", { cx: "3", cy: "3", r: "3" }) }), children] }));
+    return (_jsxs("strong", { className: tw('inline-flex items-center gap-1.5 rounded-full px-2 py-1 text-xs font-medium', classMap[variant]), children: [_jsx("svg", { "aria-hidden": "true", className: tw('h-1.5 w-1.5', dotMap[variant]), viewBox: "0 0 6 6", children: _jsx("circle", { cx: "3", cy: "3", r: "3" }) }), children] }));
 }
 export default Badge;

package/dist/components/FilterBar/index.js

@@ -1,6 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
+import { TextInput } from '@sqrzro/components';
 import { useFilters } from '@sqrzro/hooks';
 import { useRouter } from 'next/navigation';
 import FilterBarItem from '../FilterBarItem';
@@ -12,10 +13,14 @@ function FilterBar({ hasSearch, map }) {
         setFilter(name, value);
         router.refresh();
     }
-    return (_jsxs("ul", { className: "relative flex gap-2 before:absolute before:left-[calc(50%-50vw)] before:top-full before:h-24 before:w-screen before:bg-slate-800", children: [hasSearch ? (_jsx("li", { children: _jsx("input", { name: "search", onChange: (event) => setSearch(event.currentTarget.value), onKeyDown: (event) => {
-                        if (event.key === 'Enter') {
-                            setFilter('search', event.currentTarget.value);
-                        }
-                    }, value: search }) })) : null, (map || []).map((filter) => (_jsx(FilterBarItem, { onChange: handleChange, value: filters.get(filter.name) || '', ...filter }, filter.name)))] }));
+    function handleSearchChange(event) {
+        setSearch(event.target.value || '');
+    }
+    function handleSearchKeyDown(event) {
+        if (event.key === 'Enter') {
+            setFilter('search', event.currentTarget.value);
+        }
+    }
+    return (_jsxs("ul", { className: "relative flex gap-2 before:absolute before:left-[calc(50%-50vw)] before:top-full before:h-24 before:w-screen before:bg-slate-800", children: [hasSearch ? (_jsx("li", { children: _jsx(TextInput, { name: "search", onChange: handleSearchChange, onKeyDown: handleSearchKeyDown, value: search }) })) : null, (map || []).map((filter) => (_jsx(FilterBarItem, { onChange: handleChange, value: filters.get(filter.name) || '', ...filter }, filter.name)))] }));
 }
 export default FilterBar;

package/dist/components/GridList/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import type { ListProps } from '../List';
-export type GridListProps<Item> = Omit<ListProps<Item>, 'renderItem'>;
-declare function GridList<Item extends object>(props: GridListProps<Item>): React.ReactElement;
+export type GridListProps<Item, Params> = Omit<ListProps<Item, Params>, 'renderItem'>;
+declare function GridList<Item extends object, Params>(props: GridListProps<Item, Params>): React.ReactElement;
 export default GridList;

package/dist/components/List/index.d.ts

@@ -7,19 +7,19 @@ export interface ListComponentProps {
     params?: Record<string, string>;
     searchParams?: Record<string, string>;
 }
-export interface ListProps<Item> {
+export interface ListProps<Item, Params> {
     actions?: ({ id }: {
         readonly id: number;
     }) => React.ReactElement;
     columns?: number;
     emptyMessageProps?: EmptyMessageProps;
     filters?: FilterObject[];
-    fn: (params: Record<string, string>, searchParams: URLSearchParams) => Promise<Errorable<Item[]>>;
+    fn: (params?: Params, searchParams?: URLSearchParams) => Promise<Errorable<Item[]>>;
     hasSearch?: boolean;
     isMinimal?: boolean;
     renderItem?: (props: ListObject) => React.ReactElement;
-    params?: Record<string, string>;
+    params?: Params;
     transformer?: (item: Item) => ListObject;
 }
-declare function List<Item extends object>({ actions, columns, emptyMessageProps, filters, fn, hasSearch, isMinimal, params, renderItem, transformer, }: Readonly<ListProps<Item>>): Promise<React.ReactElement>;
+declare function List<Item extends object, Params>({ actions, columns, emptyMessageProps, filters, fn, hasSearch, isMinimal, params, renderItem, transformer, }: Readonly<ListProps<Item, Params>>): Promise<React.ReactElement>;
 export default List;

package/dist/components/List/index.js

@@ -22,7 +22,7 @@ async function List({ actions, columns, emptyMessageProps, filters, fn, hasSearc
     catch (err) {
         searchParams = new URLSearchParams();
     }
-    const [response, error] = await fn(params || {}, searchParams);
+    const [response, error] = await fn(params, searchParams);
     if (error) {
         return _jsx("div", { children: "Error" });
     }

package/dist/components/ListItem/index.js

@@ -5,7 +5,7 @@ export function renderMeta(meta) {
         return null;
     }
     if (Array.isArray(meta)) {
-        return (_jsx("ul", { className: "flex items-center gap-4 text-xs text-slate-600", children: meta.map((item) => (_jsx("li", { children: item }, item?.toString()))) }));
+        return (_jsx("ul", { className: "flex items-center gap-4 text-xs text-slate-600", children: meta.map((item, index) => (_jsx("li", { children: item }, index))) }));
     }
     return (_jsx("table", { className: "w-full text-xs", children: _jsx("tbody", { children: Object.entries(meta).map(([key, value]) => (_jsxs("tr", { className: "odd:bg-slate-100", children: [_jsx("th", { className: "p-2 font-semibold", children: key }), _jsx("td", { className: "p-2 text-right", children: value || '-' })] }, key))) }) }));
 }

package/dist/components/index.d.ts

@@ -1,4 +1,4 @@
-export { Autocomplete, Button, CalendarInput, ConnectedDropdown, ConfirmableButton, DateFormField, DateInput, Dropdown, DropdownFormField, EditableDateFormField, EditableDropdownFormField, EditableForm, EditableFormField, EditableMultiFormField, EditableNumberFormField, EditableSwitchFormField, EditableTextAreaFormField, EditableTextFormField, EmptyMessage, Fieldset, Form, FormField, FormSubmit, ImageInput, ImageFormField, Link, ModalForm, MultiFormField, NumberFormField, NumberInput, RadioInput, Switch, SwitchFormField, TextArea, TextAreaFormField, TextFormField, TextInput, Toaster, } from '@sqrzro/components';
+export { Autocomplete, AutocompleteFormField, Button, CalendarInput, ConnectedDropdown, ConfirmableButton, DateFormField, DateInput, Dropdown, DropdownFormField, EditableDateFormField, EditableDropdownFormField, EditableForm, EditableFormField, EditableMultiFormField, EditableNumberFormField, EditableSwitchFormField, EditableTextAreaFormField, EditableTextFormField, EmptyMessage, Fieldset, Form, FormField, FormSubmit, ImageInput, ImageFormField, Link, ModalForm, MultiFormField, NumberFormField, NumberInput, RadioInput, Switch, SwitchFormField, TextArea, TextAreaFormField, TextFormField, TextInput, Toaster, } from '@sqrzro/components';
 export type { DropdownItem } from '@sqrzro/components';
 export type { AppLayoutProps } from './AppLayout';
 export { default as AppLayout } from './AppLayout';

package/dist/components/index.js

@@ -1,5 +1,5 @@
 // Exported from @sqrzro/components
-export { Autocomplete, Button, CalendarInput, ConnectedDropdown, ConfirmableButton, DateFormField, DateInput, Dropdown, DropdownFormField, EditableDateFormField, EditableDropdownFormField, EditableForm, EditableFormField, EditableMultiFormField, EditableNumberFormField, EditableSwitchFormField, EditableTextAreaFormField, EditableTextFormField, EmptyMessage, Fieldset, Form, FormField, FormSubmit, ImageInput, ImageFormField, Link, ModalForm, MultiFormField, NumberFormField, NumberInput, RadioInput, Switch, SwitchFormField, TextArea, TextAreaFormField, TextFormField, TextInput, Toaster, } from '@sqrzro/components';
+export { Autocomplete, AutocompleteFormField, Button, CalendarInput, ConnectedDropdown, ConfirmableButton, DateFormField, DateInput, Dropdown, DropdownFormField, EditableDateFormField, EditableDropdownFormField, EditableForm, EditableFormField, EditableMultiFormField, EditableNumberFormField, EditableSwitchFormField, EditableTextAreaFormField, EditableTextFormField, EmptyMessage, Fieldset, Form, FormField, FormSubmit, ImageInput, ImageFormField, Link, ModalForm, MultiFormField, NumberFormField, NumberInput, RadioInput, Switch, SwitchFormField, TextArea, TextAreaFormField, TextFormField, TextInput, Toaster, } from '@sqrzro/components';
 export { default as AppLayout } from './AppLayout';
 export { default as Auth } from './Auth';
 export { default as Badge } from './Badge';

package/dist/styles/config.js

@@ -73,7 +73,7 @@ const classNames = twx({
         label: tw('flex font-semibold leading-none', props?.isEditable ? 'items-center' : 'mb-2 justify-between'),
         details: 'mb-2 text-xs font-normal leading-none text-slate-500',
         optional: 'pl-2 text-xs font-normal leading-none text-slate-500',
-        error: 'mt-2 flex items-center gap-2 text-red-700 before:h-4 before:w-4 before:rounded-full before:bg-[url(/admin/images/error.svg)]',
+        error: tw('mt-2 flex items-center gap-2 text-red-700 before:h-4 before:w-4 before:rounded-full before:bg-[url(/admin/images/error.svg)]', props?.isEditable ? 'col-start-2' : ''),
     }),
     imageInput: () => ({
         root: 'h-64 rounded border border-slate-300 bg-slate-50 p-8',
@@ -94,6 +94,9 @@ const classNames = twx({
         root: 'flex flex-col gap-2',
         row: 'grid grid-cols-[1fr_auto] has-[>_button]:gap-2',
     }),
+    objectInput: () => ({
+        root: 'flex flex-col gap-2',
+    }),
     passwordInput: () => ({
         action: {
             default: 'mr-2 h-6 w-6 overflow-hidden bg-[url(/admin/images/eye.svg)] bg-no-repeat indent-12',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sqrzro/admin",
-  "version": "2.1.0-bz.16",
+  "version": "2.1.0-bz.17",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "ISC",