onekijs-ui 0.19.20 → 0.19.21

package/dist/index.module.js

@@ -403,6 +403,24 @@ const enumFormatter = (values) => {
         return String(value);
     };
 };
+const escapeCsvValue = (value, separator = ',') => {
+    const escape = (value) => {
+        if (Array.isArray(value)) {
+            return value.map((v) => escape(v)).join(',');
+        }
+        if (value === null || value === undefined)
+            return '';
+        return `${value}`;
+    };
+    const result = escape(value);
+    if (result.startsWith('"') && result.endsWith('"'))
+        return result; // the string is already escaped
+    // escape only if the string contains the separator
+    if (result.includes(separator)) {
+        return `"${result.replace(/"/g, '""')}"`;
+    }
+    return result;
+};
 const pxFormatter = (value) => {
     if (typeof value === 'string') {
         return value;
@@ -9180,6 +9198,36 @@ let TableService = class TableService extends CollectionService {
             column.computedWidth = undefined;
         });
     }
+    serialize(data, format) {
+        const serializer = this.config?.serializer;
+        if (serializer) {
+            return serializer(data, format);
+        }
+        const serializableColumns = (this.state.columns || []).filter((c) => c.serializer !== undefined);
+        switch (format) {
+            case 'csv':
+                let result = 'sep=,';
+                const header = serializableColumns.map((c) => escapeCsvValue(get(c, 'title', get(c, 'id')))).join(',');
+                result = `${result}\n${header}`;
+                const csvRows = data.map((row) => {
+                    const columns = serializableColumns
+                        .map((c) => c.serializer(row, c, format))
+                        .map((s) => {
+                        return escapeCsvValue(s, ',');
+                    });
+                    return columns.join(',');
+                });
+                return `${result}\n${csvRows.join('\n')}`;
+            case 'json':
+                const rows = data.map((row) => {
+                    return serializableColumns.reduce((accumulator, c) => {
+                        accumulator[c.title ?? c.id] = c.serializer(row, c, format);
+                        return accumulator;
+                    }, {});
+                });
+                return JSON.stringify(rows);
+        }
+    }
     toggle(item) {
         this.setMeta('item', item, 'expanded', !item.expanded);
     }
@@ -10480,6 +10528,10 @@ const DefaultFormCellDisplayer = (props) => {
     return null;
 };
 
+const defaultCellSerializer = (data, column) => {
+    return get(data, column.id, null);
+};
+
 const checkboxColumn = (id, options) => {
     const Component = options.CellComponent || CheckboxCellComponent;
     return Object.assign({
@@ -10487,6 +10539,7 @@ const checkboxColumn = (id, options) => {
         sortable: false,
         className: 'o-checkbox-cell',
         Displayer: DefaultFormCellDisplayer,
+        serializer: defaultCellSerializer,
     }, options, {
         id,
         CellComponent: Component(options),
@@ -10539,12 +10592,28 @@ const TableSelectFilterComponent = ({ column, dataSource, }) => {
 TableSelectFilterComponent.displayName = 'TableInputFilterComponent';
 
 const enumColumn = (id, options) => {
+    const serializer = (data, column, format) => {
+        const value = get(data, column.id, null);
+        const entry = options.filterDataSource.find((item) => {
+            if (Array.isArray(item)) {
+                if (item[0] === value) {
+                    return true;
+                }
+            }
+            return false;
+        });
+        if (entry) {
+            return entry[1];
+        }
+        return defaultCellSerializer(data, column);
+    };
     return Object.assign({
         CellComponent: DefaultCellComponent,
         filterable: true,
         FilterComponent: (props) => (React.createElement(TableSelectFilterComponent, { ...props, dataSource: options.filterDataSource })),
         sortable: true,
         Displayer: DefaultFormCellDisplayer,
+        serializer,
     }, options, {
         id,
     });
@@ -10568,6 +10637,7 @@ const inputColumn = (id, options) => {
         filterable: false,
         sortable: false,
         Displayer: DefaultFormCellDisplayer,
+        serializer: defaultCellSerializer,
     }, options, {
         id,
         CellComponent: Component(options),
@@ -10591,6 +10661,7 @@ const textColumn = (id, options) => {
         FilterComponent: TableTextFilterComponent,
         sortable: true,
         Displayer: DefaultFormCellDisplayer,
+        serializer: defaultCellSerializer,
     }, options, {
         id,
     });
@@ -10622,6 +10693,7 @@ const numberColumn = (id, options) => {
         FilterComponent: TableNumberFilterComponent,
         sortable: true,
         Displayer: DefaultFormCellDisplayer,
+        serializer: defaultCellSerializer,
     }, options, {
         id,
     });
@@ -10661,12 +10733,30 @@ const selectColumn = (id, options) => {
         };
         opts.adapter = adapter;
     }
+    const serializer = (data, column, format) => {
+        const value = get(data, column.id, null);
+        if (Array.isArray(opts.dataSource)) {
+            const entry = opts.dataSource.find((item) => {
+                if (Array.isArray(item)) {
+                    if (item[0] === value) {
+                        return true;
+                    }
+                }
+                return false;
+            });
+            if (entry && Array.isArray(entry)) {
+                return entry[1];
+            }
+        }
+        return defaultCellSerializer(data, column);
+    };
     const broker = new DefaultSelectBroker(dataSource, opts);
     const Component = opts.CellComponent || SelectCellComponent;
     return Object.assign({
         filterable: false,
         sortable: false,
         Displayer: DefaultFormCellDisplayer,
+        serializer,
     }, opts, {
         id,
         CellComponent: Component(opts, broker),
@@ -10818,6 +10908,7 @@ const textareaColumn = (id, options) => {
         filterable: false,
         sortable: false,
         Displayer: DefaultFormCellDisplayer,
+        serializer: defaultCellSerializer,
     }, options, {
         id,
         CellComponent: Component(options),
@@ -12370,5 +12461,5 @@ const TailwindTheme = (props) => {
     return React.createElement(BaseTheme, { theme: tailwindTheme(), ...props });
 };
 
-export { Accordion, AccordionComponent, AccordionContainer, AccordionPanel, ArraySelectComponent, ArrayTreeComponent, ArrayTreeSelectComponent, BaseTheme, BreakpointKeys, Button, Card, CardComponent, CardTitle, Checkbox, CheckboxCellComponent, CheckboxComponent, CloseAllIcon, Col, ColorKeys, ControlledSelectComponent, ControlledTimerComponent, ControlledWizardComponent, ControllerTreeComponent, CrossIcon, Dashboard, DashboardBody, DashboardContainer, DashboardFooter, DashboardHeader, DashboardKeys, DashboardLeft, DashboardOverlay, DashboardRight, DashboardService, DashboardServiceContext, DashboardStateContext, DashboardToggler, DefaultCellComponent, DefaultFormCellDisplayer as DefaultCellDisplayer, DefaultSelectBroker, Dropdown, DropdownButton, DropdownComponent, DropdownList, ErrorIcon, ExpandedCellComponent, FieldDescription, FieldDescriptionComponent, FieldDisplayer, FieldHelp, FieldHelpComponent, FieldLayout, FieldLayoutComponent, FileIcon, FolderIcon, FontFamiliesKeys, FontLineHeightKeys, FontSizeKeys, FontSpacingKeys, FontWeightKeys, FormCard, FormCardDisplayer, FormCheckbox, FormInput, FormSelect$1 as FormSelect, FormStep, FormTable, FormTableItemDisplayer, FormTableValueDisplayer$1 as FormTableValueDisplayer, FormTextarea, HelpIcon, Input, InputCellComponent, InputComponent, Label, List, ListItemComponent$1 as ListItemComponent, ListItemContent, ListStatus, LoadingIcon, LoadingItem$1 as LoadingItem, MenuIcon, Modal, ModalComponent, NotificationComponent, Notifications, NotificationsComponent, Password, PasswordComponent$1 as PasswordComponent, Properties, PropertiesComponent, Property, RadiusKeys, RefreshIcon, Row, SearchIcon, Select, SelectCellComponent, SelectComponent$1 as SelectComponent, SelectIconComponent, SelectInputComponent$1 as SelectInputComponent, SelectNotFoundComponent, SelectOptionComponent$1 as SelectOptionComponent, SelectService$1 as SelectService, SelectTokensComponent$1 as SelectTokensComponent, ShadowKeys, SizeKeys, SpacingKeys, Step, StepTitle, SubmitButton, SuccessIcon, Tab, TabTitle, Table, TableBodyRowComponent, TableFilterOperatorComponent, TableInputFilterComponent, TableNumberFilterComponent, TableTextFilterComponent, Tabs, Tag, TagComponent, TailwindTheme, Textarea, TextareaCellComponent, TextareaComponent, Timer, TimerComponent, TogglerIcon, Tooltip, Tree, TreeBodyComponent, TreeComponent$1 as TreeComponent, TreeConfigContext, TreeItemComponent$1 as TreeItemComponent, TreeItemContent, TreeItemToggler, TreeListComponent, TreeSelect, TreeSelectComponent$1 as TreeSelectComponent, TreeService$1 as TreeService, TreeServiceContext, TreeStateContext, TshirtKeys, UncontrolledTimerComponent, UncontrolledWizardComponent, VirtualTreeBodyComponent, VirtualTreeListComponent, Wizard, WizardComponent, WizardContainer, WizardModal, WizardModalComponent, WizardService, WizardSummary, WizardSummaryComponent, accordionStyle, addClassname, addStyle, alignContent, alignItems, alignSelf, animation, animationDelay, animationDirection, animationDuration, animationFillMode, animationIterationCount, animationName, animationPlayState, animationTimingFunction, appearance, applyOpacity, aspectRatio, backgroundAttachment, backgroundClip, backgroundColor, backgroundImage, backgroundOpacity, backgroundOrigin, backgroundPosition, backgroundRepeat, backgroundSize, baseTheme, booleanFormatter, border, borderBottom, borderBottomColor, borderBottomLeftRadius, borderBottomOpacity, borderBottomRightRadius, borderBottomStyle, borderBottomWidth, borderCollapse, borderColor, borderImage, borderImageOutset, borderImageRepeat, borderImageSlice, borderImageSource, borderImageWidth, borderLeft, borderLeftColor, borderLeftOpacity, borderLeftStyle, borderLeftWidth, borderOpacity, borderRadius, borderRight, borderRightColor, borderRightOpacity, borderRightStyle, borderRightWidth, borderSpacing, borderStyle, borderTop, borderTopColor, borderTopLeftRadius, borderTopOpacity, borderTopRightRadius, borderTopStyle, borderTopWidth, borderWidth, bottom, boxShadow, boxSizing, breakAfter, breakBefore, breakInside, buttonStyle, captionSide, cardStyle, caretColor, checkboxColumn, checkboxStyle, clear, colStyle, color, colorFormatter, columnCount, columnFill, columnGap, columnRule, columnRuleColor, columnRuleStyle, columnRuleWidth, columnSpan, columnWidth, columns, container, cssProperty, cursor, darken, dashboardOverlayStyle, defaultTreeQueryEngine, deriveColor, display, dropdownButtonStyle, dropdownStyle, emptyCells, enumColumn, enumFormatter, fieldDescriptionStyle, fieldDisplayerStyle, fieldHelpStyle, fieldStyle, fill, filterListStyle, findSelectItem, findSelectItemIndex, flex, flexBasis, flexDirection, flexGrow, flexShrink, flexWrap, float, font, fontFamily, fontFeatureSettings, fontKerning, fontLanguageOverride, fontOpticalSizing, fontSize, fontSizeAdjust, fontStretch, fontStyle, fontSynthesis, fontVariant, fontVariantAlternates, fontVariantCaps, fontVariantEastAsian, fontVariantLigatures, fontVariantNumeric, fontVariantPosition, fontVariationSettings, fontWeight, gap, grid, gridAutoColumns, gridAutoFlow, gridAutoRows, gridColumn, gridColumnEnd, gridColumnGap, gridColumnStart, gridGap, gridRow, gridRowEnd, gridRowGap, gridRowStart, gridTemplate, gridTemplateAreas, gridTemplateColumns, gridTemplateRows, height, hexToRgb, hyphens, iconHeight, iconWidth, imageRendering, inputColumn, justifyContent, justifySelf, left, letterSpacing, lighten, lineHeight, lineHeightStep, linkColumn, listStyle, listStyleImage, listStylePosition, listStyleType, margin, marginBottom, marginLeft, marginRight, marginTop, marginX, marginY, maxHeight, maxWidth, maxWidthPopperModifier, minHeight, minWidth, minWidthPopperModifier, modalStyle, notifcationsStyle, numberColumn, objectFit, objectPosition, opacity, order, orphans, outline, outlineColor, outlineOffset, outlineStyle, outlineWidth, overflow, overflowBlock, overflowInline, overflowWrap, overflowX, overflowY, overscrollBehavior, overscrollBehaviorBlock, overscrollBehaviorInline, overscrollBehaviorX, overscrollBehaviorY, padding, paddingBottom, paddingLeft, paddingRight, paddingTop, paddingX, paddingY, passwordStyle, perspective, perspectiveOrigin, placeContent, placeItems, placeSelf, pointerEvents, position, preflight, propertiesStyle, pxFormatter, resize, rgbToHex, right, rotate, rowGap, rowStyle, sameWidthPopperModifier, scale, selectColumn, shouldCheckSelect, stroke, strokeWidth, tableLayout, tableStyle, tagStyle, tailwindPalette, tailwindTheme, textAlign, textColumn, textDecoration, textDecorationColor, textDecorationLine, textDecorationStyle, textDecorationThickness, textEmphasis, textEmphasisColor, textEmphasisPosition, textEmphasisStyle, textIdent, textJustify, textOpacity, textOverflow, textShadow, textTransform, textUnderlineOffset, textUnderlinePosition, textareaColumn, themeFormatter, timerStyle, titlelize, toCss, top, touchAction, transform, transformOrigin, transition, transitionDelay, transitionDuration, transitionProperty, transitionTimingFunction, useCheckboxColumn, useClickOutside, useColumns, useDashboard, useDashboardHorizontalPanel, useDashboardService, useDashboardState, useDashboardVerticalPanel, useDashoardBodyPanel, useDropdown, useEnumColumn, useFieldLayout, useFocusOutside, useFormTableContext, useInputColumn$1 as useInputColumn, useLinkColumn, useListController, useInputColumn as useNumberColumn, useSelectColumn, useSelectController, useSelectService, useTab, useTableController, useTableService, useTabsController, useTabsService, useTabsState, useTextColumn, useTextareaColumn, useTreeConfig, useTreeController, useTreeInitialState, useTreeItemContext, useTreeSelectController, useTreeService, useTreeState, userSelect, verticalAlign, visibility, whiteSpace, widows, width, wizardModalStyle, wizardStyle, wizardSummaryStyle, wordBreak, wordSpacing, zIndex, zoom };
+export { Accordion, AccordionComponent, AccordionContainer, AccordionPanel, ArraySelectComponent, ArrayTreeComponent, ArrayTreeSelectComponent, BaseTheme, BreakpointKeys, Button, Card, CardComponent, CardTitle, Checkbox, CheckboxCellComponent, CheckboxComponent, CloseAllIcon, Col, ColorKeys, ControlledSelectComponent, ControlledTimerComponent, ControlledWizardComponent, ControllerTreeComponent, CrossIcon, Dashboard, DashboardBody, DashboardContainer, DashboardFooter, DashboardHeader, DashboardKeys, DashboardLeft, DashboardOverlay, DashboardRight, DashboardService, DashboardServiceContext, DashboardStateContext, DashboardToggler, DefaultCellComponent, DefaultFormCellDisplayer as DefaultCellDisplayer, DefaultSelectBroker, Dropdown, DropdownButton, DropdownComponent, DropdownList, ErrorIcon, ExpandedCellComponent, FieldDescription, FieldDescriptionComponent, FieldDisplayer, FieldHelp, FieldHelpComponent, FieldLayout, FieldLayoutComponent, FileIcon, FolderIcon, FontFamiliesKeys, FontLineHeightKeys, FontSizeKeys, FontSpacingKeys, FontWeightKeys, FormCard, FormCardDisplayer, FormCheckbox, FormInput, FormSelect$1 as FormSelect, FormStep, FormTable, FormTableItemDisplayer, FormTableValueDisplayer$1 as FormTableValueDisplayer, FormTextarea, HelpIcon, Input, InputCellComponent, InputComponent, Label, List, ListItemComponent$1 as ListItemComponent, ListItemContent, ListStatus, LoadingIcon, LoadingItem$1 as LoadingItem, MenuIcon, Modal, ModalComponent, NotificationComponent, Notifications, NotificationsComponent, Password, PasswordComponent$1 as PasswordComponent, Properties, PropertiesComponent, Property, RadiusKeys, RefreshIcon, Row, SearchIcon, Select, SelectCellComponent, SelectComponent$1 as SelectComponent, SelectIconComponent, SelectInputComponent$1 as SelectInputComponent, SelectNotFoundComponent, SelectOptionComponent$1 as SelectOptionComponent, SelectService$1 as SelectService, SelectTokensComponent$1 as SelectTokensComponent, ShadowKeys, SizeKeys, SpacingKeys, Step, StepTitle, SubmitButton, SuccessIcon, Tab, TabTitle, Table, TableBodyRowComponent, TableFilterOperatorComponent, TableInputFilterComponent, TableNumberFilterComponent, TableTextFilterComponent, Tabs, Tag, TagComponent, TailwindTheme, Textarea, TextareaCellComponent, TextareaComponent, Timer, TimerComponent, TogglerIcon, Tooltip, Tree, TreeBodyComponent, TreeComponent$1 as TreeComponent, TreeConfigContext, TreeItemComponent$1 as TreeItemComponent, TreeItemContent, TreeItemToggler, TreeListComponent, TreeSelect, TreeSelectComponent$1 as TreeSelectComponent, TreeService$1 as TreeService, TreeServiceContext, TreeStateContext, TshirtKeys, UncontrolledTimerComponent, UncontrolledWizardComponent, VirtualTreeBodyComponent, VirtualTreeListComponent, Wizard, WizardComponent, WizardContainer, WizardModal, WizardModalComponent, WizardService, WizardSummary, WizardSummaryComponent, accordionStyle, addClassname, addStyle, alignContent, alignItems, alignSelf, animation, animationDelay, animationDirection, animationDuration, animationFillMode, animationIterationCount, animationName, animationPlayState, animationTimingFunction, appearance, applyOpacity, aspectRatio, backgroundAttachment, backgroundClip, backgroundColor, backgroundImage, backgroundOpacity, backgroundOrigin, backgroundPosition, backgroundRepeat, backgroundSize, baseTheme, booleanFormatter, border, borderBottom, borderBottomColor, borderBottomLeftRadius, borderBottomOpacity, borderBottomRightRadius, borderBottomStyle, borderBottomWidth, borderCollapse, borderColor, borderImage, borderImageOutset, borderImageRepeat, borderImageSlice, borderImageSource, borderImageWidth, borderLeft, borderLeftColor, borderLeftOpacity, borderLeftStyle, borderLeftWidth, borderOpacity, borderRadius, borderRight, borderRightColor, borderRightOpacity, borderRightStyle, borderRightWidth, borderSpacing, borderStyle, borderTop, borderTopColor, borderTopLeftRadius, borderTopOpacity, borderTopRightRadius, borderTopStyle, borderTopWidth, borderWidth, bottom, boxShadow, boxSizing, breakAfter, breakBefore, breakInside, buttonStyle, captionSide, cardStyle, caretColor, checkboxColumn, checkboxStyle, clear, colStyle, color, colorFormatter, columnCount, columnFill, columnGap, columnRule, columnRuleColor, columnRuleStyle, columnRuleWidth, columnSpan, columnWidth, columns, container, cssProperty, cursor, darken, dashboardOverlayStyle, defaultCellSerializer, defaultTreeQueryEngine, deriveColor, display, dropdownButtonStyle, dropdownStyle, emptyCells, enumColumn, enumFormatter, escapeCsvValue, fieldDescriptionStyle, fieldDisplayerStyle, fieldHelpStyle, fieldStyle, fill, filterListStyle, findSelectItem, findSelectItemIndex, flex, flexBasis, flexDirection, flexGrow, flexShrink, flexWrap, float, font, fontFamily, fontFeatureSettings, fontKerning, fontLanguageOverride, fontOpticalSizing, fontSize, fontSizeAdjust, fontStretch, fontStyle, fontSynthesis, fontVariant, fontVariantAlternates, fontVariantCaps, fontVariantEastAsian, fontVariantLigatures, fontVariantNumeric, fontVariantPosition, fontVariationSettings, fontWeight, gap, grid, gridAutoColumns, gridAutoFlow, gridAutoRows, gridColumn, gridColumnEnd, gridColumnGap, gridColumnStart, gridGap, gridRow, gridRowEnd, gridRowGap, gridRowStart, gridTemplate, gridTemplateAreas, gridTemplateColumns, gridTemplateRows, height, hexToRgb, hyphens, iconHeight, iconWidth, imageRendering, inputColumn, justifyContent, justifySelf, left, letterSpacing, lighten, lineHeight, lineHeightStep, linkColumn, listStyle, listStyleImage, listStylePosition, listStyleType, margin, marginBottom, marginLeft, marginRight, marginTop, marginX, marginY, maxHeight, maxWidth, maxWidthPopperModifier, minHeight, minWidth, minWidthPopperModifier, modalStyle, notifcationsStyle, numberColumn, objectFit, objectPosition, opacity, order, orphans, outline, outlineColor, outlineOffset, outlineStyle, outlineWidth, overflow, overflowBlock, overflowInline, overflowWrap, overflowX, overflowY, overscrollBehavior, overscrollBehaviorBlock, overscrollBehaviorInline, overscrollBehaviorX, overscrollBehaviorY, padding, paddingBottom, paddingLeft, paddingRight, paddingTop, paddingX, paddingY, passwordStyle, perspective, perspectiveOrigin, placeContent, placeItems, placeSelf, pointerEvents, position, preflight, propertiesStyle, pxFormatter, resize, rgbToHex, right, rotate, rowGap, rowStyle, sameWidthPopperModifier, scale, selectColumn, shouldCheckSelect, stroke, strokeWidth, tableLayout, tableStyle, tagStyle, tailwindPalette, tailwindTheme, textAlign, textColumn, textDecoration, textDecorationColor, textDecorationLine, textDecorationStyle, textDecorationThickness, textEmphasis, textEmphasisColor, textEmphasisPosition, textEmphasisStyle, textIdent, textJustify, textOpacity, textOverflow, textShadow, textTransform, textUnderlineOffset, textUnderlinePosition, textareaColumn, themeFormatter, timerStyle, titlelize, toCss, top, touchAction, transform, transformOrigin, transition, transitionDelay, transitionDuration, transitionProperty, transitionTimingFunction, useCheckboxColumn, useClickOutside, useColumns, useDashboard, useDashboardHorizontalPanel, useDashboardService, useDashboardState, useDashboardVerticalPanel, useDashoardBodyPanel, useDropdown, useEnumColumn, useFieldLayout, useFocusOutside, useFormTableContext, useInputColumn$1 as useInputColumn, useLinkColumn, useListController, useInputColumn as useNumberColumn, useSelectColumn, useSelectController, useSelectService, useTab, useTableController, useTableService, useTabsController, useTabsService, useTabsState, useTextColumn, useTextareaColumn, useTreeConfig, useTreeController, useTreeInitialState, useTreeItemContext, useTreeSelectController, useTreeService, useTreeState, userSelect, verticalAlign, visibility, whiteSpace, widows, width, wizardModalStyle, wizardStyle, wizardSummaryStyle, wordBreak, wordSpacing, zIndex, zoom };
 //# sourceMappingURL=index.module.js.map