fix: auto complete better ui

impaktfull · Oct 14, 2024 · 475d7dd · 475d7dd
1 parent 138773b
commit 475d7dd
Show file tree

Hide file tree

Showing 18 changed files with 402 additions and 158 deletions.
diff --git a/README.md b/README.md
@@ -103,6 +103,8 @@ Components are always prefixed with `ImpaktfullUi` to avoid conflicts with other
 - ImpaktfullUiTheme
 - ImpaktfullUiTooltip
 - ImpaktfullUiTouchFeedback
+- ImpaktfullUiWrap
+- ImpaktfullUiWysiwyg
 
 #### Future
 

diff --git a/...ple/lib/src/component_library/components/auto_complete/auto_complete_library_variant.dart b/...ple/lib/src/component_library/components/auto_complete/auto_complete_library_variant.dart
@@ -16,7 +16,7 @@ class AutoCompleteLibraryVariant
     return [
       ImpaktfullUiAutoComplete(
         placeholder: 'Search...',
-        builder: () {
+        leadingBuilder: () {
           if (inputs.selectedIndex.value == null) {
             return null;
           }
@@ -45,15 +45,22 @@ class AutoCompleteLibraryVariant
       const SizedBox(height: 1000),
       ImpaktfullUiAutoComplete(
         placeholder: 'Search...',
-        builder: () {
+        topBuilder: () {
           if (inputs.selectedIndex.value == null) {
-            return null;
+            return [];
           }
-          return ImpaktfullUiBadge(
-            label: 'Selected index is `${inputs.selectedIndex.value}`',
-            type: ImpaktfullUiBadgeType.neutral,
-            onCloseTap: () => inputs.selectedIndex.updateState(null),
-          );
+          return [
+            ImpaktfullUiBadge(
+              label: 'Selected index is `${inputs.selectedIndex.value}`',
+              type: ImpaktfullUiBadgeType.neutral,
+              onCloseTap: () => inputs.selectedIndex.updateState(null),
+            ),
+            ImpaktfullUiBadge(
+              label: 'Selected index is `${inputs.selectedIndex.value}`',
+              type: ImpaktfullUiBadgeType.neutral,
+              onCloseTap: () => inputs.selectedIndex.updateState(null),
+            ),
+          ];
         },
         onSearchChanged: (String value) async {
           await Future.delayed(const Duration(milliseconds: 500));

diff --git a/example/lib/src/component_library/components/wrap/wrap_library_item.dart b/example/lib/src/component_library/components/wrap/wrap_library_item.dart
@@ -0,0 +1,22 @@
+import 'package:impaktfull_ui_example/src/component_library/components/wrap/wrap_library_variant.dart';
+import 'package:impaktfull_ui_example/src/component_library/config/component_library_inputs.dart';
+import 'package:impaktfull_ui_example/src/component_library/config/component_library_item.dart';
+
+class WrapLibraryItem extends ComponentLibraryItem {
+  const WrapLibraryItem();
+
+  @override
+  String get title => 'ImpaktfullUiWrap';
+
+  @override
+  List<ComponentLibraryVariant> getComponentVariants() {
+    return [
+      const WrapLibraryVariant(),
+    ];
+  }
+}
+
+class WrapLibraryInputs extends ComponentLibraryInputs {
+  @override
+  List<ComponentLibraryInputItem> buildInputItems() => [];
+}
diff --git a/example/lib/src/component_library/components/wrap/wrap_library_variant.dart b/example/lib/src/component_library/components/wrap/wrap_library_variant.dart
@@ -0,0 +1,35 @@
+import 'package:flutter/material.dart';
+import 'package:impaktfull_ui_2/impaktfull_ui.dart';
+import 'package:impaktfull_ui_example/src/component_library/components/wrap/wrap_library_item.dart';
+import 'package:impaktfull_ui_example/src/component_library/config/component_library_item.dart';
+
+class WrapLibraryVariant
+    extends ComponentLibraryVariant<WrapLibraryPrimaryInputs> {
+  const WrapLibraryVariant();
+
+  @override
+  String get title => 'Default';
+
+  @override
+  List<Widget> build(BuildContext context, WrapLibraryPrimaryInputs inputs) {
+    return [
+      ImpaktfullUiWrap(
+        spacing: 8,
+        runSpacing: 8,
+        children: [
+          for (var i = 0; i < 100; ++i) ...[
+            ImpaktfullUiBadge(
+              type: ImpaktfullUiBadgeType.primary,
+              label: 'Item $i',
+            ),
+          ],
+        ],
+      ),
+    ];
+  }
+
+  @override
+  WrapLibraryPrimaryInputs inputs() => WrapLibraryPrimaryInputs();
+}
+
+class WrapLibraryPrimaryInputs extends WrapLibraryInputs {}
diff --git a/example/lib/src/component_library/components/wysiwyg/wysiwyg_library_item.dart b/example/lib/src/component_library/components/wysiwyg/wysiwyg_library_item.dart
@@ -2,6 +2,7 @@ import 'package:impaktfull_ui_2/impaktfull_ui.dart';
 import 'package:impaktfull_ui_example/src/component_library/components/wysiwyg/wysiwyg_library_variant.dart';
 import 'package:impaktfull_ui_example/src/component_library/config/component_library_inputs.dart';
 import 'package:impaktfull_ui_example/src/component_library/config/component_library_item.dart';
+import 'package:impaktfull_ui_example/src/component_library/inputs/component_library_boolean_input.dart';
 import 'package:impaktfull_ui_example/src/component_library/inputs/component_library_enum_input.dart';
 import 'package:impaktfull_ui_example/src/component_library/inputs/component_library_string_input.dart';
 
@@ -27,9 +28,11 @@ class WysiwygLibraryInputs extends ComponentLibraryInputs {
     options: ImpaktfullUiWysiwygType.values,
   );
   final text = ComponentLibraryStringInput('Text');
+  final showPreview = ComponentLibraryBoolInput('Show preview');
   @override
   List<ComponentLibraryInputItem> buildInputItems() => [
         previewType,
         text,
+        showPreview,
       ];
 }
diff --git a/example/lib/src/component_library/components/wysiwyg/wysiwyg_library_variant.dart b/example/lib/src/component_library/components/wysiwyg/wysiwyg_library_variant.dart
@@ -16,6 +16,7 @@ class WysiwygLibraryVariant
       ImpaktfullUiWysiwyg(
         type: inputs.previewType.value!,
         text: inputs.text.value ?? '',
+        showPreview: inputs.showPreview.value ?? false,
         onChanged: inputs.text.updateState,
       ),
     ];

diff --git a/example/lib/src/component_library/config/component_library.dart b/example/lib/src/component_library/config/component_library.dart
@@ -51,6 +51,7 @@ import 'package:impaktfull_ui_example/src/component_library/components/switch_li
 import 'package:impaktfull_ui_example/src/component_library/components/tab_bar/tab_bar_library_item.dart';
 import 'package:impaktfull_ui_example/src/component_library/components/table/table_library_item.dart';
 import 'package:impaktfull_ui_example/src/component_library/components/tooltip/tooltip_library_item.dart';
+import 'package:impaktfull_ui_example/src/component_library/components/wrap/wrap_library_item.dart';
 import 'package:impaktfull_ui_example/src/component_library/components/wysiwyg/wysiwyg_library_item.dart';
 import 'package:impaktfull_ui_example/src/component_library/config/component_library_item.dart';
 
@@ -109,6 +110,7 @@ class ComponentLibrary {
     const TabBarLibraryItem(),
     const TableLibraryItem(),
     const TooltipLibraryItem(),
+    const WrapLibraryItem(),
     const WysiwygLibraryItem(),
   ];
 }
diff --git a/lib/impaktfull_ui.dart b/lib/impaktfull_ui.dart
@@ -62,6 +62,7 @@ export 'src/components/table_header/table_header.dart';
 export 'src/components/table_header_item/table_header_item.dart';
 export 'src/components/tooltip/tooltip.dart';
 export 'src/components/interaction_feedback/touch_feedback/touch_feedback.dart';
+export 'src/components/wrap/wrap.dart';
 export 'src/components/wysiwyg/wysiwyg.dart';
 // Model
 export 'src/models/asset.dart';

diff --git a/lib/src/components/auto_complete/auto_complete.dart b/lib/src/components/auto_complete/auto_complete.dart
@@ -15,7 +15,8 @@ part 'auto_complete.describe.dart';
 class ImpaktfullUiAutoComplete<T> extends StatefulWidget
     with ComponentDescriptorMixin {
   final ImpaktfullUiAutoCompleteController? controller;
-  final Widget? Function() builder;
+  final Widget? Function()? leadingBuilder;
+  final List<Widget> Function()? topBuilder;
   final FutureOr<List<T>> Function(String searchQuery) onSearchChanged;
   final Widget Function(
     BuildContext context,
@@ -30,10 +31,11 @@ class ImpaktfullUiAutoComplete<T> extends StatefulWidget
   final ImpaktfullUiAutoCompleteTheme? theme;
 
   const ImpaktfullUiAutoComplete({
-    required this.builder,
     required this.onSearchChanged,
     required this.itemBuilder,
     required this.noDataLabel,
+    this.leadingBuilder,
+    this.topBuilder,
     this.placeholder,
     this.controller,
     this.replaceWithOverlay = false,
@@ -98,14 +100,22 @@ class _ImpaktfullUiAutoCompleteState<T>
           child: LayoutBuilder(
             builder: (context, constraints) {
               _checkIfRebuildIsNeeded(constraints);
-              final leadingChild = widget.builder();
+              final leadingChild = widget.leadingBuilder?.call();
+              final topChildren = widget.topBuilder?.call() ?? [];
               return ImpaktfullUiInputField(
                 key: _inputFieldKey,
                 placeholder: widget.placeholder,
                 focusNode: _foucsNode,
                 value: _value,
                 leadingBuilder:
                     leadingChild == null ? null : (context) => leadingChild,
+                topBuilder: topChildren.isNotEmpty
+                    ? (context) => ImpaktfullUiWrap(
+                          spacing: 4,
+                          runSpacing: 4,
+                          children: topChildren,
+                        )
+                    : null,
                 onChanged: _onChanged,
               );
             },

diff --git a/lib/src/components/badge/badge.dart b/lib/src/components/badge/badge.dart
@@ -4,7 +4,6 @@ import 'package:impaktfull_ui_2/src/components/auto_layout/auto_layout.dart';
 import 'package:impaktfull_ui_2/src/components/badge/badge.dart';
 import 'package:impaktfull_ui_2/src/components/theme/theme_component_builder.dart';
 import 'package:impaktfull_ui_2/src/components/interaction_feedback/touch_feedback/touch_feedback.dart';
-import 'package:impaktfull_ui_2/src/theme/theme.dart';
 import 'package:impaktfull_ui_2/src/util/descriptor/component_descriptor_mixin.dart';
 
 export 'badge_style.dart';
@@ -48,13 +47,15 @@ class _ImpaktfullUiBadgeState extends State<ImpaktfullUiBadge> {
     return ImpaktfullUiComponentThemeBuidler<ImpaktfullUiBadgeTheme>(
       overrideComponentTheme: widget.theme,
       builder: (context, componentTheme) {
-        final color = _getColor(theme);
-        final textStyle = _getTextStyle(theme);
+        final textColor = _getColor(componentTheme);
+        final borderColor = _getBorderColor(componentTheme);
+        final backgroundColor = _getBackgroundColor(componentTheme);
+        final textStyle = _getTextStyle(componentTheme);
         return Container(
           decoration: BoxDecoration(
-            color: color.withOpacity(0.05),
+            color: backgroundColor,
             border: Border.all(
-              color: color.withOpacity(0.33),
+              color: borderColor,
               width: 1,
             ),
             borderRadius: componentTheme.dimens.borderRadius,
@@ -76,32 +77,32 @@ class _ImpaktfullUiBadgeState extends State<ImpaktfullUiBadge> {
             crossAxisAlignment: CrossAxisAlignment.center,
             children: [
               if (widget.leading != null) ...[
-                _getWidgetOrIcon(widget.leading!, color),
+                _getWidgetOrIcon(widget.leading!, textColor),
                 SizedBox(width: widget.size.spacing),
               ],
               if (widget.label != null) ...[
                 Text(
                   widget.label!,
-                  style: textStyle.copyWith(color: color),
+                  style: textStyle.copyWith(color: textColor),
                 ),
               ],
               if (widget.onCloseTap != null) ...[
                 const SizedBox(width: 2),
                 ImpaktfullUiTouchFeedback(
-                  borderRadius: BorderRadius.circular(999),
+                  borderRadius: componentTheme.dimens.borderRadius,
                   onTap: widget.onCloseTap!,
                   child: Padding(
                     padding: const EdgeInsets.all(2),
                     child: ImpaktfullUiAssetWidget(
                       asset: componentTheme.assets.close,
                       size: 16,
-                      color: color.withOpacity(0.66),
+                      color: textColor.withOpacity(0.66),
                     ),
                   ),
                 ),
               ] else if (widget.trailing != null) ...[
                 SizedBox(width: widget.size.spacing),
-                _getWidgetOrIcon(widget.trailing!, color),
+                _getWidgetOrIcon(widget.trailing!, textColor),
               ]
             ],
           ),
@@ -110,31 +111,65 @@ class _ImpaktfullUiBadgeState extends State<ImpaktfullUiBadge> {
     );
   }
 
-  Color _getColor(ImpaktfullUiTheme theme) {
+  Color _getColor(ImpaktfullUiBadgeTheme componentTheme) {
     switch (widget.type) {
       case ImpaktfullUiBadgeType.primary:
-        return theme.colors.accent;
+        return componentTheme.colors.primaryText;
       case ImpaktfullUiBadgeType.secondary:
-        return theme.colors.secondary;
+        return componentTheme.colors.secondaryText;
       case ImpaktfullUiBadgeType.neutral:
-        return theme.colors.text;
+        return componentTheme.colors.neutralText;
       case ImpaktfullUiBadgeType.error:
-        return theme.colors.error;
+        return componentTheme.colors.errorText;
       case ImpaktfullUiBadgeType.warning:
-        return theme.colors.warning;
+        return componentTheme.colors.warningText;
       case ImpaktfullUiBadgeType.success:
-        return theme.colors.success;
+        return componentTheme.colors.successText;
     }
   }
 
-  TextStyle _getTextStyle(ImpaktfullUiTheme theme) {
+  Color _getBorderColor(ImpaktfullUiBadgeTheme componentTheme) {
+    switch (widget.type) {
+      case ImpaktfullUiBadgeType.primary:
+        return componentTheme.colors.primaryBorder;
+      case ImpaktfullUiBadgeType.secondary:
+        return componentTheme.colors.secondaryBorder;
+      case ImpaktfullUiBadgeType.neutral:
+        return componentTheme.colors.neutralBorder;
+      case ImpaktfullUiBadgeType.error:
+        return componentTheme.colors.errorBorder;
+      case ImpaktfullUiBadgeType.warning:
+        return componentTheme.colors.warningBorder;
+      case ImpaktfullUiBadgeType.success:
+        return componentTheme.colors.successBorder;
+    }
+  }
+
+  Color _getBackgroundColor(ImpaktfullUiBadgeTheme componentTheme) {
+    switch (widget.type) {
+      case ImpaktfullUiBadgeType.primary:
+        return componentTheme.colors.primaryBackground;
+      case ImpaktfullUiBadgeType.secondary:
+        return componentTheme.colors.secondaryBackground;
+      case ImpaktfullUiBadgeType.neutral:
+        return componentTheme.colors.neutralBackground;
+      case ImpaktfullUiBadgeType.error:
+        return componentTheme.colors.errorBackground;
+      case ImpaktfullUiBadgeType.warning:
+        return componentTheme.colors.warningBackground;
+      case ImpaktfullUiBadgeType.success:
+        return componentTheme.colors.successBackground;
+    }
+  }
+
+  TextStyle _getTextStyle(ImpaktfullUiBadgeTheme componentTheme) {
     switch (widget.size) {
       case ImpaktfullUiBadgeSize.small:
-        return theme.textStyles.onCanvas.text.small;
+        return componentTheme.textStyles.small;
       case ImpaktfullUiBadgeSize.medium:
-        return theme.textStyles.onCanvas.text.small;
+        return componentTheme.textStyles.small;
       case ImpaktfullUiBadgeSize.large:
-        return theme.textStyles.onCanvas.text.small;
+        return componentTheme.textStyles.small;
     }
   }
 

diff --git a/lib/src/components/badge/badge_size.dart b/lib/src/components/badge/badge_size.dart
@@ -1,22 +1,25 @@
 enum ImpaktfullUiBadgeSize {
   small(
-      horizontalPadding: 8,
-      verticalPadding: 2,
-      paddingOffset: 0,
-      spacing: 4,
-      widgetSize: 16),
+    horizontalPadding: 8,
+    verticalPadding: 2,
+    paddingOffset: 0,
+    spacing: 4,
+    widgetSize: 16,
+  ),
   medium(
-      horizontalPadding: 10,
-      verticalPadding: 2,
-      paddingOffset: 1,
-      spacing: 6,
-      widgetSize: 18),
+    horizontalPadding: 10,
+    verticalPadding: 2,
+    paddingOffset: 1,
+    spacing: 6,
+    widgetSize: 18,
+  ),
   large(
-      horizontalPadding: 12,
-      verticalPadding: 4,
-      paddingOffset: 2,
-      spacing: 6,
-      widgetSize: 24);
+    horizontalPadding: 12,
+    verticalPadding: 4,
+    paddingOffset: 2,
+    spacing: 6,
+    widgetSize: 24,
+  );
 
   final double horizontalPadding;
   final double verticalPadding;