From 6a76c79c87df0c54bb4b3cfb7bd7fab27e5d7478 Mon Sep 17 00:00:00 2001 From: ogzCode Date: Fri, 2 Aug 2024 17:11:38 +0300 Subject: [PATCH 1/3] feat: Add FwbIndicator component 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. --- src/components/FwbIndicator/FwbIndicator.vue | 42 ++++++++++++++++++++ 1 file changed, 42 insertions(+) create mode 100644 src/components/FwbIndicator/FwbIndicator.vue diff --git a/src/components/FwbIndicator/FwbIndicator.vue b/src/components/FwbIndicator/FwbIndicator.vue new file mode 100644 index 00000000..4e1ca530 --- /dev/null +++ b/src/components/FwbIndicator/FwbIndicator.vue @@ -0,0 +1,42 @@ + + + From 54299727ecda8581b5ab15774da08bb88118fc55 Mon Sep 17 00:00:00 2001 From: ogzCode Date: Fri, 2 Aug 2024 17:12:00 +0300 Subject: [PATCH 2/3] feat: Add Vue Indicator component 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. --- docs/components/indicator.md | 60 +++++++++++++++++++ .../examples/FwbIndicatorExample.vue | 18 ++++++ .../examples/FwbIndicatorPositionExample.vue | 18 ++++++ 3 files changed, 96 insertions(+) create mode 100644 docs/components/indicator.md create mode 100644 docs/components/indicator/examples/FwbIndicatorExample.vue create mode 100644 docs/components/indicator/examples/FwbIndicatorPositionExample.vue diff --git a/docs/components/indicator.md b/docs/components/indicator.md new file mode 100644 index 00000000..ad3ed334 --- /dev/null +++ b/docs/components/indicator.md @@ -0,0 +1,60 @@ + + +# Vue Indicator - Flowbite + +#### 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 + +--- + +:::tip +Original reference: [https://flowbite.com/docs/components/indicators/](https://flowbite.com/docs/components/indicators/) +::: + +The indicator component can be used as a small element positioned absolutely relative to another component such as a button or card and show a number count, account status (red for offline, green for online) and other useful information. + +Check out the following examples for multiple sizes, colors, positionings, styles, and more all coded with Tailwind CSS and Flowbite. + +## Default Indicator + +Use this example to create a simple indicator with multiple colors and position it anywhere on the website. + + +```vue + +``` + +## Indicator position + +Use these examples to position the indicator component anywhere relative to the parent element. + + +
+ +```vue + +``` \ No newline at end of file diff --git a/docs/components/indicator/examples/FwbIndicatorExample.vue b/docs/components/indicator/examples/FwbIndicatorExample.vue new file mode 100644 index 00000000..e389d9d0 --- /dev/null +++ b/docs/components/indicator/examples/FwbIndicatorExample.vue @@ -0,0 +1,18 @@ + + + diff --git a/docs/components/indicator/examples/FwbIndicatorPositionExample.vue b/docs/components/indicator/examples/FwbIndicatorPositionExample.vue new file mode 100644 index 00000000..292723a6 --- /dev/null +++ b/docs/components/indicator/examples/FwbIndicatorPositionExample.vue @@ -0,0 +1,18 @@ + + + From e3a64a529e88c95ed7ccbecf936c0a787d679091 Mon Sep 17 00:00:00 2001 From: ogzCode Date: Fri, 2 Aug 2024 17:12:16 +0300 Subject: [PATCH 3/3] feat: Add FwbIndicator component 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. --- docs/.vitepress/config.mts | 1 + src/index.ts | 1 + 2 files changed, 2 insertions(+) diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts index ccd469fc..f6e45c41 100644 --- a/docs/.vitepress/config.mts +++ b/docs/.vitepress/config.mts @@ -45,6 +45,7 @@ function getComponents() { { text: 'Card', link: '/components/card.md' }, { text: 'Carousel', link: '/components/carousel' }, { text: 'Dropdown', link: '/components/dropdown' }, + { text: "Indicator", link: '/components/indicator' }, { text: 'Jumbotron', link: '/components/jumbotron' }, { text: 'ListGroup', link: '/components/list-group' }, { text: 'Pagination', link: '/components/pagination' }, diff --git a/src/index.ts b/src/index.ts index 994321a8..eaa31ca2 100644 --- a/src/index.ts +++ b/src/index.ts @@ -20,6 +20,7 @@ export { default as FwbFooterCopyright } from './components/FwbFooter/FwbFooterC export { default as FwbFooterIcon } from './components/FwbFooter/FwbFooterIcon.vue' export { default as FwbFooterLink } from './components/FwbFooter/FwbFooterLink.vue' export { default as FwbFooterLinkGroup } from './components/FwbFooter/FwbFooterLinkGroup.vue' +export { default as FwbIndicator } from './components/FwbIndicator/FwbIndicator.vue' export { default as FwbJumbotron } from './components/FwbJumbotron/FwbJumbotron.vue' export { default as FwbListGroup } from './components/FwbListGroup/FwbListGroup.vue' export { default as FwbListGroupItem } from './components/FwbListGroup/FwbListGroupItem.vue'