feat: Indicator components #314
Conversation
The FwbIndicator component is added to provide a customizable indicator element. It accepts a type prop to specify the indicator color and a class prop for additional styling. The component uses computed properties and the useMergeClasses composable to generate the appropriate CSS classes based on the props. Note: This commit message follows the established convention of using a prefix (feat) to indicate a new feature or component being added.
This commit adds the Vue Indicator component, which allows for the creation of customizable indicators with different colors and positions. The component is implemented using Vue.js and Tailwind CSS, and it provides examples for default indicators and indicator positions. This addition enhances the functionality and visual appeal of the application. Note: This commit message follows the established convention of using a prefix (feat) to indicate a new feature or component being added.
This commit adds the FwbIndicator component, which provides a customizable indicator element. It accepts a type prop to specify the indicator color and a class prop for additional styling. The component is implemented using Vue.js and Tailwind CSS, and it enhances the functionality and visual appeal of the application. Note: This commit message follows the established convention of using a prefix (feat) to indicate a new feature or component being added.
|
Important Review skippedAuto reviews are limited to specific labels. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the WalkthroughThis update introduces the new Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant App
participant FwbIndicator
User->>App: Requests status indicator
App->>FwbIndicator: Render indicator with type
FwbIndicator-->>App: Return styled indicator
App-->>User: Display indicator
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configuration File (
|
✅ Deploy Preview for sensational-seahorse-8635f8 ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 12
Outside diff range, codebase verification and nitpick comments (1)
docs/components/indicator.md (1)
6-8: Fix heading level.The heading level should increment by one level at a time. Change the h4 to h2.
- #### Use the indicator component to show a number count, account status, or as a loading label positioned relative to the parent component coded with Tailwind CSS + ## Use the indicator component to show a number count, account status, or as a loading label positioned relative to the parent component coded with Tailwind CSSTools
Markdownlint
8-8: Expected: h2; Actual: h4
Heading levels should only increment by one level at a time(MD001, heading-increment)
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (6)
- docs/.vitepress/config.mts (1 hunks)
- docs/components/indicator.md (1 hunks)
- docs/components/indicator/examples/FwbIndicatorExample.vue (1 hunks)
- docs/components/indicator/examples/FwbIndicatorPositionExample.vue (1 hunks)
- src/components/FwbIndicator/FwbIndicator.vue (1 hunks)
- src/index.ts (1 hunks)
Files skipped from review due to trivial changes (2)
- docs/.vitepress/config.mts
- src/index.ts
Additional context used
GitHub Check: lint (18.x)
docs/components/indicator/examples/FwbIndicatorExample.vue
[warning] 2-2:
Expected indentation of 2 spaces but found 0 spaces
[warning] 12-12:
Expected indentation of 2 spaces but found 0 spacesdocs/components/indicator/examples/FwbIndicatorPositionExample.vue
[warning] 2-2:
Expected indentation of 2 spaces but found 0 spaces
[warning] 3-3:
'type' should be on a new line
[warning] 3-3:
Expected 1 line break after opening tag (<fwb-indicator>), but no line breaks found
[warning] 3-3:
Expected 1 line break before closing tag (</fwb-indicator>), but no line breaks found
[warning] 4-4:
'type' should be on a new line
[warning] 4-4:
Expected 1 line break after opening tag (<fwb-indicator>), but no line breaks found
[warning] 4-4:
Expected 1 line break before closing tag (</fwb-indicator>), but no line breaks found
[warning] 5-5:
'type' should be on a new line
Markdownlint
docs/components/indicator.md
8-8: Expected: h2; Actual: h4
Heading levels should only increment by one level at a time(MD001, heading-increment)
Additional comments not posted (9)
docs/components/indicator/examples/FwbIndicatorExample.vue (1)
15-18: LGTM!The script section is straightforward and doesn't have any issues.
src/components/FwbIndicator/FwbIndicator.vue (2)
1-5: LGTM!The template section is straightforward and doesn't have any issues.
36-40: LGTM!The computed property is well-structured and doesn't have any issues.
docs/components/indicator/examples/FwbIndicatorPositionExample.vue (1)
15-18: LGTM!The script section is straightforward and doesn't have any issues.
docs/components/indicator.md (5)
1-4: LGTM!The imports and script setup are correct and necessary for the documentation examples.
12-14: LGTM!The tip section is clear and the reference link is correct.
16-18: LGTM!The description of the indicator component is clear and provides accurate information.
20-37: LGTM!The default indicator example is clear and the code is correct.
39-60: LGTM!The indicator position example is clear and the code is correct.
| <fwb-indicator type="purple" /> | ||
| <fwb-indicator type="yellow" /> | ||
| <fwb-indicator type="teal" /> | ||
| </div> |
There was a problem hiding this comment.
Fix indentation issues.
Expected indentation of 2 spaces but found 0 spaces.
-</div>
+ </div>Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| </div> | |
| </div> |
Tools
GitHub Check: lint (18.x)
[warning] 12-12:
Expected indentation of 2 spaces but found 0 spaces
| @@ -0,0 +1,18 @@ | |||
| <template> | |||
| <div class="vp-raw flex gap-4"> | |||
There was a problem hiding this comment.
Fix indentation issues.
Expected indentation of 2 spaces but found 0 spaces.
-<div class="vp-raw flex gap-4">
+ <div class="vp-raw flex gap-4">Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <div class="vp-raw flex gap-4"> | |
| <div class="vp-raw flex gap-4"> |
Tools
GitHub Check: lint (18.x)
[warning] 2-2:
Expected indentation of 2 spaces but found 0 spaces
| import { computed } from 'vue' | ||
| import { useMergeClasses } from '@/composables/useMergeClasses' | ||
|
|
||
| type IndıcatorType = 'default' | 'dark' | 'blue' | 'green' | 'red' | 'indigo' | 'purple' | 'yellow' | 'teal' |
There was a problem hiding this comment.
Fix typo in type definition.
The type definition IndıcatorType has a typo. It should be IndicatorType.
-type IndıcatorType = 'default' | 'dark' | 'blue' | 'green' | 'red' | 'indigo' | 'purple' | 'yellow' | 'teal'
+type IndicatorType = 'default' | 'dark' | 'blue' | 'green' | 'red' | 'indigo' | 'purple' | 'yellow' | 'teal'Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| type IndıcatorType = 'default' | 'dark' | 'blue' | 'green' | 'red' | 'indigo' | 'purple' | 'yellow' | 'teal' | |
| type IndicatorType = 'default' | 'dark' | 'blue' | 'green' | 'red' | 'indigo' | 'purple' | 'yellow' | 'teal' |
| @@ -0,0 +1,18 @@ | |||
| <template> | |||
| <div class="relative w-56 h-56 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700"> | |||
| <fwb-indicator class="absolute top-0 -translate-y-1/2 -translate-x-1/2 text-xs w-auto px-2 h-4 text-white" type="blue">top-left</fwb-indicator> | |||
There was a problem hiding this comment.
Fix formatting issues.
The type attribute should be on a new line, and there should be line breaks after the opening tag and before the closing tag.
- <fwb-indicator class="absolute top-0 -translate-y-1/2 -translate-x-1/2 text-xs w-auto px-2 h-4 text-white" type="blue">top-left</fwb-indicator>
+ <fwb-indicator
+ class="absolute top-0 -translate-y-1/2 -translate-x-1/2 text-xs w-auto px-2 h-4 text-white"
+ type="blue"
+ >
+ top-left
+ </fwb-indicator>Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <fwb-indicator class="absolute top-0 -translate-y-1/2 -translate-x-1/2 text-xs w-auto px-2 h-4 text-white" type="blue">top-left</fwb-indicator> | |
| <fwb-indicator | |
| class="absolute top-0 -translate-y-1/2 -translate-x-1/2 text-xs w-auto px-2 h-4 text-white" | |
| type="blue" | |
| > | |
| top-left | |
| </fwb-indicator> |
Tools
GitHub Check: lint (18.x)
[warning] 3-3:
'type' should be on a new line
[warning] 3-3:
Expected 1 line break after opening tag (<fwb-indicator>), but no line breaks found
[warning] 3-3:
Expected 1 line break before closing tag (</fwb-indicator>), but no line breaks found
| <fwb-indicator class="absolute top-1/2 left-0 -translate-y-1/2 -translate-x-1/2 text-xs w-auto px-2 h-4 text-white" type="blue">middle-left</fwb-indicator> | ||
| <fwb-indicator class="absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 text-xs w-auto px-2 h-4 text-white" type="blue">middle-center</fwb-indicator> | ||
| <fwb-indicator class="absolute top-1/2 right-0 -translate-y-1/2 translate-x-1/2 text-xs w-auto px-2 h-4 text-white" type="blue">middle-right</fwb-indicator> | ||
| <fwb-indicator class="absolute bottom-0 translate-y-1/2 -translate-x-1/2 text-xs w-auto px-2 h-4 text-white" type="blue">bottom-left</fwb-indicator> |
There was a problem hiding this comment.
Fix formatting issues.
The type attribute should be on a new line, and there should be line breaks after the opening tag and before the closing tag.
- <fwb-indicator class="absolute bottom-0 translate-y-1/2 -translate-x-1/2 text-xs w-auto px-2 h-4 text-white" type="blue">bottom-left</fwb-indicator>
+ <fwb-indicator
+ class="absolute bottom-0 translate-y-1/2 -translate-x-1/2 text-xs w-auto px-2 h-4 text-white"
+ type="blue"
+ >
+ bottom-left
+ </fwb-indicator>Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <fwb-indicator class="absolute bottom-0 translate-y-1/2 -translate-x-1/2 text-xs w-auto px-2 h-4 text-white" type="blue">bottom-left</fwb-indicator> | |
| <fwb-indicator | |
| class="absolute bottom-0 translate-y-1/2 -translate-x-1/2 text-xs w-auto px-2 h-4 text-white" | |
| type="blue" | |
| > | |
| bottom-left | |
| </fwb-indicator> |
| <fwb-indicator class="absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 text-xs w-auto px-2 h-4 text-white" type="blue">middle-center</fwb-indicator> | ||
| <fwb-indicator class="absolute top-1/2 right-0 -translate-y-1/2 translate-x-1/2 text-xs w-auto px-2 h-4 text-white" type="blue">middle-right</fwb-indicator> | ||
| <fwb-indicator class="absolute bottom-0 translate-y-1/2 -translate-x-1/2 text-xs w-auto px-2 h-4 text-white" type="blue">bottom-left</fwb-indicator> | ||
| <fwb-indicator class="absolute bottom-0 left-1/2 translate-y-1/2 -translate-x-1/2 text-xs w-auto px-2 h-4 text-white" type="blue">bottom-center</fwb-indicator> |
There was a problem hiding this comment.
Fix formatting issues.
The type attribute should be on a new line, and there should be line breaks after the opening tag and before the closing tag.
- <fwb-indicator class="absolute bottom-0 left-1/2 translate-y-1/2 -translate-x-1/2 text-xs w-auto px-2 h-4 text-white" type="blue">bottom-center</fwb-indicator>
+ <fwb-indicator
+ class="absolute bottom-0 left-1/2 translate-y-1/2 -translate-x-1/2 text-xs w-auto px-2 h-4 text-white"
+ type="blue"
+ >
+ bottom-center
+ </fwb-indicator>Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <fwb-indicator class="absolute bottom-0 left-1/2 translate-y-1/2 -translate-x-1/2 text-xs w-auto px-2 h-4 text-white" type="blue">bottom-center</fwb-indicator> | |
| <fwb-indicator | |
| class="absolute bottom-0 left-1/2 translate-y-1/2 -translate-x-1/2 text-xs w-auto px-2 h-4 text-white" | |
| type="blue" | |
| > | |
| bottom-center | |
| </fwb-indicator> |
| <fwb-indicator class="absolute top-1/2 right-0 -translate-y-1/2 translate-x-1/2 text-xs w-auto px-2 h-4 text-white" type="blue">middle-right</fwb-indicator> | ||
| <fwb-indicator class="absolute bottom-0 translate-y-1/2 -translate-x-1/2 text-xs w-auto px-2 h-4 text-white" type="blue">bottom-left</fwb-indicator> | ||
| <fwb-indicator class="absolute bottom-0 left-1/2 translate-y-1/2 -translate-x-1/2 text-xs w-auto px-2 h-4 text-white" type="blue">bottom-center</fwb-indicator> | ||
| <fwb-indicator class="absolute bottom-0 right-0 translate-y-1/2 translate-x-1/2 text-xs w-auto px-2 h-4 text-white" type="blue">bottom-right</fwb-indicator> |
There was a problem hiding this comment.
Fix formatting issues.
The type attribute should be on a new line, and there should be line breaks after the opening tag and before the closing tag.
- <fwb-indicator class="absolute bottom-0 right-0 translate-y-1/2 translate-x-1/2 text-xs w-auto px-2 h-4 text-white" type="blue">bottom-right</fwb-indicator>
+ <fwb-indicator
+ class="absolute bottom-0 right-0 translate-y-1/2 translate-x-1/2 text-xs w-auto px-2 h-4 text-white"
+ type="blue"
+ >
+ bottom-right
+ </fwb-indicator>Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <fwb-indicator class="absolute bottom-0 right-0 translate-y-1/2 translate-x-1/2 text-xs w-auto px-2 h-4 text-white" type="blue">bottom-right</fwb-indicator> | |
| <fwb-indicator | |
| class="absolute bottom-0 right-0 translate-y-1/2 translate-x-1/2 text-xs w-auto px-2 h-4 text-white" | |
| type="blue" | |
| > | |
| bottom-right | |
| </fwb-indicator> |
| <fwb-indicator class="absolute top-0 right-0 -translate-y-1/2 translate-x-1/2 text-xs w-auto px-2 h-4 text-white" type="blue">top-right</fwb-indicator> | ||
| <fwb-indicator class="absolute top-1/2 left-0 -translate-y-1/2 -translate-x-1/2 text-xs w-auto px-2 h-4 text-white" type="blue">middle-left</fwb-indicator> | ||
| <fwb-indicator class="absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 text-xs w-auto px-2 h-4 text-white" type="blue">middle-center</fwb-indicator> | ||
| <fwb-indicator class="absolute top-1/2 right-0 -translate-y-1/2 translate-x-1/2 text-xs w-auto px-2 h-4 text-white" type="blue">middle-right</fwb-indicator> |
There was a problem hiding this comment.
Fix formatting issues.
The type attribute should be on a new line, and there should be line breaks after the opening tag and before the closing tag.
- <fwb-indicator class="absolute top-1/2 right-0 -translate-y-1/2 translate-x-1/2 text-xs w-auto px-2 h-4 text-white" type="blue">middle-right</fwb-indicator>
+ <fwb-indicator
+ class="absolute top-1/2 right-0 -translate-y-1/2 translate-x-1/2 text-xs w-auto px-2 h-4 text-white"
+ type="blue"
+ >
+ middle-right
+ </fwb-indicator>Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <fwb-indicator class="absolute top-1/2 right-0 -translate-y-1/2 translate-x-1/2 text-xs w-auto px-2 h-4 text-white" type="blue">middle-right</fwb-indicator> | |
| <fwb-indicator | |
| class="absolute top-1/2 right-0 -translate-y-1/2 translate-x-1/2 text-xs w-auto px-2 h-4 text-white" | |
| type="blue" | |
| > | |
| middle-right | |
| </fwb-indicator> |
| <template> | ||
| <div class="relative w-56 h-56 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700"> | ||
| <fwb-indicator class="absolute top-0 -translate-y-1/2 -translate-x-1/2 text-xs w-auto px-2 h-4 text-white" type="blue">top-left</fwb-indicator> | ||
| <fwb-indicator class="absolute top-0 left-1/2 -translate-y-1/2 -translate-x-1/2 text-xs w-auto px-2 h-4 text-white" type="blue">top-center</fwb-indicator> |
There was a problem hiding this comment.
Fix formatting issues.
The type attribute should be on a new line, and there should be line breaks after the opening tag and before the closing tag.
- <fwb-indicator class="absolute top-0 left-1/2 -translate-y-1/2 -translate-x-1/2 text-xs w-auto px-2 h-4 text-white" type="blue">top-center</fwb-indicator>
+ <fwb-indicator
+ class="absolute top-0 left-1/2 -translate-y-1/2 -translate-x-1/2 text-xs w-auto px-2 h-4 text-white"
+ type="blue"
+ >
+ top-center
+ </fwb-indicator>Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <fwb-indicator class="absolute top-0 left-1/2 -translate-y-1/2 -translate-x-1/2 text-xs w-auto px-2 h-4 text-white" type="blue">top-center</fwb-indicator> | |
| <fwb-indicator | |
| class="absolute top-0 left-1/2 -translate-y-1/2 -translate-x-1/2 text-xs w-auto px-2 h-4 text-white" | |
| type="blue" | |
| > | |
| top-center | |
| </fwb-indicator> |
Tools
GitHub Check: lint (18.x)
[warning] 4-4:
'type' should be on a new line
[warning] 4-4:
Expected 1 line break after opening tag (<fwb-indicator>), but no line breaks found
[warning] 4-4:
Expected 1 line break before closing tag (</fwb-indicator>), but no line breaks found
| <div class="relative w-56 h-56 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700"> | ||
| <fwb-indicator class="absolute top-0 -translate-y-1/2 -translate-x-1/2 text-xs w-auto px-2 h-4 text-white" type="blue">top-left</fwb-indicator> | ||
| <fwb-indicator class="absolute top-0 left-1/2 -translate-y-1/2 -translate-x-1/2 text-xs w-auto px-2 h-4 text-white" type="blue">top-center</fwb-indicator> | ||
| <fwb-indicator class="absolute top-0 right-0 -translate-y-1/2 translate-x-1/2 text-xs w-auto px-2 h-4 text-white" type="blue">top-right</fwb-indicator> |
There was a problem hiding this comment.
Fix formatting issues.
The type attribute should be on a new line, and there should be line breaks after the opening tag and before the closing tag.
- <fwb-indicator class="absolute top-0 right-0 -translate-y-1/2 translate-x-1/2 text-xs w-auto px-2 h-4 text-white" type="blue">top-right</fwb-indicator>
+ <fwb-indicator
+ class="absolute top-0 right-0 -translate-y-1/2 translate-x-1/2 text-xs w-auto px-2 h-4 text-white"
+ type="blue"
+ >
+ top-right
+ </fwb-indicator>Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <fwb-indicator class="absolute top-0 right-0 -translate-y-1/2 translate-x-1/2 text-xs w-auto px-2 h-4 text-white" type="blue">top-right</fwb-indicator> | |
| <fwb-indicator | |
| class="absolute top-0 right-0 -translate-y-1/2 translate-x-1/2 text-xs w-auto px-2 h-4 text-white" | |
| type="blue" | |
| > | |
| top-right | |
| </fwb-indicator> |
Tools
GitHub Check: lint (18.x)
[warning] 5-5:
'type' should be on a new line
Sqrcz
added
🔧 enhancement
|
This one is a bit tricky... 🙈 We already have Another thing that makes this component "hard" to use is that it can't influence it's parent CSS position setting... so it would require adding It may be OK in pure HTML/CSS components library... but in library of dynamic components... it may be batter as part of "bigger things" rather on it's own. Before moving on with the review and potential code changes.... Please convince me that this component makes sense on it's own... ;) especially by giving examples of use with different components.... because now adding this to a button or an avatar is not working as expected and I'm not sure how do you see it being used. |
|
This component is not meaningful on its own, I agree with you on this issue. Also, having to have But if used in another situation, it can reduce code duplication. And it allows the developer to have a more accessible component. So the user does not have to copy and paste the following code every time and the code base becomes more readable. I can also style the component required for placement through a props, but this may also restrict the user. Example: These are what come to my mind right now. I can't give more detailed examples :) because this is a small component. I opened this PR because the issue was also open. If you don't think it's necessary, I can turn it off. Thank you for your feedback. I will be waiting for your reply. Have a nice day. |
|
Hey, Yes... it will be hard to use on it's own... we could refactor avatars and buttons to use this internally but I'm not sure if it's worth the effort for now. I've taken over maintaining this project only recently... ant there are a lot of outdated things that I need to clean. If you want to pick something to help... there is a long list of things that we can improve: #236 ;) Thank you for your input 🙏 |
|
Then we need to think a little more about this component. I won't close PR, maybe someone will need it. I'll take a look at #236 and would be happy to contribute. Thank you, have a nice day |
Hi,
I completed the issue opened for the Indicator component. #209
Details:
I hope it turned out the way you wanted. I'll be waiting for your feedback. Good luck
@Sqrcz @cogor @zoltanszogyenyi @robert1508
Summary by CodeRabbit
New Features
FwbIndicatorcomponent for customizable visual indicators, supporting multiple color themes.FwbIndicatorcomponent and examples demonstrating different use cases.FwbIndicatorPositionExamplecomponent to showcase positioning variations for indicators.Bug Fixes
Documentation
FwbIndicatorcomponent and its examples.