feat: Indicator components

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' },

docs/components/indicator.md

@@ -0,0 +1,60 @@
+<script setup>
+import FwbIndicatorExample from './indicator/examples/FwbIndicatorExample.vue'
+import FwbIndicatorPositionExample from './indicator/examples/FwbIndicatorPositionExample.vue'
+</script>
+
+# 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.
+
+<fwb-indicator-example />
+```vue
+<template>
+    <fwb-indicator />
+    <fwb-indicator type="dark" />
+    <fwb-indicator type="blue" />
+    <fwb-indicator type="green" />
+    <fwb-indicator type="red" />
+    <fwb-indicator type="indigo" />
+    <fwb-indicator type="purple" />
+    <fwb-indicator type="yellow" />
+    <fwb-indicator type="teal" />
+</template>
+```
+
+## Indicator position
+
+Use these examples to position the indicator component anywhere relative to the parent element.
+
+<fwb-indicator-position-example />
+<br />
+
+```vue
+<template>
+    <div class='relative'>
+        <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>
+        <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>
+        <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>
+    </div>
+</template>
+```

docs/components/indicator/examples/FwbIndicatorExample.vue

@@ -0,0 +1,18 @@
+<template>
+<div class="vp-raw flex gap-4">
+    <fwb-indicator />
+    <fwb-indicator type="dark" />
+    <fwb-indicator type="blue" />
+    <fwb-indicator type="green" />
+    <fwb-indicator type="red" />
+    <fwb-indicator type="indigo" />
+    <fwb-indicator type="purple" />
+    <fwb-indicator type="yellow" />
+    <fwb-indicator type="teal" />
+</div>
+</template>
+
+<script setup lang="ts">
+import { FwbIndicator } from '../../../../src/index'
+
+</script>

docs/components/indicator/examples/FwbIndicatorPositionExample.vue

@@ -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>
+    <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>
+    <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>
+    <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>
+</div>
+</template>
+
+<script setup lang="ts">
+import { FwbIndicator } from '../../../../src/index'
+
+</script>

src/components/FwbIndicator/FwbIndicator.vue

@@ -0,0 +1,42 @@
+<template>
+    <span :class="indicatorClasses">
+        <slot></slot>
+    </span>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useMergeClasses } from '@/composables/useMergeClasses'
+
+type IndıcatorType = 'default' | 'dark' | 'blue' | 'green' | 'red' | 'indigo' | 'purple' | 'yellow' | 'teal'
+
+interface IIndicatorProps {
+  type?: IndıcatorType
+  class?: string
+}
+
+const props = withDefaults(defineProps<IIndicatorProps>(), {
+  type: 'default',
+  class: '',
+})
+
+const defaultIndicatorClasses = 'w-3 h-3 rounded-full'
+const indicatorTypeClasses = {
+  default: 'bg-gray-200',
+  dark: 'bg-gray-900 dark:bg-gray-700',
+  blue: 'bg-blue-600',
+  green: 'bg-green-500',
+  red: 'bg-red-500',
+  indigo: 'bg-indigo-500',
+  purple: 'bg-purple-500',
+  yellow: 'bg-yellow-300',
+  teal: 'bg-teal-500',
+}
+
+const indicatorClasses = computed(() => useMergeClasses([
+  defaultIndicatorClasses,
+  indicatorTypeClasses[props.type],
+  props.class,
+]))
+
+</script>

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'