diff --git a/.eslintrc.js b/.eslintrc.js
index 9655d93..6e93d4a 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -19,5 +19,6 @@ module.exports = {
'vue/multi-word-component-names': 'off',
'comma-dangle': ['error', 'always-multiline'],
'no-multiple-empty-lines': 'error',
+ 'object-curly-spacing': ['error', 'always'],
},
}
diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
index 31a9ea5..b0b3cb3 100644
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@@ -16,6 +16,7 @@ function buildSidebar() {
function getComponents() {
return [
+ { text: 'Alert', link: '/guide/alert/alert.md' },
{ text: 'Button', link: '/guide/button/button.md' },
{ text: 'Button Group', link: '/guide/buttonGroup/buttonGroup.md' },
{ text: 'Spinner', link: '/guide/spinner/spinner.md' },
diff --git a/docs/guide/alert/alert.md b/docs/guide/alert/alert.md
new file mode 100644
index 0000000..18a3ca8
--- /dev/null
+++ b/docs/guide/alert/alert.md
@@ -0,0 +1,208 @@
+
+
+# Alert
+
+reference: [https://flowbite.com/docs/components/alert/](https://flowbite.com/docs/components/alert/)
+
+## Prop - type
+
+```typescript
+export type AlertType = 'info' | 'danger' | 'success' | 'warning' | 'dark'
+defineProps({
+ type: {
+ type: String as PropType,
+ default: 'info',
+ },
+})
+```
+
+
+
+
+
Info
+
Warning
+
Danger
+
Dark
+
Success
+
+```
+
+## Prop - title
+
+```typescript
+defineProps({
+ title: {
+ type: String,
+ default: '',
+ },
+})
+```
+
+
+
+
+
Info
+
Warning
+
Danger
+
Dark
+
Success
+
+```
+
+## Prop - closable
+
+```typescript
+defineProps({
+ closable: {
+ type: Boolean,
+ default: false,
+ },
+})
+```
+
+
+
+
+
Info
+
Warning
+
Danger
+
Dark
+
Success
+
+```
+
+## Prop - border
+
+```typescript
+defineProps({
+ border: {
+ type: Boolean,
+ default: false,
+ },
+})
+```
+
+
+
+
+
Info
+
Warning
+
Danger
+
Dark
+
Success
+
+```
+
+## Prop - icon
+
+```typescript
+defineProps({
+ icon: {
+ type: Boolean,
+ default: true,
+ },
+})
+```
+
+
+
+
+
Info
+
Warning
+
Danger
+
Dark
+
Success
+
+```
+
+## Prop - inline
+
+```typescript
+defineProps({
+ inline: {
+ type: Boolean,
+ default: true,
+ },
+})
+```
+
+
+
+
+
+ Lorem...
+
+
+ Lorem...
+
+
+ Lorem...
+
+
+ Lorem...
+
+
+ Lorem...
+
+
+ Buttons everywhere
+
+
+
+
+ And here
+
+
+
+
+```
\ No newline at end of file
diff --git a/docs/guide/alert/examples/AlertBorderExample.vue b/docs/guide/alert/examples/AlertBorderExample.vue
new file mode 100644
index 0000000..08d551b
--- /dev/null
+++ b/docs/guide/alert/examples/AlertBorderExample.vue
@@ -0,0 +1,12 @@
+
+
+
Info
+
Warning
+
Danger
+
Dark
+
Success
+
+
diff --git a/docs/guide/alert/examples/AlertClosableExample.vue b/docs/guide/alert/examples/AlertClosableExample.vue
new file mode 100644
index 0000000..78742e9
--- /dev/null
+++ b/docs/guide/alert/examples/AlertClosableExample.vue
@@ -0,0 +1,12 @@
+
+
+
Info
+
Warning
+
Danger
+
Dark
+
Success
+
+
diff --git a/docs/guide/alert/examples/AlertIconExample.vue b/docs/guide/alert/examples/AlertIconExample.vue
new file mode 100644
index 0000000..57542ec
--- /dev/null
+++ b/docs/guide/alert/examples/AlertIconExample.vue
@@ -0,0 +1,12 @@
+
+
+
Info
+
Warning
+
Danger
+
Dark
+
Success
+
+
diff --git a/docs/guide/alert/examples/AlertInlineExample.vue b/docs/guide/alert/examples/AlertInlineExample.vue
new file mode 100644
index 0000000..9c6efd0
--- /dev/null
+++ b/docs/guide/alert/examples/AlertInlineExample.vue
@@ -0,0 +1,33 @@
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda beatae eaque error est eveniet, facere illo labore libero minima molestiae neque nisi non officia quod sed temporibus unde vitae voluptates.
+
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur cupiditate dicta dolore dolores hic sequi tenetur, vero! Blanditiis consequatur culpa nisi ratione repellat! Delectus dolore magni nemo placeat qui sequi.
+
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusamus accusantium atque cupiditate, dignissimos dolorum, error inventore iste libero minus nihil possimus quasi quia quibusdam quisquam recusandae repellat reprehenderit temporibus.
+
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aperiam dolore et, fuga impedit, iusto nam numquam officiis quas, repellat sapiente sit unde vel? Adipisci delectus dolore eius optio sunt.
+
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias at culpa cupiditate deleniti eos ipsam ipsum, nostrum perspiciatis provident tempore? Aspernatur expedita praesentium voluptatibus. Accusamus explicabo iusto nobis reiciendis temporibus!
+
+
+ Buttons everywhere
+
+
+
+
+ And here
+
+
+
+
+
diff --git a/docs/guide/alert/examples/AlertTitleExample.vue b/docs/guide/alert/examples/AlertTitleExample.vue
new file mode 100644
index 0000000..88d4269
--- /dev/null
+++ b/docs/guide/alert/examples/AlertTitleExample.vue
@@ -0,0 +1,12 @@
+
+
+
Info
+
Warning
+
Danger
+
Dark
+
Success
+
+
diff --git a/docs/guide/alert/examples/AlertTypeExample.vue b/docs/guide/alert/examples/AlertTypeExample.vue
new file mode 100644
index 0000000..957cb95
--- /dev/null
+++ b/docs/guide/alert/examples/AlertTypeExample.vue
@@ -0,0 +1,12 @@
+
+
+
Info
+
Warning
+
Danger
+
Dark
+
Success
+
+
diff --git a/src/components/Alert/Alert.vue b/src/components/Alert/Alert.vue
new file mode 100644
index 0000000..1e5c6f2
--- /dev/null
+++ b/src/components/Alert/Alert.vue
@@ -0,0 +1,73 @@
+
+
+
+
+
+ {{ title }}
+
+
+ Dismiss
+
+
+
+
+
+
+
+ Dismiss
+
+
+
\ No newline at end of file
diff --git a/src/components/Alert/useAlertClasses.ts b/src/components/Alert/useAlertClasses.ts
new file mode 100644
index 0000000..0d8bedf
--- /dev/null
+++ b/src/components/Alert/useAlertClasses.ts
@@ -0,0 +1,106 @@
+import type { AlertType } from './Alert.vue'
+import { computed } from 'vue'
+import type { Ref } from 'vue'
+import classNames from 'classnames'
+
+const defaultAlertClasses = 'p-4 text-sm'
+
+const alertTextClasses: Record = {
+ danger: 'text-red-700 dark:text-red-800',
+ dark: 'text-gray-700 dark:text-gray-300',
+ info: 'text-blue-700 dark:text-blue-800',
+ success: 'text-green-700 dark:text-green-800',
+ warning: 'text-yellow-700 dark:text-yellow-800',
+}
+
+const alertTypeClasses: Record = {
+ danger: 'bg-red-100 dark:bg-red-200',
+ dark: 'bg-gray-100 dark:bg-gray-700',
+ info: 'bg-blue-100 dark:bg-blue-200',
+ success: 'bg-green-100 dark:bg-green-200',
+ warning: 'bg-yellow-100 dark:bg-yellow-200',
+}
+
+const alertBorderClasses: Record = {
+ danger: 'border-t-4 border-red-500',
+ dark: 'border-t-4 border-gray-500',
+ info: 'border-t-4 border-blue-500',
+ success: 'border-t-4 border-green-500',
+ warning: 'border-t-4 border-yellow-500',
+}
+
+
+const defaultCloseButtonClasses = 'ml-auto -mx-1.5 -my-1.5 rounded-lg focus:ring-2 p-1.5 inline-flex h-8 w-8'
+
+const closeButtonClasses: Record = {
+ danger: 'hover:bg-red-200 dark:hover:bg-red-300 focus:ring-red-400 bg-red-100 dark:bg-red-200 text-red-500',
+ dark: 'dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-white hover:bg-gray-200 focus:ring-gray-400 bg-gray-100 text-gray-500',
+ info: 'hover:bg-blue-200 dark:hover:bg-blue-300 focus:ring-blue-400 bg-blue-100 dark:bg-blue-200 text-blue-500',
+ success: 'bg-green-100 dark:bg-green-200 text-green-500 focus:ring-green-400 hover:bg-green-200 dark:hover:bg-green-300',
+ warning: 'focus:ring-yellow-400 hover:bg-yellow-200 dark:hover:bg-yellow-300 bg-yellow-100 dark:bg-yellow-200 text-yellow-500',
+}
+
+export type UseAlertClassesProps = {
+ type: AlertType
+ border: boolean
+ icon: boolean
+ inline: boolean
+ title: string
+}
+
+export function useAlertClasses(props: UseAlertClassesProps): {
+ alertClasses: Ref,
+ textClasses: Ref,
+ closeClasses: Ref,
+ contentClasses: Ref,
+ titleClasses: Ref,
+} {
+
+ const alertClasses = computed(() => {
+ return classNames(
+ defaultAlertClasses,
+ alertTypeClasses[props.type],
+ textClasses.value,
+ props.border ? alertBorderClasses[props.type] : 'rounded-lg', // rounded only if no border
+ props.inline ? 'flex' : '',
+ )
+ })
+
+ const textClasses = computed(() => {
+ return classNames(
+ alertTextClasses[props.type],
+ )
+ })
+
+ const closeClasses = computed(() => {
+ return classNames(
+ defaultCloseButtonClasses,
+ closeButtonClasses[props.type],
+ )
+ })
+
+ const contentClasses = computed(() => {
+ if(!props.inline) return classNames('mt-2 mb-4')
+ if(!props.icon && !props.title) return ''
+ return classNames(!props.title ? 'ml-3' : 'ml-1')
+ })
+
+ const titleClasses = computed(() => {
+ if(!props.icon || !props.inline) return classNames(
+ 'font-medium',
+ !props.inline ? 'text-lg ml-2' : '',
+ )
+ return classNames(
+ 'font-medium ml-3',
+ !props.inline ? 'text-lg' : '',
+ )
+ })
+
+ return {
+ alertClasses,
+ textClasses,
+ closeClasses,
+ contentClasses,
+ titleClasses,
+ }
+}
\ No newline at end of file
diff --git a/src/components/Button/useButtonClasses.ts b/src/components/Button/useButtonClasses.ts
index 63e8f24..74c09f7 100644
--- a/src/components/Button/useButtonClasses.ts
+++ b/src/components/Button/useButtonClasses.ts
@@ -4,7 +4,9 @@ import classNames from 'classnames'
import type { ButtonDuotoneGradient, ButtonGradient, ButtonMonochromeGradient, ButtonSize, ButtonVariant } from './Button.vue'
-const buttonColorClasses: { hover: Record, default: Record } = {
+export type ButtonClassMap = { hover: Record, default: Record }
+
+const buttonColorClasses: ButtonClassMap = {
default: {
default: 'text-white bg-blue-700 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg dark:bg-blue-600 focus:outline-none dark:focus:ring-blue-800',
alternative: 'font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600',
@@ -28,10 +30,7 @@ const buttonColorClasses: { hover: Record, default: Reco
},
}
-const buttonOutlineColorClasses: {
- hover: Record, string>,
- default: Record, string>
-} = {
+const buttonOutlineColorClasses: ButtonClassMap> = {
default: {
dark: 'text-gray-900 border border-gray-800 focus:ring-4 focus:outline-none focus:ring-gray-300 font-medium rounded-lg text-sm text-center dark:border-gray-600 dark:text-gray-400 dark:focus:ring-gray-800',
default: 'text-blue-700 border border-blue-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm text-center dark:border-blue-500 dark:text-blue-500 dark:focus:ring-blue-800',
@@ -51,7 +50,7 @@ const buttonOutlineColorClasses: {
}
-const buttonGradientClasses: { hover: Record, default: Record } = {
+const buttonGradientClasses: ButtonClassMap = {
hover: {
'cyan-blue': 'hover:bg-gradient-to-bl',
'green-blue': 'hover:bg-gradient-to-bl',
@@ -88,7 +87,7 @@ const buttonGradientClasses: { hover: Record, default: R
},
}
-const buttonOutlineGradientClasses: { hover: Record, default: Record } = {
+const buttonOutlineGradientClasses: ButtonClassMap = {
default: {
'cyan-blue':
'relative inline-flex items-center justify-center overflow-hidden font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-cyan-500 to-blue-500 dark:text-white focus:ring-4 focus:outline-none focus:ring-cyan-200 dark:focus:ring-cyan-800',
diff --git a/src/index.ts b/src/index.ts
index d44c61b..96e58bb 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,3 +1,4 @@
export { default as Button } from './components/Button/Button.vue'
export { default as Spinner } from './components/Spinner/Spinner.vue'
export { default as ButtonGroup } from './components/ButtonGroup/ButtonGroup.vue'
+export { default as Alert } from './components/Alert/Alert.vue'