@uxf/data-grid 11.40.0 → 11.41.4

package/_story-utils/data.d.ts

@@ -1,3 +1,5 @@
+import type { Money } from "@uxf/localize";
+import type { ChipColor } from "@uxf/ui/chip";
 interface Row {
     id: number;
     text: string | null | undefined;
@@ -7,6 +9,26 @@ interface Row {
     link: string | null | undefined;
     day: string | null | undefined;
     dayAndTime: string | null | undefined;
+    uuid: string | null | undefined;
+    chip: {
+        id: number;
+        label: string;
+        color?: ChipColor | null;
+    } | null | undefined;
+    chips: {
+        id: number;
+        label: string;
+        color?: ChipColor | null;
+    }[] | null | undefined;
+    money: Money | null | undefined;
+    toOne: {
+        id: number;
+        label: string;
+    } | null | undefined;
+    toMany: {
+        id: number;
+        label: string;
+    }[] | null | undefined;
 }
 export declare const data: Row[];
 export {};

package/_story-utils/data.js

@@ -11,6 +11,18 @@ exports.data = [
         link: null,
         day: "1998-09-15",
         dayAndTime: null,
+        uuid: "08ee844c-c27d-4ae3-8f04-9ff449649058",
+        chip: { id: 1, label: "Chip 1", color: "red" },
+        chips: [
+            { id: 1, label: "Chip 1", color: "red" },
+            { id: 2, label: "Chip 2", color: "blue" },
+        ],
+        money: { amount: "123456", currency: "CZK" },
+        toOne: { id: 1, label: "ToOne 1" },
+        toMany: [
+            { id: 1, label: "ToMany 1" },
+            { id: 2, label: "ToMany 2" },
+        ],
     },
     {
         id: 2,
@@ -21,6 +33,18 @@ exports.data = [
         link: undefined,
         day: "2023-01-05",
         dayAndTime: null,
+        uuid: "08ee844c-c27d-4ae3-8f04-9ff449649058",
+        chip: { id: 1, label: "Chip 1", color: "red" },
+        chips: [
+            { id: 1, label: "Chip 1", color: "red" },
+            { id: 2, label: "Chip 2", color: "blue" },
+        ],
+        money: { amount: "123456", currency: "CZK" },
+        toOne: { id: 1, label: "ToOne 1" },
+        toMany: [
+            { id: 1, label: "ToMany 1" },
+            { id: 2, label: "ToMany 2" },
+        ],
     },
     {
         id: 3,
@@ -31,6 +55,12 @@ exports.data = [
         link: null,
         day: "1998-09-15",
         dayAndTime: undefined,
+        uuid: "08ee844c-c27d-4ae3-8f04-9ff449649058",
+        chip: null,
+        chips: [{ id: 2, label: "Chip 2", color: "blue" }],
+        money: null,
+        toOne: null,
+        toMany: [{ id: 2, label: "ToMany 2" }],
     },
     {
         id: 4,
@@ -41,6 +71,12 @@ exports.data = [
         link: "https://www.uxf.cz",
         day: "2023-01-05",
         dayAndTime: undefined,
+        uuid: null,
+        chip: { id: 1, label: "Chip 1", color: "red" },
+        chips: null,
+        money: { amount: "123456", currency: "CZK" },
+        toOne: { id: 1, label: "ToOne 1" },
+        toMany: null,
     },
     {
         id: 5,
@@ -51,6 +87,12 @@ exports.data = [
         link: undefined,
         day: "2023-01-05",
         dayAndTime: "2000-10-31T01:30:00.000-05:00",
+        uuid: "08ee844c-c27d-4ae3-8f04-9ff449649058",
+        chip: { id: 1, label: "Chip 1", color: "red" },
+        chips: [],
+        money: { amount: "123456", currency: "CZK" },
+        toOne: { id: 1, label: "ToOne 1" },
+        toMany: [],
     },
     {
         id: 6,
@@ -61,6 +103,18 @@ exports.data = [
         link: "https://www.uxf.cz",
         day: undefined,
         dayAndTime: "2000-10-31T01:30:00.000-05:00",
+        uuid: "08ee844c-c27d-4ae3-8f04-9ff449649058",
+        chip: { id: 1, label: "Chip 1", color: "red" },
+        chips: [
+            { id: 1, label: "Chip 1", color: "red" },
+            { id: 2, label: "Chip 2", color: "blue" },
+        ],
+        money: { amount: "123456", currency: "CZK" },
+        toOne: { id: 1, label: "ToOne 1" },
+        toMany: [
+            { id: 1, label: "ToMany 1" },
+            { id: 2, label: "ToMany 2" },
+        ],
     },
     {
         id: 7,
@@ -71,6 +125,18 @@ exports.data = [
         link: null,
         day: "1998-09-15",
         dayAndTime: "2012-08-10T00:00:00.000-13:00",
+        uuid: "08ee844c-c27d-4ae3-8f04-9ff449649058",
+        chip: { id: 1, label: "Chip 1", color: "red" },
+        chips: [
+            { id: 1, label: "Chip 1", color: "red" },
+            { id: 2, label: "Chip 2", color: "blue" },
+        ],
+        money: { amount: "123456", currency: "CZK" },
+        toOne: { id: 1, label: "ToOne 1" },
+        toMany: [
+            { id: 1, label: "ToMany 1" },
+            { id: 2, label: "ToMany 2" },
+        ],
     },
     {
         id: 8,
@@ -81,6 +147,18 @@ exports.data = [
         link: "https://www.uxf.cz",
         day: undefined,
         dayAndTime: "2000-10-31T01:30:00.000-05:00",
+        uuid: "08ee844c-c27d-4ae3-8f04-9ff449649058",
+        chip: { id: 1, label: "Chip 1", color: "red" },
+        chips: [
+            { id: 1, label: "Chip 1", color: "red" },
+            { id: 2, label: "Chip 2", color: "blue" },
+        ],
+        money: { amount: "123456", currency: "CZK" },
+        toOne: { id: 1, label: "ToOne 1" },
+        toMany: [
+            { id: 1, label: "ToMany 1" },
+            { id: 2, label: "ToMany 2" },
+        ],
     },
     {
         id: 9,
@@ -91,6 +169,18 @@ exports.data = [
         link: "https://google.com",
         day: null,
         dayAndTime: "2012-08-10T00:00:00.000-13:00",
+        uuid: "08ee844c-c27d-4ae3-8f04-9ff449649058",
+        chip: { id: 1, label: "Chip 1", color: "red" },
+        chips: [
+            { id: 1, label: "Chip 1", color: "red" },
+            { id: 2, label: "Chip 2", color: "blue" },
+        ],
+        money: { amount: "123456", currency: "CZK" },
+        toOne: { id: 1, label: "ToOne 1" },
+        toMany: [
+            { id: 1, label: "ToMany 1" },
+            { id: 2, label: "ToMany 2" },
+        ],
     },
     {
         id: 10,
@@ -101,6 +191,18 @@ exports.data = [
         link: "https://google.com",
         day: null,
         dayAndTime: "2012-08-10T00:00:00.000-13:00",
+        uuid: "08ee844c-c27d-4ae3-8f04-9ff449649058",
+        chip: { id: 1, label: "Chip 1", color: "red" },
+        chips: [
+            { id: 1, label: "Chip 1", color: "red" },
+            { id: 2, label: "Chip 2", color: "blue" },
+        ],
+        money: { amount: "123456", currency: "CZK" },
+        toOne: { id: 1, label: "ToOne 1" },
+        toMany: [
+            { id: 1, label: "ToMany 1" },
+            { id: 2, label: "ToMany 2" },
+        ],
     },
     {
         id: 11,
@@ -111,5 +213,17 @@ exports.data = [
         link: "https://google.com",
         day: null,
         dayAndTime: "2000-12-31T01:00:00.000-07:30",
+        uuid: "08ee844c-c27d-4ae3-8f04-9ff449649058",
+        chip: { id: 1, label: "Chip 1", color: "red" },
+        chips: [
+            { id: 1, label: "Chip 1", color: "red" },
+            { id: 2, label: "Chip 2", color: "blue" },
+        ],
+        money: { amount: "123456", currency: "CZK" },
+        toOne: { id: 1, label: "ToOne 1" },
+        toMany: [
+            { id: 1, label: "ToMany 1" },
+            { id: 2, label: "ToMany 2" },
+        ],
     },
 ];

package/_story-utils/grid-type.d.ts

@@ -1,13 +1,20 @@
 export type GridType = {
     columns: {
-        id: "number";
-        text: "string";
+        id: "id";
         bool: "boolean";
-        tel: "phone";
-        mail: "email";
-        link: "url";
+        chip: "chip";
+        chips: "chips";
         day: "date";
         dayAndTime: "datetime";
+        integer: "integer";
+        link: "url";
+        mail: "email";
+        money: "money";
+        tel: "phone";
+        text: "string";
+        toMany: "toMany";
+        toOne: "toOne";
+        uuid: "uuid";
         hidden: "hidden";
     };
     filters: {

package/_story-utils/schema.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.schema = void 0;
 exports.schema = {
     columns: [
-        { name: "id", type: "number", label: "Id", sort: true, config: { width: 50, isHidden: true } },
+        { name: "id", type: "id", label: "Id", sort: true, config: { width: 50, isHidden: true } },
         { name: "text", type: "string", label: "Text", sort: true },
         { name: "bool", type: "boolean", label: "Boolean" },
         { name: "mail", type: "email", label: "E-mail" },
@@ -11,12 +11,18 @@ exports.schema = {
         { name: "link", type: "url", label: "Link" },
         { name: "day", type: "date", label: "Date" },
         { name: "dayAndTime", type: "datetime", label: "Datetime" },
+        { name: "uuid", type: "uuid", label: "UUID" },
+        { name: "chip", type: "chip", label: "Chip" },
+        { name: "chips", type: "chips", label: "Chips" },
+        { name: "money", type: "money", label: "Money" },
+        { name: "toOne", type: "toOne", label: "To one" },
+        { name: "toMany", type: "toMany", label: "To many" },
         { name: "hidden", type: "hidden", label: "Hidden", hidden: true },
     ],
     filters: [
         { name: "text", type: "text", label: "Text" },
         { name: "bool", type: "boolean", label: "Boolean" },
-        { name: "interval", type: "interval", label: "Super interval" },
+        { name: "interval", type: "interval", label: "Number interval" },
         { name: "mail", type: "string", label: "E-mail" },
         { name: "date", type: "date", label: "Date" },
         { name: "datetime", type: "datetime", label: "Datetime" },

package/body-cell/body-cell-chip.d.ts

@@ -0,0 +1,12 @@
+import { ChipColors } from "@uxf/ui/chip/theme";
+import React from "react";
+type Item = {
+    id: number;
+    label: string;
+    color?: keyof ChipColors | null;
+};
+interface Props {
+    value: Item | Item[] | null;
+}
+export declare function BodyCellChip(props: Props): React.JSX.Element | null;
+export {};

package/body-cell/body-cell-chip.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BodyCellChip = BodyCellChip;
+const chip_1 = require("@uxf/ui/chip");
+const react_1 = __importDefault(require("react"));
+function BodyCellChip(props) {
+    var _a;
+    if (typeof props.value !== "object" || props.value === null) {
+        return null;
+    }
+    if (Array.isArray(props.value)) {
+        return (react_1.default.createElement("div", { className: "uxf-data-grid__body-cell--chips" }, props.value.map((item) => {
+            var _a;
+            return (react_1.default.createElement(chip_1.Chip, { color: (_a = item.color) !== null && _a !== void 0 ? _a : "default", key: item.id }, item.label));
+        })));
+    }
+    return (react_1.default.createElement(chip_1.Chip, { color: (_a = props.value.color) !== null && _a !== void 0 ? _a : "default", key: props.value.id }, props.value.label));
+}

package/body-cell/body-cell-money.d.ts

@@ -0,0 +1,8 @@
+import type { BodyCellProps } from "@uxf/data-grid";
+import type { Money } from "@uxf/localize";
+import React from "react";
+interface Props extends BodyCellProps<any, any> {
+    value: Money | null;
+}
+export declare function BodyCellMoney(props: Props): React.JSX.Element | null;
+export {};

package/body-cell/body-cell-money.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BodyCellMoney = BodyCellMoney;
+const cs_1 = __importDefault(require("@uxf/localize/locale/cs"));
+const format_money_1 = require("@uxf/localize/src/format-money/format-money");
+const react_1 = __importDefault(require("react"));
+function BodyCellMoney(props) {
+    if (typeof props.value !== "object" || props.value === null) {
+        return null;
+    }
+    return react_1.default.createElement("span", null, (0, format_money_1.createFormatMoney)({ cs: cs_1.default })("cs", props.value));
+}

package/body-cell/index.js

@@ -2,22 +2,32 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BodyCells = void 0;
 const body_cell_boolean_1 = require("./body-cell-boolean");
+const body_cell_chip_1 = require("./body-cell-chip");
 const body_cell_date_1 = require("./body-cell-date");
 const body_cell_datetime_1 = require("./body-cell-datetime");
 const body_cell_default_1 = require("./body-cell-default");
 const body_cell_email_1 = require("./body-cell-email");
+const body_cell_money_1 = require("./body-cell-money");
 const body_cell_phone_1 = require("./body-cell-phone");
 const body_cell_to_many_1 = require("./body-cell-to-many");
 const body_cell_to_one_1 = require("./body-cell-to-one");
 const body_cell_url_1 = require("./body-cell-url");
 exports.BodyCells = {
     boolean: body_cell_boolean_1.BodyCellBoolean,
+    chip: body_cell_chip_1.BodyCellChip,
+    chips: body_cell_chip_1.BodyCellChip,
     date: body_cell_date_1.BodyCellDate,
     datetime: body_cell_datetime_1.BodyCellDateTime,
     email: body_cell_email_1.BodyCellEmail,
+    id: body_cell_default_1.BodyCellDefault,
+    integer: body_cell_default_1.BodyCellDefault,
+    money: body_cell_money_1.BodyCellMoney,
     phone: body_cell_phone_1.BodyCellPhone,
-    toOne: body_cell_to_one_1.BodyCellToOne,
+    string: body_cell_default_1.BodyCellDefault,
     toMany: body_cell_to_many_1.BodyCellToMany,
+    toOne: body_cell_to_one_1.BodyCellToOne,
     url: body_cell_url_1.BodyCellUrl,
+    uuid: body_cell_default_1.BodyCellDefault,
+    // default
     default: body_cell_default_1.BodyCellDefault,
 };

package/data-grid.stories.js

@@ -78,10 +78,19 @@ function Default() {
         schema: schema_1.schema,
         initialUserConfig: {
             columns: {
-                id: { width: 100 },
-                text: { minWidth: 300 },
-                mail: { minWidth: 300 },
-                tel: { minWidth: 300 },
+                id: { width: 60 },
+                link: { width: 200 },
+                day: { width: 150 },
+                dayAndTime: { width: 200 },
+                text: { minWidth: 150 },
+                mail: { minWidth: 150 },
+                tel: { minWidth: 150 },
+                uuid: { minWidth: 300 },
+                chip: { minWidth: 100 },
+                chips: { minWidth: 200 },
+                money: { minWidth: 100 },
+                toOne: { minWidth: 150 },
+                toMany: { minWidth: 200 },
             },
         },
     });

package/filter-handler/index.js

@@ -18,7 +18,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.defaultFilterHandlers = void 0;
-const boolean_select_1 = __importDefault(require("./boolean-select"));
 const checkbox_1 = __importDefault(require("./checkbox"));
 const date_1 = __importDefault(require("./date"));
 const datetime_1 = __importDefault(require("./datetime"));
@@ -30,11 +29,7 @@ const select_1 = __importDefault(require("./select"));
 const string_1 = __importDefault(require("./string"));
 __exportStar(require("./types"), exports);
 exports.defaultFilterHandlers = {
-    bool: boolean_select_1.default, // TODO smazat
-    boolean: checkbox_1.default, // TODO smazat
-    text: string_1.default, // TODO smazat
-    date: // TODO smazat
-    date_1.default,
+    date: date_1.default,
     datetime: datetime_1.default,
     entityMultiSelect: entity_multi_select_1.default,
     entitySelect: entity_select_1.default,

package/filter-handler/interval.d.ts

@@ -1,3 +1,7 @@
 import { FilterHandler } from "./types";
-declare const filterHandler: FilterHandler<string>;
+type StateValue = {
+    from?: string;
+    to?: string;
+} | undefined;
+declare const filterHandler: FilterHandler<StateValue>;
 export default filterHandler;

package/filter-handler/interval.js

@@ -3,23 +3,43 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+const filter_nullish_1 = require("@uxf/core/utils/filter-nullish");
 const is_nil_1 = require("@uxf/core/utils/is-nil");
 const chip_1 = require("@uxf/ui/chip");
-const date_range_picker_input_1 = require("@uxf/ui/date-range-picker-input");
+const text_input_1 = require("@uxf/ui/text-input");
 const react_1 = __importDefault(require("react"));
 const filterHandler = {
     Input(props) {
-        var _a;
-        const onChange = (value) => props.onChange(value !== null && value !== void 0 ? value : "");
-        return (react_1.default.createElement("div", { key: props.filter.name },
-            react_1.default.createElement("div", { className: "uxf-data-grid__filter uxf-data-grid__filter--interval" },
-                react_1.default.createElement(date_range_picker_input_1.DateRangePickerInput, { label: props.filter.label, name: props.filter.name, onChange: onChange, placeholder: (_a = props.filter.config) === null || _a === void 0 ? void 0 : _a.placeholder, value: props.value }))));
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const onChangeFrom = (value) => {
+            var _a;
+            return (0, is_nil_1.isNil)(value) && (0, is_nil_1.isNil)((_a = props.value) === null || _a === void 0 ? void 0 : _a.to)
+                ? props.onChange(undefined)
+                : props.onChange({ ...props.value, from: value });
+        };
+        const onChangeTo = (value) => {
+            var _a;
+            return (0, is_nil_1.isNil)(value) && (0, is_nil_1.isNil)((_a = props.value) === null || _a === void 0 ? void 0 : _a.from)
+                ? props.onChange(undefined)
+                : props.onChange({ ...props.value, to: value });
+        };
+        return (react_1.default.createElement("div", { className: "uxf-data-grid__filter uxf-data-grid__filter--interval" },
+            react_1.default.createElement(text_input_1.TextInput, { label: `${props.filter.label} (od)`, max: (_a = props.value) === null || _a === void 0 ? void 0 : _a.to, name: `${props.filter.name}.from`, onChange: onChangeFrom, placeholder: (_b = props.filter.config) === null || _b === void 0 ? void 0 : _b.placeholder, type: "number", value: (_d = (_c = props.value) === null || _c === void 0 ? void 0 : _c.from) !== null && _d !== void 0 ? _d : "" }),
+            react_1.default.createElement(text_input_1.TextInput, { label: `${props.filter.label} (do)`, min: (_e = props.value) === null || _e === void 0 ? void 0 : _e.from, name: `${props.filter.name}.to`, onChange: onChangeTo, placeholder: (_f = props.filter.config) === null || _f === void 0 ? void 0 : _f.placeholder, type: "number", value: (_h = (_g = props.value) === null || _g === void 0 ? void 0 : _g.to) !== null && _h !== void 0 ? _h : "" })));
     },
-    ListItem(props) {
-        if ((0, is_nil_1.isNil)(props.value)) {
+    ListItem: function (props) {
+        var _a, _b;
+        if ((0, is_nil_1.isNil)((_a = props.value) === null || _a === void 0 ? void 0 : _a.from) && (0, is_nil_1.isNil)((_b = props.value) === null || _b === void 0 ? void 0 : _b.to)) {
             return null;
         }
-        return react_1.default.createElement(chip_1.Chip, { onClose: props.onClear }, props.value);
+        const interval = [
+            props.value.from ? "od " + props.value.from : null,
+            props.value.to ? "do " + props.value.to : null,
+        ];
+        return (react_1.default.createElement(chip_1.Chip, { onClose: props.onClear },
+            props.filter.label,
+            ": ",
+            (0, filter_nullish_1.filterNullish)(interval).join(" ")));
     },
 };
 exports.default = filterHandler;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/data-grid",
-    "version": "11.40.0",
+    "version": "11.41.4",
     "description": "UXF DataGrid",
     "homepage": "https://gitlab.com/uxf-npm/data-grid#readme",
     "main": "index.js",

package/styles.css

@@ -67,6 +67,15 @@
             height: 100%;
             width: 100%;
         }
+
+        &--chips {
+            align-items: center;
+            display: flex;
+            flex-wrap: wrap;
+            gap: theme("spacing.1") theme("spacing.2");
+            height: 100%;
+            width: 100%;
+        }
     }
 
     &__drawer {
@@ -136,7 +145,8 @@
 
     &__filter {
         &--date,
-        &--datetime {
+        &--datetime,
+        &--interval {
             display: grid;
             gap: theme("spacing.4");
             grid-template-columns: repeat(2, 1fr);