@controleonline/ui-default 1.0.266 → 1.0.268

package/AGENTS.md

@@ -21,8 +21,9 @@
 - `requestParams` serve para contexto fixo do fluxo, nao para duplicar estado de filtro que ja vive no store.
 - `pageSize` so deve ser usado quando o contrato externo exigir e com justificativa clara no modulo.
 - `summary` e `totalItems` vem do backend/store e pertencem ao rodape interno do `DefaultTable`.
-- `add: true` abre o `DefaultForm` quando a tela nao prover `onAdd`.
-- O modo controlado continua existindo apenas para excecoes reais de integracao; o padrao do sistema e o modo store-driven.
+- `add: true` abre o `DefaultForm` quando a tela nao prover `onAdd`.
+- `rowActionsComponent` e o slot canonico para acoes por linha quando a tela precisa renderizar mais do que o botao padrao de edicao. Ele pode ser componente, funcao ou elemento React, recebe `row`, `storeName`, `openEdit`, `openRow` e `helpers`, e a largura da coluna deve ser ajustada com `rowActionsWidth` quando houver mais de uma acao.
+- O modo controlado continua existindo apenas para excecoes reais de integracao; o padrao do sistema e o modo store-driven.
 - Loadings e erros devem seguir o fluxo central do sistema, sem banners ou estados paralelos na tela.
 - O `get` do store default pode preservar o `item` atual durante refresh quando receber `__storeMeta.preserveItem = true`; use esse modo quando a tela precisa atualizar o registro sem desmontar o detalhe em exibição.
 - Explicacoes permanentes de tela devem sair do corpo principal e ir para o `DefaultTooltip`, acionado por `?`, quando houver contexto necessario para o usuario.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@controleonline/ui-default",
-  "version": "1.0.266",
+  "version": "1.0.268",
   "author": "ControleOnline",
   "description": "ControleOnline Default Quasar UI Component",
   "license": "MIT",

package/src/react/components/filters/CompactFilterSelector.js

@@ -1,5 +1,6 @@
 import React, { useCallback, useMemo, useState } from 'react';
-import {
+import {
+  Image,
   Modal,
   ScrollView,
   Text,
@@ -10,12 +11,13 @@ import {
   View,
 } from 'react-native';
 import Icon from 'react-native-vector-icons/Feather';
-import {
-  formatStoreColumnLabel,
-  resolveStoreColumn,
-  resolveStoreConfigByName,
-} from '@controleonline/ui-common/src/react/utils/storeColumns';
-import createStyles from './CompactFilterSelector.styles';
+import {
+  formatStoreColumnLabel,
+  resolveStoreColumn,
+  resolveStoreConfigByName,
+} from '@controleonline/ui-common/src/react/utils/storeColumns';
+import { isValidFeatherIcon } from '../inputs/defaultInputUtils';
+import createStyles from './CompactFilterSelector.styles';
 
 const buildTheme = ({ accentColor, themeColors = {} }) => ({
   accentColor: accentColor,
@@ -117,8 +119,23 @@ const CompactFilterSelector = ({
     field,
     store,
   });
-  const resolvedLabelCaption = labelCaption || storeFieldLabel;
-  const resolvedTitle = title || storeFieldLabel;
+  const resolvedLabelCaption = labelCaption || storeFieldLabel;
+  const resolvedTitle = title || storeFieldLabel;
+  const selectedOption = useMemo(
+    () => options.find(option => option?.key === selectedKey),
+    [options, selectedKey],
+  );
+  const selectedOptionColor = normalizeText(selectedOption?.color);
+  const selectedOptionIcon = normalizeText(selectedOption?.icon);
+  const selectedOptionIconName = isValidFeatherIcon(selectedOptionIcon)
+    ? selectedOptionIcon
+    : '';
+  const triggerIconName = active && selectedOptionIconName
+    ? selectedOptionIconName
+    : icon;
+  const triggerIconColor = active
+    ? selectedOptionColor || resolvedTheme.activeIconColor
+    : resolvedTheme.iconColor;
 
   const closeModal = useCallback(() => {
     setVisible(false);
@@ -201,22 +218,31 @@ const CompactFilterSelector = ({
         disabled={disabled}
         onPress={openModal}
       >
-        <View style={[styles.iconWrap, active ? styles.iconWrapActive : null]}>
-          <Icon
-            name={icon}
-            size={dense ? 14 : 15}
-            color={active ? resolvedTheme.activeIconColor : resolvedTheme.iconColor}
-          />
-        </View>
+        <View style={[styles.iconWrap, active ? styles.iconWrapActive : null]}>
+          {active && selectedOption?.image ? (
+            <Image
+              source={selectedOption.image}
+              style={styles.triggerIconImage}
+              resizeMode="contain"
+            />
+          ) : (
+            <Icon
+              name={triggerIconName}
+              size={dense ? 14 : 15}
+              color={triggerIconColor}
+            />
+          )}
+        </View>
 
         <View style={styles.textWrap}>
           {!!resolvedLabelCaption && (
             <Text
               numberOfLines={1}
               style={[
-                styles.triggerCaption,
-                active ? styles.triggerCaptionActive : null,
-              ]}
+                styles.triggerCaption,
+                active ? styles.triggerCaptionActive : null,
+                active && selectedOptionColor ? { color: selectedOptionColor } : null,
+              ]}
             >
               {resolvedLabelCaption}
             </Text>
@@ -224,7 +250,11 @@ const CompactFilterSelector = ({
 
           <Text
             numberOfLines={1}
-            style={[styles.triggerText, active ? styles.triggerTextActive : null]}
+            style={[
+              styles.triggerText,
+              active ? styles.triggerTextActive : null,
+              active && selectedOptionColor ? { color: selectedOptionColor } : null,
+            ]}
           >
             {label}
           </Text>
@@ -270,33 +300,74 @@ const CompactFilterSelector = ({
                   ) : null}
 
                   {filteredOptions.map(option => {
-                    const isSelected = option.key === selectedKey;
-
-                    return (
+                    const isSelected = option.key === selectedKey;
+                    const optionColor = normalizeText(option?.color);
+                    const optionIcon = normalizeText(option?.icon);
+                    const optionIconName = isValidFeatherIcon(optionIcon)
+                      ? optionIcon
+                      : '';
+                    const shouldRenderOptionFallbackText = Boolean(
+                      !option?.image &&
+                      !optionIconName &&
+                      optionColor &&
+                      normalizeText(option?.label),
+                    );
+                    const hasOptionVisual = Boolean(option?.image || optionIconName || shouldRenderOptionFallbackText);
+
+                    return (
                       <TouchableOpacity
                         key={option.key}
                         style={[
                           styles.modalOption,
                           isSelected ? styles.modalOptionActive : null,
                         ]}
-                        activeOpacity={0.9}
-                        onPress={() => handleSelect(option.key)}
-                      >
-                        <Text
-                          style={[
-                            styles.modalOptionText,
-                            isSelected ? styles.modalOptionTextActive : null,
-                          ]}
-                        >
-                          {option.label}
-                        </Text>
+                        activeOpacity={0.9}
+                        onPress={() => handleSelect(option.key)}
+                      >
+                        {option?.image ? (
+                          <Image
+                            source={option.image}
+                            style={styles.modalOptionImage}
+                            resizeMode="contain"
+                          />
+                        ) : optionIconName ? (
+                          <Icon
+                            style={styles.modalOptionIcon}
+                            name={optionIconName}
+                            size={16}
+                            color={optionColor || resolvedTheme.iconColor}
+                          />
+                        ) : shouldRenderOptionFallbackText ? (
+                          <Text
+                            style={[
+                              styles.modalOptionFallbackText,
+                              { color: optionColor },
+                            ]}
+                            numberOfLines={1}
+                          >
+                            {option.label}
+                          </Text>
+                        ) : null}
+
+                        {shouldRenderOptionFallbackText ? null : (
+                          <Text
+                            style={[
+                              styles.modalOptionText,
+                              isSelected ? styles.modalOptionTextActive : null,
+                              optionColor ? { color: optionColor } : null,
+                              !hasOptionVisual ? styles.modalOptionTextNoVisual : null,
+                            ]}
+                          >
+                            {option.label}
+                          </Text>
+                        )}
 
                         {isSelected ? (
-                          <Icon
-                            name="check"
-                            size={16}
-                            color={resolvedTheme.activeIconColor}
-                          />
+                          <Icon
+                            name="check"
+                            size={16}
+                            color={optionColor || resolvedTheme.activeIconColor}
+                          />
                         ) : null}
                       </TouchableOpacity>
                     );

package/src/react/components/filters/CompactFilterSelector.styles.js

@@ -29,9 +29,14 @@ const createStyles = (theme, dense = false, windowWidth = 0) => {
       justifyContent: 'center',
       backgroundColor: theme.iconBackgroundColor,
     },
-    iconWrapActive: {
-      backgroundColor: theme.activeIconBackgroundColor,
-    },
+    iconWrapActive: {
+      backgroundColor: theme.activeIconBackgroundColor,
+    },
+    triggerIconImage: {
+      width: dense ? 16 : 18,
+      height: dense ? 16 : 18,
+      flexShrink: 0,
+    },
     textWrap: {
       flex: 1,
       minWidth: 0,
@@ -105,7 +110,7 @@ const createStyles = (theme, dense = false, windowWidth = 0) => {
       fontWeight: '700',
     },
     modalOption: {
-      minHeight: 50,
+      minHeight: 50,
       borderWidth: 1,
       borderColor: theme.optionBorderColor,
       borderRadius: 16,
@@ -115,18 +120,35 @@ const createStyles = (theme, dense = false, windowWidth = 0) => {
       flexDirection: 'row',
       alignItems: 'center',
       justifyContent: 'space-between',
-      gap: 8,
-    },
-    modalOptionActive: {
-      borderColor: theme.accentColor,
-      backgroundColor: theme.activeBackgroundColor,
+      gap: 8,
+    },
+    modalOptionIcon: {
+      flexShrink: 0,
+    },
+    modalOptionImage: {
+      width: 18,
+      height: 18,
+      flexShrink: 0,
+    },
+    modalOptionFallbackText: {
+      flex: 1,
+      minWidth: 0,
+      fontSize: 14,
+      fontWeight: '800',
+    },
+    modalOptionActive: {
+      borderColor: theme.accentColor,
+      backgroundColor: theme.activeBackgroundColor,
     },
     modalOptionText: {
       flex: 1,
       fontSize: 14,
-      fontWeight: '700',
-      color: theme.textColor,
-    },
+      fontWeight: '700',
+      color: theme.textColor,
+    },
+    modalOptionTextNoVisual: {
+      marginLeft: 0,
+    },
     modalOptionTextActive: {
       color: theme.optionSelectedTextColor,
     },

package/src/react/components/inputs/DefaultInput.js

@@ -1,19 +1,22 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { Text, TextInput, TouchableOpacity, View } from 'react-native';
+import { Image, Text, TextInput, TouchableOpacity, View } from 'react-native';
 import Icon from 'react-native-vector-icons/Feather';
-import {
+import {
+  buildReadPresentationStyles,
   getColumnKey,
   isDateLikeColumn,
   isEditableColumn,
-  normalizeText,
-  resolveCellText,
-  resolveEditValue,
+  isValidFeatherIcon,
+  normalizeText,
+  resolveCellPresentation,
+  resolveCellText,
+  resolveEditValue,
 } from './defaultInputUtils';
 import DefaultDateInput from './DefaultDateInput';
 import DefaultSelect from './DefaultSelect';
-import styles from './DefaultInput.styles';
-
-const DefaultInput = ({
+import styles from './DefaultInput.styles';
+
+const DefaultInput = ({
   accentColor = '#2563EB',
   autoFocus = true,
   autoSave = true,
@@ -48,8 +51,19 @@ const DefaultInput = ({
     [column, row, value],
   );
   const [draftValue, setDraftValue] = useState(editValue);
-  const resolvedLabel =
-    displayValue ?? resolveCellText({ column, columns, row, storeName, value });
+  const resolvedLabel =
+    displayValue ?? resolveCellText({ column, columns, row, storeName, value });
+  const readPresentation = useMemo(
+    () => resolveCellPresentation({ column, columns, row, storeName, value }),
+    [column, columns, row, storeName, value],
+  );
+  const readPresentationStyles = useMemo(
+    () => buildReadPresentationStyles({
+      ...readPresentation,
+      label: resolvedLabel,
+    }),
+    [readPresentation, resolvedLabel],
+  );
 
   useEffect(() => {
     setDraftValue(editValue);
@@ -128,31 +142,81 @@ const DefaultInput = ({
     if (!autoSave) onChangeValue?.(nextValue);
   };
 
-  if (!editing && !isForm) {
-    return (
-      <View style={[styles.wrap, containerStyle]}>
-        {showLabel ? <Text style={styles.fieldLabel}>{label || column?.label || fieldName}</Text> : null}
-        <TouchableOpacity
+  if (!editing && !isForm) {
+    const readIconName = isValidFeatherIcon(readPresentation.icon)
+      ? readPresentation.icon
+      : '';
+    const shouldRenderIconFallbackText = Boolean(
+      readPresentationStyles.hasDecoration &&
+      !readIconName &&
+      readPresentationStyles.color &&
+      normalizeText(resolvedLabel) &&
+      resolvedLabel !== '-',
+    );
+
+    return (
+      <View style={[styles.wrap, containerStyle]}>
+        {showLabel ? <Text style={styles.fieldLabel}>{label || column?.label || fieldName}</Text> : null}
+        <TouchableOpacity
           style={styles.readButton}
           activeOpacity={canEdit ? 0.78 : 1}
-          disabled={!canEdit}
-          onPress={() => onStartEditing?.()}
-        >
-          <Text
-            style={[
-              styles.readText,
-              resolvedLabel === '-' ? styles.mutedText : null,
-              readTextStyle,
-            ]}
-            numberOfLines={numberOfLines}
-          >
-            {column?.prefix || ''}
-            {resolvedLabel || '-'}
-            {column?.sufix || column?.suffix || ''}
-          </Text>
-          {saving ? (
-            <Text style={[styles.savingText, { color: accentColor }]}>Salvando</Text>
-          ) : canEdit ? (
+          disabled={!canEdit}
+          onPress={() => onStartEditing?.()}
+        >
+          {shouldRenderIconFallbackText ? (
+            <Text
+              style={[
+                styles.readText,
+                styles.readTextBadge,
+                readPresentationStyles.color ? { color: readPresentationStyles.color } : null,
+                readTextStyle,
+              ]}
+              numberOfLines={numberOfLines}
+            >
+              {resolvedLabel}
+            </Text>
+          ) : (
+            <View
+              style={[
+                styles.readValueWrap,
+                readPresentationStyles.hasDecoration ? styles.readBadge : null,
+                readPresentationStyles.badgeStyle,
+              ]}
+            >
+              {readPresentation.image ? (
+                <Image
+                  source={readPresentation.image}
+                  style={styles.readImage}
+                  resizeMode="contain"
+                />
+              ) : null}
+              {readPresentationStyles.hasDecoration && readIconName && readPresentationStyles.color ? (
+                <Icon
+                  style={styles.readBadgeIcon}
+                  name={readIconName}
+                  size={12}
+                  color={readPresentationStyles.color}
+                />
+              ) : null}
+              <Text
+                style={[
+                  styles.readText,
+                  readPresentationStyles.hasDecoration ? styles.readBadgeText : null,
+                  resolvedLabel === '-' ? styles.mutedText : null,
+                  readPresentationStyles.color ? { color: readPresentationStyles.color } : null,
+                  readTextStyle,
+                ]}
+                numberOfLines={numberOfLines}
+              >
+                {column?.prefix || ''}
+                {resolvedLabel || '-'}
+                {column?.sufix || column?.suffix || ''}
+              </Text>
+            </View>
+          )}
+          {saving ? (
+            <Text style={[styles.savingText, { color: accentColor }]}>Salvando</Text>
+          ) : canEdit ? (
             <Icon style={styles.editIcon} name="edit-2" size={13} color="#64748B" />
           ) : null}
         </TouchableOpacity>

package/src/react/components/inputs/DefaultInput.styles.js

@@ -13,6 +13,44 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     gap: 6,
   },
+  readValueWrap: {
+    flex: 1,
+    minWidth: 0,
+    maxWidth: '100%',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 5,
+  },
+  readBadge: {
+    flex: 0,
+    alignSelf: 'flex-start',
+    minWidth: 22,
+    minHeight: 22,
+    maxWidth: '100%',
+    borderWidth: 1,
+    borderRadius: 6,
+    paddingHorizontal: 7,
+    paddingVertical: 2,
+  },
+  readBadgeText: {
+    flex: 0,
+    flexShrink: 0,
+    maxWidth: '100%',
+    fontSize: 11,
+    fontWeight: '800',
+  },
+  readTextBadge: {
+    flex: 1,
+    maxWidth: '100%',
+  },
+  readBadgeIcon: {
+    flexShrink: 0,
+  },
+  readImage: {
+    width: 16,
+    height: 16,
+    flexShrink: 0,
+  },
   readButtonForm: {
     minHeight: 34,
     borderWidth: 1,
@@ -25,8 +63,8 @@ const styles = StyleSheet.create({
     flex: 1,
     minWidth: 0,
     color: '#0F172A',
-    fontSize: 12,
-    fontWeight: '700',
+    fontSize: 13,
+    fontWeight: '600',
   },
   mutedText: {
     color: '#94A3B8',
@@ -62,8 +100,8 @@ const styles = StyleSheet.create({
     borderRadius: 8,
     paddingHorizontal: 8,
     color: '#0F172A',
-    fontSize: 12,
-    fontWeight: '700',
+    fontSize: 13,
+    fontWeight: '600',
     backgroundColor: '#FFFFFF',
   },
   formInput: {