@controleonline/ui-default 1.0.275 → 1.0.277

package/src/react/components/table/DefaultTable.styleGroup1.js

@@ -0,0 +1,335 @@
+import {Platform} from 'react-native';
+import {shadow} from './DefaultTable.shadow';
+export default {
+wrap: {
+    flex: 1,
+    width: '100%',
+    minHeight: 0,
+    borderRadius: 8,
+    overflow: 'hidden',
+    position: 'relative',
+  },
+toolbar: {
+    minHeight: 52,
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+    borderBottomWidth: 1,
+    flexDirection: 'row',
+    flexWrap: 'nowrap',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    gap: 6,
+    zIndex: 10,
+  },
+toolbarWithCompactTotal: {
+    flexWrap: 'wrap',
+  },
+toolbarLeft: {
+    flex: 1,
+    width: '100%',
+    flexDirection: 'row',
+    flexWrap: 'nowrap',
+    alignItems: 'center',
+    flexShrink: 0,
+    gap: 6,
+    minWidth: 0,
+    justifyContent: 'space-between',
+  },
+toolbarActionGroup: {
+    flexDirection: 'row',
+    flexWrap: 'nowrap',
+    alignItems: 'center',
+    gap: 8,
+    flexShrink: 0,
+    marginLeft: 'auto',
+  },
+toolbarCompactLead: {
+    flex: 1,
+    flexBasis: '100%',
+    minWidth: 0,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    gap: 6,
+  },
+toolbarCompactActions: {
+    width: '100%',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    gap: 6,
+    flexShrink: 0,
+    marginLeft: 0,
+  },
+toolbarSearch: {
+    width: 260,
+    maxWidth: 360,
+    flexShrink: 1,
+  },
+toolbarSearchButton: {
+    minWidth: 30,
+    width: 30,
+    height: 30,
+    borderRadius: 15,
+    borderWidth: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+  },
+toolbarCompactSearch: {
+    flex: 1,
+    width: 'auto',
+    maxWidth: '100%',
+    minWidth: 104,
+  },
+toolbarCountPill: {
+    minWidth: 0,
+    maxWidth: 112,
+    height: 28,
+    borderRadius: 999,
+    paddingHorizontal: 10,
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 1,
+  },
+toolbarCountText: {
+    fontSize: 9,
+    fontWeight: '900',
+  },
+toolbarButton: {
+    minWidth: 36,
+    height: 36,
+    borderRadius: 8,
+    paddingHorizontal: 10,
+    borderWidth: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 4,
+  },
+toolbarButtonActive: {
+  },
+toolbarAddButton: {
+    minWidth: 36,
+    width: 36,
+    paddingHorizontal: 0,
+  },
+floatingAddButton: {
+    position: 'absolute',
+    right: 16,
+    bottom: 16,
+    width: 52,
+    height: 52,
+    borderRadius: 26,
+    alignItems: 'center',
+    justifyContent: 'center',
+    zIndex: 30,
+    ...shadow,
+  },
+bottomAddBar: {
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    borderTopWidth: 1,
+    borderTopColor: '#E2E8F0',
+    backgroundColor: '#FFFFFF',
+    zIndex: 14,
+    ...shadow,
+    ...Platform.select({
+      web: {
+        position: 'sticky',
+        bottom: 0,
+      },
+      default: {},
+    }),
+  },
+bottomAddButton: {
+    minHeight: 46,
+    borderRadius: 8,
+    paddingHorizontal: 16,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 8,
+  },
+bottomAddText: {
+    fontSize: 14,
+    fontWeight: '900',
+  },
+toolbarBadgeText: {
+    fontSize: 10,
+    fontWeight: '900',
+  },
+toolbarActionLabel: {
+    flexShrink: 1,
+    fontSize: 11,
+    fontWeight: '800',
+    letterSpacing: 0.2,
+  },
+columnMenu: {
+    position: 'absolute',
+    right: 8,
+    top: 36,
+    width: 230,
+    maxHeight: 520,
+    borderWidth: 1,
+    borderColor: '#CBD5E1',
+    borderRadius: 10,
+    backgroundColor: '#FFFFFF',
+    paddingVertical: 6,
+    zIndex: 50,
+    ...shadow,
+  },
+columnMenuItem: {
+    minHeight: 32,
+    paddingHorizontal: 10,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+columnMenuText: {
+    flex: 1,
+    color: '#0F172A',
+    fontSize: 12,
+    fontWeight: '700',
+  },
+columnMenuModalCard: {
+    width: 250,
+    maxWidth: 250,
+    maxHeight: '78%',
+  },
+columnMenuModalBody: {
+    maxHeight: 520,
+  },
+searchModalCard: {
+    width: '100%',
+    maxWidth: 420,
+  },
+filtersModalCard: {
+    width: '100%',
+    maxWidth: 560,
+  },
+debugModalCard: {
+    width: '100%',
+    maxWidth: 760,
+  },
+filtersModalBody: {
+    maxHeight: 520,
+  },
+filtersModalList: {
+    padding: 14,
+    gap: 12,
+  },
+filtersModalField: {
+    width: '100%',
+    gap: 4,
+  },
+filtersModalInput: {
+    width: '100%',
+  },
+searchModalBody: {
+    padding: 14,
+  },
+searchModalInput: {
+    width: '100%',
+    maxWidth: '100%',
+  },
+columnMenuModalList: {
+    paddingVertical: 6,
+  },
+debugModalBody: {
+    maxHeight: 560,
+  },
+debugModalContent: {
+    padding: 14,
+    gap: 12,
+  },
+debugSectionHeader: {
+    minHeight: 30,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: 8,
+  },
+debugSectionTitle: {
+    fontSize: 11,
+    fontWeight: '900',
+    textTransform: 'uppercase',
+  },
+debugCopyButton: {
+    height: 28,
+    borderRadius: 8,
+    borderWidth: 1,
+    paddingHorizontal: 9,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 5,
+  },
+debugCopyButtonText: {
+    fontSize: 11,
+    fontWeight: '800',
+  },
+debugCodeBlock: {
+    minHeight: 92,
+    borderWidth: 1,
+    borderRadius: 8,
+    padding: 10,
+    backgroundColor: '#F8FAFC',
+    fontSize: 11,
+    lineHeight: 16,
+    fontFamily: Platform.select({
+      ios: 'Menlo',
+      android: 'monospace',
+      default: 'monospace',
+    }),
+  },
+scroll: {
+    flex: 1,
+    width: '100%',
+    minHeight: 0,
+  },
+body: {
+    flex: 1,
+    width: '100%',
+    minHeight: 0,
+    overflow: 'hidden',
+  },
+horizontalScrollContent: {
+    flexGrow: 1,
+    minWidth: '100%',
+  },
+content: {
+    flex: 1,
+    width: '100%',
+    minWidth: '100%',
+    minHeight: 0,
+  },
+headerRow: {
+    minHeight: 40,
+    width: '100%',
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#F8FAFC',
+    borderBottomWidth: 1,
+    borderBottomColor: '#E2E8F0',
+  },
+filterRow: {
+    minHeight: 46,
+    width: '100%',
+    flexDirection: 'row',
+    alignItems: 'stretch',
+    backgroundColor: '#FFFFFF',
+    borderBottomWidth: 1,
+    borderBottomColor: '#E2E8F0',
+  },
+row: {
+    minHeight: 48,
+    width: '100%',
+    flexDirection: 'row',
+    alignItems: 'stretch',
+    borderBottomWidth: 1,
+    borderBottomColor: '#EEF2F7',
+  }
+};

package/src/react/components/table/DefaultTable.styleGroup2.js

@@ -0,0 +1,347 @@
+import {Platform} from 'react-native';
+import {shadow} from './DefaultTable.shadow';
+export default {
+cell: {
+    minWidth: 118,
+    flexBasis: 118,
+    flexGrow: 1,
+    flexShrink: 0,
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+    justifyContent: 'center',
+    borderRightWidth: 0,
+  },
+identityCell: {
+    minWidth: 76,
+    flexBasis: 76,
+    flexGrow: 0.62,
+  },
+stickyIdentityCell: {
+    backgroundColor: '#FFFFFF',
+    zIndex: 5,
+    ...Platform.select({
+      web: {
+        position: 'sticky',
+        left: 0,
+      },
+      default: {},
+    }),
+  },
+stickyActionsCell: {
+    backgroundColor: '#FFFFFF',
+    zIndex: 5,
+    ...Platform.select({
+      web: {
+        position: 'sticky',
+        right: 0,
+      },
+      default: {},
+    }),
+  },
+stickyHeaderCell: {
+    zIndex: 8,
+  },
+pinnedIdentityCell: {
+    backgroundColor: '#FFFFFF',
+    zIndex: 6,
+    ...Platform.select({
+      web: {
+        boxShadow: '2px 0 0 rgba(226,232,240,0.9)',
+        position: 'relative',
+      },
+      default: {},
+    }),
+  },
+pinnedActionsCell: {
+    backgroundColor: '#FFFFFF',
+    zIndex: 6,
+    ...Platform.select({
+      web: {
+        boxShadow: '-2px 0 0 rgba(226,232,240,0.9)',
+        position: 'relative',
+      },
+      default: {},
+    }),
+  },
+moneyCell: {
+    minWidth: 132,
+    flexBasis: 132,
+    flexGrow: 0.9,
+  },
+headerText: {
+    fontSize: 11,
+    fontWeight: '800',
+    letterSpacing: 0,
+    textTransform: 'uppercase',
+  },
+sortableHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+  },
+filterCell: {
+    paddingVertical: 4,
+    backgroundColor: '#FFFFFF',
+  },
+filterInput: {
+    height: 30,
+    borderWidth: 1,
+    borderColor: '#CBD5E1',
+    borderRadius: 8,
+    paddingHorizontal: 8,
+    color: '#0F172A',
+    backgroundColor: '#FFFFFF',
+    fontSize: 11,
+    fontWeight: '700',
+  },
+cellText: {
+    fontSize: 13,
+    fontWeight: '600',
+  },
+mutedCellText: {
+    color: '#94A3B8',
+  },
+editableCell: {
+    backgroundColor: '#FFFFFF',
+  },
+editingCell: {
+    paddingVertical: 4,
+    backgroundColor: '#EFF6FF',
+  },
+input: {
+    flex: 1,
+    height: 32,
+    borderWidth: 1,
+    borderColor: '#93C5FD',
+    borderRadius: 8,
+    paddingHorizontal: 8,
+    color: '#0F172A',
+    fontSize: 12,
+    fontWeight: '700',
+    backgroundColor: '#FFFFFF',
+  },
+savingText: {
+    marginTop: 2,
+    color: '#64748B',
+    fontSize: 9,
+    fontWeight: '800',
+    textTransform: 'uppercase',
+  },
+actionsCell: {
+    minWidth: 60,
+    width: 60,
+    flexBasis: 60,
+    flexGrow: 0,
+    flexShrink: 0,
+    maxWidth: 72,
+    alignItems: 'center',
+  },
+rowActionsGroup: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 6,
+    width: '100%',
+  },
+iconButton: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+    borderColor: '#E2E8F0',
+    backgroundColor: '#F8FAFC',
+  },
+cancelButton: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#FFFFFF',
+    borderWidth: 1,
+    borderColor: '#CBD5E1',
+  },
+cardsScroll: {
+    flex: 1,
+    width: '100%',
+    minHeight: 0,
+    ...Platform.select({
+      web: {
+        overflowY: 'auto',
+      },
+      default: {},
+    }),
+  },
+cardsGrid: {
+    paddingVertical: 10,
+    paddingHorizontal: 0,
+    gap: 8,
+    flexGrow: 1,
+    width: '100%',
+    alignSelf: 'stretch',
+  },
+cardsGridWithBottomAdd: {
+    paddingBottom: 86,
+  },
+tableList: {
+    flex: 1,
+    width: '100%',
+    minHeight: 0,
+  },
+tableListContent: {
+    flexGrow: 1,
+    width: '100%',
+  },
+cardItem: {
+    position: 'relative',
+    flex: 1,
+    flexBasis: 0,
+    flexGrow: 1,
+    minWidth: 0,
+    width: '100%',
+    maxWidth: '100%',
+    alignSelf: 'stretch',
+  },
+cardItemWithActions: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+cardContent: {
+    flex: 1,
+    minWidth: 0,
+    width: '100%',
+  },
+cardActions: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    gap: 6,
+    flexShrink: 0,
+  },
+cardActionGroup: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    alignSelf: 'flex-end',
+    gap: 6,
+  },
+defaultCard: {
+    borderWidth: 1,
+    borderColor: '#E2E8F0',
+    borderRadius: 10,
+    backgroundColor: '#FFFFFF',
+    padding: 12,
+    gap: 8,
+    width: '100%',
+  },
+defaultCardLine: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+  },
+defaultCardLabel: {
+    width: 130,
+    color: '#64748B',
+    fontSize: 10,
+    fontWeight: '900',
+    textTransform: 'uppercase',
+  },
+defaultCardValue: {
+    flex: 1,
+    color: '#0F172A',
+    fontSize: 12,
+    fontWeight: '700',
+  },
+cardEditButton: {
+    position: 'absolute',
+    top: 8,
+    right: 8,
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+    borderColor: '#E2E8F0',
+    backgroundColor: '#F8FAFC',
+  },
+emptyBox: {
+    padding: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 8,
+  },
+footerBar: {
+    minHeight: 40,
+    paddingHorizontal: 8,
+    paddingVertical: 5,
+    borderTopWidth: 1,
+    borderTopColor: '#E2E8F0',
+    backgroundColor: '#FFFFFF',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: 6,
+    zIndex: 12,
+    ...Platform.select({
+      web: {
+        position: 'sticky',
+        bottom: 0,
+      },
+      default: {},
+    }),
+  },
+footerSummaryList: {
+    flex: 1,
+    minWidth: 0,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+  },
+footerSummaryItem: {
+    flex: 1,
+    minWidth: 0,
+    flexBasis: 0,
+    flexShrink: 1,
+    paddingHorizontal: 4,
+  },
+footerSummaryLabel: {
+    color: '#64748B',
+    fontSize: 9,
+    fontWeight: '900',
+    textTransform: 'uppercase',
+  },
+footerSummaryValue: {
+    color: '#0F172A',
+    fontSize: 13,
+    fontWeight: '900',
+  },
+footerCountPill: {
+    maxWidth: '100%',
+    minWidth: 0,
+    flexShrink: 1,
+    borderRadius: 999,
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+  },
+footerCountText: {
+    fontSize: 11,
+    fontWeight: '900',
+  },
+emptyText: {
+    color: '#64748B',
+    fontSize: 12,
+    fontWeight: '700',
+  },
+modalOverlay: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 16,
+    backgroundColor: 'rgba(15,23,42,0.42)',
+  }
+};